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

Posted 2021-01-17 lyre

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
• 生命周期不支持activated和deactivated
• 使用组件，直接绑定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。

• 没有 window 、screen 、history 、location 、navigator 等变量。

• 关于蒙层， 安卓点透问题解决办法：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 如果碰到显示不全，请用图片替代

一些参考的资料

• 中文文档 https://weex-project.io/cn/

• 官方文档 http://weex.apache.org/references/

• 阿里的weex-ui组件 https://github.com/alibaba/weex-ui/blob/master/README_cn.md

• Weex调试神器——Weex Devtools使用手册 https://github.com/weexteam/article/issues/50

• https://juejin.im/tag/Weex

• https://segmentfault.com/t/weex

• https://stackoverflow.com/questions/tagged/weex

• http://fe.51.nb/blog/2

• https://segmentfault.com/a/1190000011027225

  ?