本篇将节操满满的安利Weex(˶‾᷄ ⁻̫ ‾᷅˵)，不一样的角度推荐你入坑，官网有的我们不拖泥，这里将给你补充官方没有的，深入到蹲坑给你排忧解难，总会给你点惊喜，内容越后越干，请紧张的往下看。
***** 本文配套，超完整 Weex 项目推荐 ： GSYGithubAppWeex *****
一、简介
有对比才有伤害，说到Weex，难免让人联系React Native。虽同为跨平台移动端解决方案，拥JavaScript妄一统天下，单两者的设计理念其实截然不同。
这里先介绍下两者的差异，给徘徊在 React Native 和 Weex 之间的人，理解更适合哪些场景。
| 类型 | React Native | Weex |
|---|---|---|
| 性能 | 较好 | 较弱 |
| 上手难度 | 稍高 | 容易 |
| 核心理念 | React | Vue |
| 框架程度 | 较重 | 较轻 |
| 特点 | 适合开发整体App | 适合单页面 |
| 社区 | 丰富，Facebook维护 | 略残念，目前托管apache |
| 支持 | Android、IOS | Android、IOS、Web |
| 适应性 | 原生开学习成本低 | Web开发学习成本低 |
| JS引擎 | JSCore | V8 |
作为两个框架的深度体验者，个人总结出上面的对比，其中可以看出：
-
React Native更适合开发完整的App，因为它的性能较好，第三方插件丰富，社群活跃并且维护较好，文档完整等（本篇主角是Weex好吧魂淡(#ﾟДﾟ)）。
-
Weex更适合开发单页面集成，这也是阿里的业务特性。 当然Weex也可以开发完整的多页面App，同时我也是这么用过，不过效果对比React Native，显然强差人意。
-
Weex胜在容易上手，基于Vue的设计模式，类MVVM的实现，也让前端能更无缝的实现一些高性能的App业务。
-
Weex兼容Android、IOS、Web三端，在单页面的实现上，它有着React Native无法睥睨的先天优势。
-
Weex的社群，个人觉得还是弱，资料不足，文档简单，第三方支持太弱。和React Native一样支持带原生功能的插件开发，但是，支持太少了，这也提高了后期的开发门槛。同时，一个小问题很容易让入初学者，三过门而不入，作为一个发布了两年的框架，还是比较让人吐槽的。
二、原理
这里简要说明下Weex在android下的分层以及原理。
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的解析，映射，添加，渲染的流程。
如上可知，因为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中，也使得体积会小很多。
三、入门
1、配置环境
程序员就要从配置环开始，Weex 环境搭建 ，点击链接，只要你要一个稳定的网络，参考官网搭建环境，也就一杯茶的功夫，take it easy。配置好之后，weex create testProject创建一个项目High起来吧。
2、快速入门
weex的入门还是比较简单的，JavaScript、Vue了解下，即可预约的hello world。
原生开发也许对vue接触不多，跨界有时候很容易望而却步，其实Vue本身，就是容易上手的框架，类似MVVM的模式（类似Android的DataBinding），很容让人理解上手，简单的说，你只关心数据，然后绑定到显示的控件，就是这么简单。
一般通过 Vue官网 教程，30分快速撸一发，之后你就直接入门Weex了，对，Weex做的最彻底的就是，你直接使用 vue 写一个Web页面，之后再顺手编译成了 ios 和 android 的原生页面（尽管有些时候你需要在平台适配上花费心思）。
如上图（请忽略那个this(￣.￣)），这就是一个极度简化的，用Vue写的Weex页面。效果是从显示Hello World ，一秒变I’m CarGuo，就是这么自信。
在中排布需要渲染的控件，在
复制代码
五、蹲坑
其实就是问题集锦，记录一些开发过程中遇到的问题，相信你会喜欢：
-
1、关于vue的
-
2、es6一些语法问题，如async和await，可以用"babel-plugin-transform-runtime"，在.babelrc中设置。
{
"presets": [
"es2015",
"stage-0"
],
"plugins": [ [
"transform-runtime",
{
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}
]]
}
复制代码-
3、export default 和require混合使用的时候，会多一个default对象，比如this.$store.default.state这样才对的问题。
-
4、自定义的js文件类中，不能使用全局的
weex.requireModule。 -
5、使用weex-ui的tabbar结合是，
-
6、全屏默认height 1334 和 width 750，但是记得减去32大概高度的statusbar。
-
7、list的loadmore，必须给list设置高度样式，才能在web中正常触发。
-
8、text的
结束标签换行，在debug下可能会出现样式问题。 -
9、生命周期在web中与android等不同，比如activated等。
-
10、()=> {}对于this可能获取存在的不同，尽量用function(){}。
-
11、多页即创建多个类似entry.js的入口文件，在webpack下配置weex的打开生成的js文件，用于navigator跳转，通过url传值。
-
12、android多页面打开失败
android.os.FileUriExposedException问题：
在你的Application中添加：
if (Build.VERSION.SDK_INT>=18) {
StrictMode.VmPolicy.Builder builder = new StrictMode.VmPolicy.Builder();
StrictMode.setVmPolicy(builder.build());
builder.detectFileUriExposure();
}
复制代码ActivityNotFoundException问题：
".xxxxxx"
android:label="@string/app_name"
android:screenOrientation="portrait"
android:theme="@style/AppTheme.NoActionBar">
"com.taobao.android.intent.action.WEEX"/>
"android.intent.category.DEFAULT"/>
"com.taobao.android.intent.category.WEEX"/>
"android.intent.action.VIEW"/>
"http"/>
"https"/>
"file"/>
"wxpage" />
复制代码-
13、多页面生成js时，import的时候，需要指定.vue后缀的。
-
14、如果是webstorm，记得对.temp dist node_modules platforms几个文件夹，右键设置excluded，避免一直indexing和硬盘资源消耗。
-
15、@viewappear="onappear" @viewdisappear ="ondisappear" 类似onPause和onResume
-
16、ios实时看log，可以先增加
-(void)redirectConsoleLog{
#ifdef DEBUG
NSString *documentDir = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0];
NSLog(@"documentPath : %@",documentDir);
//重定向NSLog
NSString* logPath = [documentDir stringByAppendingPathComponent:@"console.log"];
freopen([logPath fileSystemRepresentation], "a+", stderr);
#endif
}
复制代码//调用
[self redirectConsoleLog];
复制代码然后在Devices下，找到对应的模拟器号码，在再Application下，搜索console.log，跟踪执行
tail -f
/Users/your name/Library/Developer/CoreSimulator/Devices/FDEACA11-D84E-4E8F-A6B8-26239559A928/data/Containers/Data/Application/9394D6CC-6B4A-4200-A13D-0CBE6F2BB67A/Documents/console.log
复制代码最后
1、文章配套，超完整 Weex 项目了解下：github.com/CarGuo/GSYG…
2、react native相关文章
从Android到React Native开发（一、入门）
从Android到React Native开发（二、通信与模块实现）
从Android到React Native开发（三、自定义原生控件支持）
从Android到React Native开发（四、打包流程和发布为Maven库）