Weex学习指南

近年来，伴随着大前端概念的提出和兴起，移动端和前端的边界变得越来越模糊，涌现了一大批移动跨平台开发框架和模式。从早期的PhoneGap、inoc等Hybird技术，到现在耳熟能详的React Native、Weex和Flutter等技术，无不体现着移动端开发的前端化。而阿里巴巴在2016年6月开源的Weex移动跨平台框架，语法上使用Vue.js编写，更加贴近Web前端开发，在性能和快速迭代方面，相比其他框架也有一定的优势。

Weex简介

Weex是由阿里巴巴研发的一套移动跨平台技术框架，研发的初衷是为了解决移动开发过程中频繁发版和多端研发的问题。使用Weex提供的跨平台技术，开发者可以很方便的使用Web技术来构建高性能、可扩展的Native级别的性能体验，并支持在Android、iOS、YunOS和Web等多平台上进行部署。具体的说，当在项目中集成WeexSDK之后，就可以使用JavaScript和现代流行的前端框架来开发移动应用。 同时，Weex框架的结构是解耦的，渲染引擎与语法层是分开的，也不依赖任何特定的前端框架，目前主要支持Vue.js和Rax两个前端框架。这样一来，甚至可以使用其他前端框架来驱动Weex，打造三端一致的native应用。

作为一套前端跨平台技术框架，Weex建立了一套源码转换以及Native与Js通信的机制。Weex表面上是一个客户端框架，但实际上它串联起了从本地开发、云端部署到分发的整个链路。 具体来说，在开发阶段编写一个.we文件，然后使用Weex提供的weex-toolkit转换工具将.we文件转换为JS bundle，并将生成的JS bundle上传部署到云端，最后通过网络请求或预下发的方式加载至用户的移动应用客户端。当集成了Weex SDK的客户端接收到JS bundle文件后，调用本地的JavaScript引擎执行环境执行相应的JS bundle，并将执行过程中产生的各种命令发送到native端进行界面渲染、数据存储、网络通信以及用户交互响应。Weex的整个工作流程图如下图所示。

类似的解决方案还有React Native，对就是它，大名鼎鼎的Facebook推出来的，提到Weex不得不提到的对手。根据原理图我们来看下，学习weex需要学习哪些知识？

前端知识

上图中最上面是我们的DSL，我们一般叫Weex文件（Weex2.0之后改为Vue），通过transformer这层转化成js文件，部署到Server或者应用内。 学习Weex需要开发者掌握Html、Css和Js基础，以及相关的概念、基本语法、基础页面绘制等前端知识。

JS知识

Weex开发需要开发者掌握的前端知识有：

JavaScript文档 文档：developer.mozilla.org/zh-CN/docs/… JavaScript文档比较全面。

ES6是JavaScript语言的最新标准。 文档：es6.ruanyifeng.com/ 阮一峰的专门介绍ES6语言新特性的电子书。

文档：liubin.org/promises-bo… Promise是把异步处理对象和处理规则进行规范化，几乎已经在JavaScript的异步开发中成为标配。

关于前端更详细的学习路线可以参考我之前的博客：前端学习路线

Node

在学习vue之前，需要先了解node.js 和 npm 的概念。已经对此了解的同学可以直接略过。 Node.js是一个开放源代码、跨平台的、可用于服务器端和网络应用的运行环境。Node.js使用Google V8 JavaScript 引擎。 npm用的比较多，就是一个依赖包管理系统。就像Android里的Gradle一样。说到npm就要提到 package.json 文件，在vue项目、weex项目中都会有这样一个文件，是一个json配置数组。具体的配置规则可以见 npm-package.json。

Vue

Vue.js作为当前流行的三大前端框架之一，是一套构建用户界面的渐进式框架，与其它大型的前端框架不同，Vue被设计为可以自底向上逐层应用。同时，Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

随着Weex 0.10.0版本的发布，Weex正式添加了对vue.js语言的支持，从此开发者便可以使用vue.js来开发Weex应用程序。

使用 vue-cli （又名脚手架）创建一个模板Vue项目,使用WebStorm进行代码编辑，并dev模式跑起来。方便一边看文档，一边手动写代码。 通过脚手架创建好项目，首先了解webpack模板创建出来的项目结构是怎样的、入口在哪、配置文件在哪、该在哪写业务代码、怎么运行等等。这个百度一下，有很多解释。 webpack模板项目中使用了 vue-router （路由），说到 vue-router 就得说单页面应用（即SPA）。在vue项目中，现在更加流行单页面应用，并搭配路由使用。用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js 时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。 在Vue中，多组件的开发给我们带来了很多的方便，但同时当项目规模变大的时候，多个组件间的数据通信和状态管理就显得难以维护，而Vuex就此应运而生。

需要注意的是，vue是一个完整且庞大的框架，千万别想着等vue学完我再去学weex，所有的知识都是先了解、使用过程中深入的过程。

