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开发

1. 首先下载node.js，安装node.js 配置环境变量

安装完成之后，我们可以检测一下是否安装成功

$ node -v

v6.11.3

$ npm -v

3.10.10

通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit。

2. 安装weex

第一步安装weex依赖。直接使用 npm 来安装 weex-toolkit。

$ npm install -g weex-toolkit

$ weex -v //查看当前weex版本

weex update weex-devtool@latest //@后标注版本后，latest表示最新

国内开发者可以考虑使用淘宝的 npm 镜像 —— cnpm 安装 weex-toolkit

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

$ cnpm install -g weex-toolkit

3. 创建一举橡念个weex项目

$ weex create awesome-project //awesome-project是你weex的项目名字，

4. 开发

我们可以再src下，编写我们前端界面的代码。可如态以在weex项目下编写vue代码，下载插件等等....

5. 编译

编译成js文件 npm run build

6. npm run pack:android

这个会打包成一个未签名的apk

7. 签名

jarsigner -verbose -keystore awesome.jks -signedjar meeting.apk app-release-unsigned.apk awesome

红色的是你的weex项正困目的名字，蓝色是你做好的app的名字

生成签名：

---