2016年底了解到weex，看到它的诸多优点，但因为工作中和它没什么交集也就没着手去学习。后续换工作有用到weex，开始入坑。在这记录下weex的学习之路。
首先weex上手还是挺快的，学习成本相对较低。在入坑前对于前端的了解也仅限于熟悉H5标签和一些css的基本写法，一周左右时间就磕磕碰碰的进行开发调试了。
weex从出生一直就拿来和ReactNative比较，这点不用太刻意的对比优缺点，毕竟有不同的应用场景，但是了解下还是非常有必要的。在介绍之前也先看一下两者的区别
| 类型 | React Native | Weex |
|---|---|---|
| 性能 | 较好 | 较弱 |
| 上手难度 | 稍高 | 容易 |
| 核心理念 | React | Vue |
| 框架程度 | 较重 | 轻便 |
| 特点 | 适合开发整体App | 适合单页面 |
| 社区 | 丰富，Facebook维护 | 较少，目前托管apache |
| 支持 | Android、iOS | Android、iOS、Web |
| 适应性 | 原生开发学习成本低 | Web开发学习成本低 |
| JS引擎 | JSCore | V8 |
JS引擎：
weex使用V8， ReactNative使用JSCore
JS开发框架：weex(1.75W+ star)基于vue.js(14W+ star)。小巧轻量的前端开发框架，组件化，数据绑定，2.0引入virtual dom。ReactNative(7.95W+ star)使用React(13W+ star)。革命性的前端开发框架，组件化，数据绑定，virtual dom。(数据来源github)
学习成本
1.环境配置
ReactNative需要按照文档安装配置较多的依赖工具。 weex安装cli之后就可以使用
2.vue vs react
react模板JSX学习使用有一定的成本 vue更接近常用的web开发方式，模板就是普通的html，数据绑定使用mustache风格，样式直接使用css
3.布局
两者实现了flexbox的相同子集（都使用了FaceBook的代码解析），基本没有区别
易用性
1.sdk的使用
ReactNative需要解决mvn依赖的问题，因此必须自己修改源码，打包发布
weex可以直接在mvn项目中使用
2.调试
都可以在chrome中调试JS代码
weex支持在chrome中预览页面dom节点，ReactNative不支持
3.页面开发
weex提供了一个playground，可以方便的预览正在开发的页面
ReactNative开发一个页面，需要建立一个native工程，然后编译运行
4.及时预览
weex和ReactNative都有提供hot reload功能，可以边更改代码，边在手机上看到效果
5.打包
ReactNative官方只能将ReactNative基础js库和业务js一起打成一个js bundle，没有提供分包的功能，需要制作分包打包工具
weex默认打的js bundle只包含业务js代码，体积小很多，基础js库包含在weex sdk中
6.扩展性
组件的扩展上，weex和ReactNative具有一样的能力
三方库的接入上，weex对网络，图片，统计等常见的用户可能想自己定制的功能，提供了相应的适配接口，可以由用户方便的定制，ReactNative定制较麻烦
7.集团库的接入
weex有默认的mtop接入实现，UT接入实现
windvane也提供了对weex页面的支持，可以复用app中的web容器
8.跨平台
ReactNative支持Android iOS两个平台，需要自己扩展去支持web，windows和node-webkit的支持正在开发中
weex可以支持Android iOS web三个平台
9.Moudle方法调用线程
weex 可以通过注解标注是否在UI线程执行
ReactNative在native——modules线程执行
10.异步
weex只支持callback
Reactive在native——modules线程执行
性能
1.分包加载
ReactNative需要自己实现，从而优化JS加载执行时间
weex默认提供分包实现
2.大块view渲染
ReactNative默认没有优化机制，长view渲染性能会比较差
weex提供了node和tree两种渲染模式，优化长view的渲染
3.ListView Android
ReactNative目前采用scrollView使用，有一些性能问题
weex使用recyclerview实现，性能稍好
社区
ReactNative 7.95w+ star，issue，pull request， contributor多，社区活跃，围绕react产生了许多开发框架
weex开源较晚，目前只有1.75k+ start，contributor以阿里人为主，较少，issue和pull request也比较少，社区目前规模比较小
回归正题，weex学习的路：什么是weex、搭建环境、怎么使用（这个里边还是有点东西的）、调试。
一、什么是weex
Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了 WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用。
Weex 渲染引擎与 DSL 语法层是分开的，Weex 并不强依赖任何特定的前端框架。目前 Vue.js 和 Rax 这两个前端框架被广泛应用于 Weex 页面开发，同时 Weex 也对这两个前端框架提供了最完善的支持。Weex 的另一个主要目标是跟进流行的 Web 开发技术并将其和原生开发的技术结合，实现开发效率和运行性能的高度统一。在开发阶段，一个 Weex 页面就像开发普通网页一样；在运行时，Weex 页面又充分利用了各种操作系统的原生组件和能力。
概述
weex新手必备的开发工具：WeexPalyground、Weex online playground和weexUI，可以在上面学习、借鉴下类似需求的实现。
在这里拿个官网上的例子介绍下Weex是如何工作的
如何工作
在 <template> 部分，包含了 <div> 元素，这个被广泛应用于 Web 页面中，在 Weex 里它也是一个通用的容器。<text> 元素就和普通的 HTML 不太一样了，它提供了显示文本的能力，在 Weex 上，所有文本必须放在 <text> 标签中。
在 <style> 部分，你可以定义各种 CSS 样式。需要注意的是，这些样式在 Weex 里只能作用于当前组件，scoped.
原生组件
在上面的例子中，<div> 和 <text> 在移动端上渲染出来的都是原生组件，充分利用了操作系统组件的能力与渲染速度。
image
Weex 提供了一套基础的内置组件。你可以对这些基础组件进行封装、组合形成自己的组件；也可以创建自己的全新组件来包装操作系统提供的地图、视频等功能。可以访问 扩展 iOS 能力 和 扩展 Android 能力来了解如何去实现自定义组件。
在框架内部，Weex 使用原生组件来渲染，并尽可能保持多平台一致性。但在不同平台上，或多或少会有一些渲染、行为上的差异。比如对于 <switch> 组件，在不同平台上的视觉效果是不一致的。
image
原生模块
对于那些不依赖于 UI 组件的功能，Weex 将它们包装成多个 模块，比如 动画模块。在前端代码中，使用 weex.requireModule('xxx') 引入一个模块，之后就可以调用它提供的各种方法。Weex 模块包装了网络、存储、剪切板、导航等各种功能供前端调用。比如你可以使用 stream 模块来获取 Vue.js 的 Star 数量。
Weex 已经提供了不少内置模块，同时也支持将 App 特有的功能包装成自定义模块提供给前端调用。如果想了解怎么做，可以去官网查看文档。
工作原理
Weex主要包括三大部分：JS Bridge、Render、Dom，分别对应WXBridgeManager、WXRenderManager、WXDomManager 。通过WXSDKManager统一管理。其中JS Bridge和Dom运行在独立的HandlerThread中，而Render运行在UI线程。JS Bridge主要用来和 JS 端实现进行双向通信，比如把js端的dom结构传递给Dom线程。Dom主要是用于负责dom的解析、映射、添加等等的操作，最后通知UI线程更新。而Render负责在UI线程中对dom实现渲染。
如下图，是生成dom，dom的解析，映射，添加，渲染的流程。
weex工作原理
如上可知，因为JS端运行于独立的单线程中，所以为了保证运行的流畅性，一般需要避免在JS端执行耗时操作，比如：网络请求，图片加载等，其实都是在原生端完成，js端执行的是发起一个请求和响应一个结果。同时因为原生端与JS端是通过JS Bridge通讯，所以也需要尽量避免大数据和频繁的通讯，导致响应的延迟。
原生端的dom的加载解析映射，也是性能的一大瓶颈。一般而言，Weex在Web端生成的，是通过webpack的webConfig打包成单页面的index.web.js文件；而在原生端，一般会通过webpack的weexEntry配置成多页面形式：即每一个需要独立的.vue的页面，最终会被打包成一个.js文件。所以打开每个页面时加载对应的js文件，这很好的减小了需要加载的文件大小，提高了dom的解析效率。最后，Weex默认打的js只包含业务js代码，基础js库已经被包含在weex sdk中，也使得体积会小很多。
入门
使用 Weex Online Editor 对 Weex 尝鲜是一个不错的选择，但如果你想更专业的开发 Weex，本节会教你如何搭建本地开发环境进行 Weex 开发。
安装依赖
Weex 官方提供 weex-toolkit 的脚手架工具来辅助开发和调试。
首先，你需要 Node.js 和 Weex CLi。
安装 Node.js 方式多种多样，最简单的方式是在 Node.js 官网 下载可执行程序直接安装即可。
更多安装方式可参考 Node.js 官方信息
::: Tip
通常，安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit, 也可以通过 yarn 来进行安装。
国内的开发者推荐将npm镜像切换至 Taobao NPM 镜像
nrm ls #查看所有设置的源 nrm use showjoy #使用淘宝源
运行下面的命令安装最新的beta版本工具：
weex -v // 查看当前weex工具版本
安装结束后你可以直接使用 weex help 命令验证是否安装成功，它会显示 weex 支持的所有指令，同时，你也可以通过 weex doctor 命令检查你的本地开发环境。
引用文章：
网友评论