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 如果碰到显示不全,请用图片替代

一些参考的资料

最新文章

  1. 【Java EE 学习 79 上】【mybatis 基本使用方法】
  2. Hadoop 裡的 fsck 指令
  3. select语句for update---转载
  4. linux权限不够,sh不能用
  5. NSArray其中的方法--遍历,
  6. HDU 1285
  7. C++ 顺序容器 vector list deque 之比较
  8. Docker 单主机网络
  9. CF1157C1-Increasing Subsequence (easy version)题解
  10. css3的clip-path方法剪裁实现
  11. G1垃圾收集器的实现原理
  12. hdu 4455 Substrings(计数)
  13. MySQL Sleep进程
  14. 安卓程序代写 网上程序代写[原]Android之Bluetooth编程
  15. Python爬虫之selenium爬虫,模拟浏览器爬取天猫信息
  16. 属性编辑器,即PropertyEditor--&gt;Spring IoC
  17. cocos2dx加载骨骼动画,获取骨骼位置
  18. hbase 安装笔记
  19. BZOJ1040 骑士 【环套树 树形dp】
  20. jmap 查看 map 内存占用

热门文章

  1. 秘制牛肉Alpha阶段项目展示
  2. Python爬虫简单介绍
  3. 七、Python-正则表达式
  4. 树莓派(Raspberry Pi 3)安装centos7后yum无法使用解决办法
  5. 记一次nginx强制将https请求重定向http
  6. Asp.net core中由于页面编码导致的中文乱码
  7. Java就业班 mysql02
  8. 使用百度ocr接口识别验证码
  9. tornado 基于MongoDB存储 session组件开发
  10. dubbo 面试