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的项目架构，对于Weex开发需要理解很多概念并且需要强大的内心，因为还没有比较成熟，所以坑比较多。但是公司团队需要开发，所以在此记录一些东西。

首先，我们得理解四种环境：

这几种环境当然可以根据字面意思来理解，所以，我们在搭建所谓三端一致的环境的时候，我们需要区分这四种环境。

然后，利用Weex中搭建的脚手架框架weexpack构建的项目，大致的架构如下:

此架子大概帮我们已经搭建好了一个基本的开发思路，但是，我们可以看出webpack的架子并没有搭建比较完全，weexpack只是帮我们简单的实现了打包与web端渲染。所以，我们需要自己根据的需求，让其变得更加饱满一点。

另外，关于weexpack 的调试问题困惑了作者很久，经查询记录于此:

1.在浏览器地址栏输入： chrome://inspect/#devices

2.点击如下：

3.在webpack的配置文件中加一个debugger

4.在你的package.json中添加一个新的script, run 即可。比如：

另外，weex 写UI是不兼容Web大多数标签，需要使用它自己封装的标签，而且与vue不同的是，他打包的文件是通过每个页面动态的打包，所以跳转不是vue-router简单的跳转，而是通过其封装的navigator进行页面之间的跳转的。

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

注意: 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中的.

---