相关文档地址： Vue官方文档 ：cn.vuejs.org/ Github：github.com/vuejs/vue vue-router文档：router.vuejs.org/zh-cn/ Github：github.com/vuejs/vue-r… Vuex 文档：vuex.vuejs.org/zh-cn/ Github：github.com/vuejs/vuex/

Weex

终于到了Weex的学习，如果有前端基础的可以直接跳过前面基础知识学习了解。照例，先看Weex官方文档（weex.apache.org/cn/），并且配合官方… 下面说一下对于一个新手来说，如何学习Weex呢？ 1、官方文档浏览一遍，有个大致了解，文档不多也比较简单。

2、按照官方文档快速上手，搭建开发环境，使用官方推荐的脚手架 weex-toolkit 创建一个项目，然后运行第一个Weex项目hello weex。

3、安装Playground示例apk，然后在手机上看到各种demo的效果。然后用Playground扫描我们运行的hello weex，即可在Android手机上看到效果了。到Github上，把官方的 Playground 代码下下来。在本地部署好Weex代码和Android代码，并跑起来，Ios同理。

4、调试Weex页面，weex-toolkit支持调试工具，weex devtools，启动一个调试服务器，学习在web端调试App端的js代码。

5、自己的Sample项目跑起来后，使用官方的 Playground 项目扫码可以运行。然后集成Weex到已有应用或者一个新创建App项目，使用App端访问Js页面。

6、最后基于weex-toolkit 生成的 weex-sample 项目把 weex文档-手册 中的所有内建组件和内建模块的例子代码敲一遍（也可以直接贴上去看效果）了解官方的组件有哪些功能。   学习网站： Weex学院：www.weexdaxue.com/ 饿了么前端专栏：zhuanlan.zhihu.com/ElemeFE

快速入门

“工欲善其事，必先利其器”，学习Weex之前需要先搭建好本地的开发环境，如果只是想简单的体验下Weex的魅力，可以使用Weex提供的dotWe在线运行环境，地址为“dotwe.org/vue”。

Weex官方提供weex-toolkit的脚手架工具来辅助开发和调试。不过需要先安装Node.js和Weex Cli环境。 ###安装Node 安装Node.js方式多种多样，最简单的方式是直接从Node.js官网下载可执行安装程序直接安装。如果是Mac环境，还可以使用Homebrew进行安装，安装命令如下：

brew install node
复制代码

安装完成之后，可以使用下面的命令来检测是否安装成功。

$ node -v
v6.11.3
$ npm -v
3.10.10
复制代码

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

npm install -g weex-toolkit
复制代码

如果要升级weex-toolkit，则可以使用下面的命令： weex update weex-devtool@latest // @后标注版本后，latest表示最新版本 如果是国内开发者，还可以使用淘宝的npm镜像来安装weex-toolkit，涉及到的安装命令如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g weex-toolkit
复制代码

安装结束后，可以直接使用weex命令来验证是否安装成功，如果安装成功会显示weex命令行工具各参数。

###安装weexpack weexpack是weex新一代的工程开发套件，是基于weex快速搭建应用原型的利器。使用weexpack可以快速的帮助开发者通过命令行创建weex工程和插件工程，添加相应平台的weex 应用模版，weexpack还支持快速打包weex 应用并安装到手机运行，并创建weex插件模版并发布插件到weex应用市场。安装weexpack的命令如下：

npm install -g weexpack
复制代码

###安装Weektools weex-toolkit是官方提供的一个脚手架命令行工具，可以使用它进行Weex 项目的创建、调试以及打包等操作。weex-toolkit从1.0.1版本之后才开始支持初始化Vue项目，所以使用时请注意weex-toolki的版本。weex-toolkit的安装命令如下：

npm install -g weex-toolkit
复制代码

如果使用上面的命令安装，使用的是从https://registry.npmjs.org获取的安装源，所以对于国内用户来说，最好选择从阿里的镜像去下载，安装时需要执行如下的一些命令。

npm install -g cnpm --registry=https://registry.npm.taobao.org  //淘宝镜像
npm install -g weex-toolkit
复制代码

安装完成之后，可以使用weex -v或者weex命令来验证是否安装成功。 ###安装Android环境 如果需要支持Android平台则需要配置Android开发环境：安装Java相关环境，安装Android Studio及Android SDK。在安装编译Android项目时需要保证Android build-tool的版本为23.0.2以上。 ###安装iOS环境 如果需要支持iOS平台则需要配置iOS开发环境：安装Xcode、cocoaPods及其相关环境。其中，Xcode是Apple 公司提供的集成开发工具，可以使用它开发macOS和iOS应用程序，而CocoaPods则是负责iOS项目管理的第三方开源库的工具，合理的使用CocoaPods可以提高程序的开发效率。

接下来，使用Weex提供的create命令初始化一个Weex项目。例如： weex create weexdemo 执行完上述命令后，在工程weexdemo目录下就会创建一个使用Weex和Vue的模板项目，工程目录如下图所示。

未完待续！！！