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

最新推荐文章于 2023-07-21 17:29:04 发布

weixin_38168918

最新推荐文章于 2023-07-21 17:29:04 发布

阅读量749

点赞数

原文链接：http://www.cnblogs.com/lyre/p/9911210.html

版权

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只能分开写

weex环境中没有DOM，weex在native解析的html得到的是原生布局数
weex没有BOM，但是可以使用移动设备原生 API（即Modules），通过注册、调用模块来实现。

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

事件修饰符 .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

目前，打开的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://www.cnblogs.com/lyre/p/9911210.html

关注