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文档
文档：https://developer.mozilla.org... JavaScript文档比较全面。

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

文档：http://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官方文档 ：https://cn.vuejs.org/
Github：https://github.com/vuejs/vue
vue-router文档：https://router.vuejs.org/zh-cn/
Github：https://github.com/vuejs/vue-...
Vuex 文档：https://vuex.vuejs.org/zh-cn/
Github：https://github.com/vuejs/vuex/

Weex

终于到了Weex的学习，若是有前端基础的能够直接跳过前面基础知识学习了解。照例，先看Weex官方文档（https://weex.apache.org/cn/），而且配合官方Github上的Playground代码在本地运行起来。
下面说一下对于一个新手来讲，如何学习Weex呢？
一、官方文档浏览一遍，有个大体了解，文档很少也比较简单。

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

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

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

五、本身的Sample项目跑起来后，使用官方的 Playground 项目扫码能够运行。而后集成Weex到已有应用或者一个新建立App项目，使用App端访问Js页面。

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

快速入门

“工欲善其事，必先利其器”，学习Weex以前须要先搭建好本地的开发环境，若是只是想简单的体验下Weex的魅力，可使用Weex提供的dotWe在线运行环境，地址为“http://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的模板项目，工程目录以下图所示。

未完待续！！！