weex开发笔记

[jerryni]

weex工作原理

http://weex.apache.org/cn/wiki/

• vue文件生成jsbundle
• 在native端，通过weexSDK提供的js引擎解析jsbundle
  ，并发送命令到native端进行渲染，存储，通信，交互等功能；
• 在h5端，就直接用浏览器内的js引擎即可，源码还是同一份；

引擎相关

• ios用JavascriptCore内核，Android用UC的V8内核
• 把vuejs做了预设，可以不用打包到js bundle里，减小了体积

怎么写weex样式

官方支持的通用样式文档
http://weex.apache.org/cn/wiki/common-styles.html

• 尺寸兼容式写法：以750为虚拟宽度即可，用px为单位，style标签内加上scoped，weex会自动转化；比如750宽度的设计稿，左侧栏为100px，那么该元素直接写100px即可。
• css不能写子选择器。。。
• 盒模型默认border-box：包含内边距、边框
• weex里的div默认都是FlexBox，flex-direction标识方向，默认是column，justify-content设置水平对齐方式，align-items设置垂直对齐方式；子元素通过flex：{number}来设置自己的自适应比重
• 不支持z-index，靠后的元素层级高
• 在android里的绝对定位元素如果超出容器，那么就会hidden，overflow默认值为hidden并且不支持visible；并且有一些条件系统条件，详情看文档。
• 可以用transform（2d），transition
• 可用background-image设置渐变，且比background-color优先级高，不支持background简写;background-color支持透明rgba, 默认transparent
• 支持阴影（仅ios）：box-shadow
• 文字要用<text> 标签包裹，否则无法显示
• 伪类：所有组件都支持 active, 但只有 input 组件和 textarea 组件支持 focus, enabled, disabled。
• 尽量把通栏的模块放到cell里，cell的模块在屏外会收回，提高性能
• scroller应用小的滚动区域，如果大的区域滚动用list,因为这个组件在屏外不会回收组件，导致性能下降

参考文献

https://zhuanlan.zhihu.com/p/28644960
http://weex.apache.org/cn/wiki/