weex h5开发区别-实践初级篇

Posted lyre

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了weex h5开发区别-实践初级篇相关的知识,希望对你有一定的参考价值。

html标签
  • weex中没有标签的概念,html中标签对应于weex中的Components

  • weex 无<span> 、<p> ,用<text>替代。但是<text>内部不能嵌入组件
  • 在HTML中通常使用的 <img> 标签在 Weex 中不支持,应该使用<image>
  • 内容部分有滚动效果,使用<scroller>。使用css的overflow属性不能让内容滚动。

css语法
  • Weex 中只支持单个类名选择器,不支持关系选择器,也不支持属性选择器。
  • 样式默认是 scoped,即组件级别作用域。

  • 视窗的宽度是750px(width=device-width),设计稿给出的是375px,故写css px 的时候要用2倍
  • 布局,使用flexbox 布局

  • box-shadow 安卓不支持, 目前官方最新的weex版本支持,需客户端sdk升级

  • ios 如果写外部阴影,ios 要加上一个background。

    box-shadow: 0px 0px 6px #cccccc;
    background: #ffffff;
  • native, DOM设置position: absolute时, 不支持top、 left百分比, 要用px 写死。

  • 支持自定义font-family, 但是不支持自提文件放在服务器端,一般放在客户端本地。

    把字体文件放在native的时候,注意下路径,本地资源都采用‘local:// ‘的方式加载,但是android需要加一个path,这个path随便填,如rpd。
  • 不支持z-index, 如果想要层级(如蒙层),请用position: absolute, 把你想要层级高的dom元素放在后边

  • 不支持css动画,要动画效果使用内建组件animation, 具体见https://weex-project.io/cn/references/modules/animation.html

  • border不支持简写。style、width、color只能分开写

    ?

关于DOM和BOM
  • weex环境中没有DOM,weex在native解析的html得到的是原生布局数

  • weex没有BOM,但是可以使用移动设备原生 API(即Modules),通过注册、调用模块来实现。

    例如const storage = weex.requireModule(‘storage‘);

vue语法
  • 事件修饰符 .prevent, .capture, .stop, .self在native不支持。键盘事件修饰符.enter, .tab, .ctrl, .shift同样在native也不支持。
  • 指令不支持 v-html 、v-show、v-clock
  • options 不支持comments
  • 实例方法不支持vm.$mount()
  • 内置组件不支持transition
  • 生命周期不支持activateddeactivated
  • 使用组件,直接绑定click.native ,在web端会触发两次,用事件传递(事件名称避免使用原生事件名称),可避免。
  • 组件事件传递,最好不要和原生事件冲突。比如子组件this.$emit(‘click‘),在web端 父组件@click会响应两次,native却没有这个问题。
  • :class="[‘verifyitem--‘ + verifyStatus]”, class 写法不支持vue object的写法,只支持数组式的写法 , 而且只能写一个自定义的类。 由于 Weex 在 native 上的渲染机制,从类名中取样式会是一个高频操作,简化,具体见<https://github.com/alibaba/weex/issues/2303

  • input and switch 组件不支持 click事件,使用change or input 替代。

  • 不支持 document 和其他各种 DOM API。

  • 没有 windowscreenhistorylocationnavigator 等变量。

  • 关于蒙层, 安卓点透问题解决办法:e.preventDefault && e.preventDefault();
    ?

    ?

    ?

配置
  • 页面

src/entry.js 执行的始端,相当于项目模版中的index.js

src/views/a.js 页面a的配置,指定title和页面入口

src/entries/a/ 页面, 相当于项目模版中的src/webview/a

  • 代码在web端运行,需要依赖weex-vue-render(web端的vue DSL)。
  • 解析.vue文件需要的loader,native端需要 weex-loader , web端需要Webpack + vue-loader
调试
  • 本地运行的时候需要同时执行npm run dev 和 npm run serve

  • ios调试小工具->Week DebugTool->扫描二维码

    安卓调试小工具->功能->扫码

动态更新机制

目前,打开的weex页面的时候会向服务器请求js bundle,但是本次渲染的是本地的js bundle,要等到第二次打开才会渲染最新的。

这个更新机制不太友好,做不到h5的动态性。

其他
  • 区分端 weex.config.env.platform = web/iOS/android

  • 通过this.$route.push(‘/**‘) 打开另外一个weex页面,回到上一个页面的事件使用viewappear。具体见https://weex.apache.org/cn/references/common-event.html#Page-事件

  • ajax请求,如果是native端, 避免跨域
  • svg-icon 如果碰到显示不全,请用图片替代

一些参考的资料

以上是关于weex h5开发区别-实践初级篇的主要内容,如果未能解决你的问题,请参考以下文章

UC-Weex的优化实践之路

Weex入门

Native和H5分久必合,Weex会带来移动端的巨变吗?(文末福利)

weex填坑之路-02关于H5开发webpack多页面配置

weex官方demo weex-hackernews代码解读(下)

有没有大佬做过移动跨平台框架的对比,h5 rn weex flutter,性能方面?