Weex开发初探

1、DSL ： weex文件；

2、Virtual DOM （提升性能） :

简单的说就是：

3、Android RenderEngine 将输入Virtual DOM 转换成输出的android原声控件；

1.Weex和H5对比

2.Weex和RN对比

3.Weex优势

4.Weex劣势

1.使用本地图片

<image class = "setBtn" src= 'xcassets:my_setting'/>

2.list中cell的margin无效

将cell的最外层嵌套一哪蚂虚个div，对div进行margin *** 作

3.Weex和Native的交互

将WXCustomEventModule注册为callNative

实现并注册方法pushNativeVC::

4.元素的显示隐藏

因为weex没有兼容v-show和display:none的属性,所以要实现元素的显示隐藏要使用v-if,其值为bool值

5.类选择器

和vue语法不同，其格式为:class="[loginState?'TopLoginItem':'TopItem']"

6.视图的李燃生命周期 willAppear，willDisAppear

如果考虑三端，可以尝试Weex开发

如果已经有大量实践Vue，也可以尝试Weex开发

对渲染UI的流畅度物戚有较高的期望又想能支持热更新，也可以尝试Weex开发

weex使用navigator进行页面跳转，这种方式是使用的url传参，刚开始使用的时候一直都是用下面这种方法传值：

navigator.push({

url: config.getWeexIp() + '/app/main.js?account=123456&name=jelly'

})

url中？后面便是携带的参数，ccount=123456&name=jelly就是代表两个参数，一个account，一个name。

在跳转后的页面通过获取url地址，便可以得到这两个值。但和android不同的是，在ios系统中，是不支持中文的，也就是说如果url是'/app/main.js？account=123456&name=杰尼'，便会获取不到name数据，所以在最开始拼接url时需要encodeURIComponent方法转码，在拿到数据后在使用decodeURIComponent方法解码拿到正确的数据。

上面这种方法在需要传递的数据较少时很方便，但是实际开发中，数据往往都是一个json对象，需要传递的参数也很多，这样一来，url的拼接往往会变得很繁琐，因为需要将json对象中的数据单独一个一个提取出来传递.例：

假如有一个json对象格式如下：

data:{

account : 123456,

name : 杰尼,

}

url就会变成：

'/app/main.js?account='+data.account+'&name='+ encodeURIComponent(data.name)

获取到url地址后需要执行下面两条语句拿到数据：

account=url.account

name=decodeURIComponent(url.name) //解码

这只是两条数据，如果数据有十条以上，代码会变得很冗余，出错概率也会变大。

在写项目《XXXX》时开始思考能不能和原生Android一样，将一整个对象打包纤誉传递。之后，我找到了两个函数方法：

JSON.stringify() //将对象转换为json字符串

JSON.parse() //将json字符串转换为对象

虽然url不支持拼接毁哗段对象，但是支持字符串啊，所以我可以把url写成：

'/app/main.js?data='+JSON.stringify(data)

获取数据时：

data=JSON.parse(url.data)

传递数据时，把对象转成json字符串传过去，在第二个页面获取到json字符串后，再转成对象，这样就完成了对象的传递。

需要使用account数据时，可以直接充data对象中拿：data.account

这种方法，代码量很少，同时也可以减少出错的概率，因为去除了抽取对象数据进行传递的步骤,避免出现参数名编写错误等bug。

但是仅仅这样也还不行，因为对象转成的json字符串中也是有可能出现中文的，比如data.name这个数据。所以同样需要做转码芦岩解码处理，最终的url：

'/app/main.js?data='+encodeURIComponent(JSON.stringify(data))

获取对象数据：

data= decodeURIComponent(JSON.parse(url.data))

整个传参过程就这两行核心代码。

这是一个提供了常见的列表功能的核心组件，通过平滑滚动和内存回收提供了更好的用户体验和性能

注意: list的子组件只能包括 cell, header, refresh, loading 或者是 fix定位的组件. 其他形式的组件将不能被正确的渲染

loadmoreoffset: <number>触发loadmore事件所需要的滚动条距离list底部的垂直偏移距离.当list的滚动条滚动到足够接近list底部时将会触发load more这个事件

公共样式

loadmore: 如碧核果列表滚动到底部将会立即触悔乎掘发这个事件，你可以在这个事件的处理函数中加载下一页的列表项.

公共事件

支持click 事件

支持 appear / disappear 事件

scrollToElement(node, options)

让页面顷肢滚动到那个对应的节点，这个API只能在scroller和list组件中用。

要在你的.we文件中使用这个API，可以使用require('@weex-module/dom').scrollToElement。

不允许相同方向的list或者scroller互相嵌套.换句话说就是嵌套的lists/scroller必须是不同的方向

举个例子，不允许一个垂直方向的list嵌套的一个垂直方向的scroller中，但是一个垂直方向的list是可以嵌套的一个水平方向的list或者scroller中的.

---