p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px Helvetica; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #454545 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545; min-height: 14.0px }
p.p5 { margin: 8.0px 0.0px 8.0px 0.0px; font: 12.0px Helvetica; color: #454545; min-height: 14.0px }
p.p6 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "PingFang SC Semibold"; color: #454545 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Helvetica; color: #454545 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #454545; min-height: 17.0px }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px "PingFang SC Semibold"; color: #454545 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #e4af09 }
li.li2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545 }
li.li3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; color: #454545 }
span.s1 { font: 12.0px "PingFang SC" }
span.s2 { font: 12.0px Helvetica }
span.s3 { color: #e4af09 }
span.s4 { font: 14.0px "PingFang SC" }
span.s5 { font: 17.0px "PingFang SC" }
span.s6 { color: #454545 }
span.s7 { font: 12.0px Helvetica; color: #454545 }
span.s8 { font: 12.0px "PingFang SC"; color: #e4af09 }
ol.ol1 { list-style-type: decimal }
ul.ul1 { list-style-type: disc }
JS Framework
JS Framework在初始化阶段被原生JavaScript引擎运行. 它提供被每个JS Bundle调用的 define() 和 bootstrap() 函数. 一旦JS Bundle从服务器下载后,这些函数就会执行. define() 函数以注册模块;bootstrap()会编译主要的模块为虚拟DOM,并发送渲染指令给Native .
JS 和 Native 的沟通主要通过两个关键方法进行:
- callNative 是一个由native代码实现的函数, 它被JS代码调用并向native发送指令,例如 rendering, networking, authorizing和其他客户端侧的 toast 等API.
- callJS 是一个由JS实现的函数, 它用于Native向JS发送指令. 目前这些指令由用户交互和Native的回调函数组成.
Weex 渲染流程
- 虚拟DOM.
- 构造树结构. 分析虚拟DOM JSON数据以构造渲染树(RT).
- 添加样式. 为渲染树的各个节点添加样式.
- 创建视图. 为渲染树各个节点创建Native视图.
- 绑定事件. 为Native视图绑定事件.
- CSS布局. 使用 css-layout 来计算各个视图的布局.
- 更新视窗(Frame). 采用上一步的计算结果来更新视窗中各个视图的最终布局位置.
- 最终页面呈现.
在Weex HTML5环境下 CSS 布局 and 更新视窗 由浏览器引擎(例如webkit)实现.
-
WXDevtool依赖
你的app必须链接下面的frameworks/dylibs
- libicucore.dylib
- CFNetwork.framework
- CoreData.framework
- Security.framework
- Foundation.framework
Bootstrap
除了其默认的意义,<script>标签支持在页面的*组件中通过 type 属性定义两种配置。
- type="data": 配置初始化数据,这里定义的数据会覆盖定义在<script>中的数据;
- type="config": 定义配置项。
<script type="data">
/* (可选) 定义初始化数据 */
</script>
<script type="config">
/* (可选) 定义配置项 */
</script>
style
为元素定义行内样式。
<div style="width: 200px; height: 200px; color: #ff0000;"></div>
<div style="padding: {{x}}; margin: 0"></div>
class
为元素定义一个或多个类名(引用样式表中的类)。
<div class="button"></div>
<div class="button {{btnStatus}}"></div>
Appear 事件
如果一个位于某个可滚动区域内的组件被绑定了 appear 事件,那么当这个组件的状态变为在屏幕上可见时,该事件将被触发。
事件对象
- type : appear
- target : 触发 Appear 事件的组件对象
- timestamp : 事件被触发时的时间戳
- direction : 触发事件时屏幕的滚动方向,up 或 down
Disappear 事件
如果一个位于某个可滚动区域内的组件被绑定了 disappear 事件,那么当这个组件被滑出屏幕变为不可见状态时,该事件将被触发。
事件对象
- type : disappear
- target : 触发 Disappear 事件的组件对象
- timestamp : 事件被触发时的时间戳
- direction : 触发事件时屏幕的滚动方向,up 或 down
Page 事件
注意:仅支持 iOS 和 Android,H5 暂不支持。
Weex 通过 viewappear 和 viewdisappear 事件提供了简单的页面状态管理能力。
viewappear 事件会在页面就要显示或配置的任何页面动画被执行前触发,例如,当调用 navigator 模块的 push 方法时,该事件将会在打开新页面时被触发。viewdisappear 事件会在页面就要关闭时被触发。
与组件的 appear 和 disappear 事件不同的是,viewappear 和 viewdisappear 事件关注的是整个页面的状态,所以它们必须绑定到页面的根元素上。
特殊情况下,这两个事件也能被绑定到非根元素的body组件上,例如wxc-navpage组件。
事件对象
- type : viewappear 或 viewdisappear
- target : 触发事件的组件对象
- timestamp : 事件被触发时的时间戳
<content>
<content> 在编写组件模板时作为作为内容节点元素存在,使用时将被真正的元素替换。
替代写法: <slot>。
<div> 组件是用于包装其它组件的最基本容器。支持所有的通用样式、特性、flexbox 布局。其类似于 HTML 的 <div> 容器,但不能直接在里面添加文本(字符串),如果要展示文本,应该使用 <text> 组件。历史版本中,<div> 别名是 <container>,目前已经弃用。
事件
<div> 支持所有通用事件:
- click
- longpress
- appear
- disappear
查看 通用事件
子组件
支持任意类型的 Weex 组件作为其子组件。 其中,还支持以下两个特殊组件作为子组件:
- <refresh>
用于给列表添加下拉刷新的功能。
使用文档请查看 <refresh> - <loading>
<loading> 用法与特性和 <refresh> 类似,用于给列表添加上拉加载更多的功能。
使用文档请查看 <loading>
扩展
scrollToElement(node, options)
滚动到列表某个指定项是常见需求,<list> 拓展了该功能支持滚动到指定 <cell>。通过 dom module 访问,更多信息可参考 dom module 。
ViewModel APIs
- this.$vm(el)
- this.$el(el)
- this.$getConfig()
- this.$emit(type, data)
- this.$dispatch(type, data)
- this.$broadcast(type, data)
ViewModel Options
- data
- methods
- computed
- init, created, ready
- events
示例:
module.exports = {
data: function () {
return {
x: 1,
y: 2
}
}
methods: {
foo: function () {
console.log('foo')
}
},
computed: {
z: function () {
return this.x + this.y
}
},
events: {
custom: function (e) {
console.log(e)
}
},
init: function () {},
created: function () {},
ready: function () {}
}
在我们开发组件是,一个最佳实践是不要在根元素中添加数据绑定,因为当其他组件引用这个组件时,可能会定义相同命名的数据,造成串扰。这就是我们为什么我们会把 dialog 包裹在一个没有任何特性的 div 中。