Weex-进阶笔记一

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 渲染流程

1. 虚拟DOM.
2. 构造树结构. 分析虚拟DOM JSON数据以构造渲染树(RT).
3. 添加样式. 为渲染树的各个节点添加样式.
4. 创建视图. 为渲染树各个节点创建Native视图.
5. 绑定事件. 为Native视图绑定事件.
6. CSS布局. 使用 css-layout 来计算各个视图的布局.
7. 更新视窗(Frame). 采用上一步的计算结果来更新视窗中各个视图的最终布局位置.
8. 最终页面呈现.

在Weex HTML5环境下 CSS 布局 and 更新视窗 由浏览器引擎(例如webkit)实现.

 

 

 

1. 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=" 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 中。