基于 Vue 技术栈的你如果需要选用一种移动端跨平台框架，是 Weex？React-Native？还是Flutter? 无疑，相对于后两者，因为你现在已有比较熟练的 Vue 基础，如果在其他条件一致的情况，Weex 无疑是最佳选择；但是 Weex 真的适合在实际项目中进行移动端跨平台开发吗？Weex 的开发效率、Weex 的质量是否满足需求？
一、开发环境
在这个 Weex app 开发中，我的开发环境相关配置如下：
工具名称
版本号
Node.js
8.2.1
Npm
5.3.0
Android Studio
3.2
Weex
2.0.0-beta.17
JDK
1.8
Weex-ui
0.6.14
二、Weex 介绍
2.1、Weex 理念
“Write once, run everywhere”, Weex 的定义就像是：写个 vue 前端，顺便帮你编译成性能还不错的 apk 和 ipa（当然，现实有时很骨感）。基于 Vue 设计模式，支持 web、android、ios 三端，原生端同样通过中间层转化，将控件和操作转化为原生逻辑来提高用户体验。 在 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 实现渲染。
Weex 所有的标签也不是真实控件，JS 代码中所生成存的 dom，最后都是由 Native 端解析，再得到对应的 Native控件渲染，如 Android 中标签对应 WXTextView 控件。 Weex 中文件默认为 .vue ，而 vue 文件是被无法直接运行的，所以 vue 会被编译成 .js 格式的文件，Weex SDK会负责加载渲染这个 js 文件。Weex 可以做到跨三端的原理在于：在开发过程中，代码模式、编译过程、模板组件、数据绑定、生命周期等上层语法是一致的。不同的是在 JS Framework 层的最后，web 平台和 Native 平台，对 Virtual DOM 执行的解析方法是有区别的。
2.2 创建 Weex 项目
Weex 提供了一个命令行工具 weex-toolkit 来帮助开发者使用 Weex，它可以用来快速创建一个空项目、初始化 iOS 和 Android 开发环境、调试、安装插件等操作。
我们可以通过以下步骤创建一个基础的 Weex 项目：
（1）安装 weex-toolkit 工具
npm install weex-toolkit -g
（2）创建新项目
weex create weex_project
（3）安装项目依赖
cd weex_project npm install
（4）启动项目
npm start
项目启动完毕，浏览器窗口会自动打开项目首页，如下图所示：
（5）添加 原生Android 平台
weex platform add android
（6）运行下面的命令，可以在模拟器或真实设备上启动 Android 应用：
weex run android
2.3、运行Weex项目
2.3.1、启动服务端应用
（1）进入目录 weex_project/backend/，安装服务端应用所需要的插件包：
$ npm install
（2）启动服务端应用
$ npm run start
2.3.2、启动 Weex 应用
（1）如果你还没安装 weex 工具，可以运行以下命令进行安装：
$ npm install -g weex-toolkit
（2）安装项目需要的插件包：
$ npm install
（3）启动项目：
$ npm run start
三、Weex 常用的 VSCode 插件
Weex为VSCode提供了一些常用的插件，可以提高开发效率：
weex-new-project - 用于在 VSCode 中创建Weex项目；
weex-lang - 用于在 VSCode 中对最新的 Weex 语法进行支持；
weex-doctor - 用于检查 iOS 和 Android 本地开发环境；
weex-debugger - 用于在 VSCode 中启动Weex调试工具；
weex-run - 用于在热更新模式下启动 Android 及 iOS 工程；
3.1、weex-run
可以使用截图的步骤来安装 weex-run插件，可以自行搜索如何安装VSCode插件。
（2）启动 Android 项目
启动成功控制台会输出一堆日志，如下图。
Weex自带热更新功能，接下来，我们查看 Android 项目的热更新。
3.2、weex-debugger