阿里Weex混合app开发工程搭建指南（android为例）

混合app开发顾名思义一个app既有原生app语法（包括ios和android）又有前端html+javascript+css语法。这种混合开发框架甚多，从最早的cordova一统天下的局面到现在最火的React Native，再到兴起的阿里Weex框架。说实话一开始有些概念没理清看Weex官网的教程配置有些懵，东一块西一块后来坑碰的多了，才发现官网的文档确实乱，有些重要的地方没有展开讲，希望后面会更新上。我觉得对于第一次接触Weex的朋友来说可以先用一种方式把工程构建起来，再配合官网资料和其他社区来扩展知识。

Weex官网介绍的两种方式

1、集成Weex到已有的android应用。

对应的场景就是你现在有一个开发中的android app了，想用上Weex。这个可以直接参照官网的教程来，没啥问题。

2、新建Weex项目，由Weex项目构建新的android应用。

对应的场景就是你现在啥都没有，要从头开始做一个Hybrid混合app应用。可以按照下面这个步骤来搭建工程，直至运行起来。

• 1、肯定是安装NPM和Node.js了，具体这个可以参考网上安装教程，只要最后用node -v命令能正确查看到node版本就说明node环境安装好了可以进行下一步。
  image.png
• 2、全局安装week-toolkits脚手架。随便打开一个CMD命令行窗口输入命令npm install weex-toolkit -g来全局安装week-toolkits脚手架
• 3、用week-toolkits脚手架创建Weex工程。安装完week-toolkits脚手架之后命令行就能用weex相关命令了，首先找个地方创建一个空文件夹（比如我的是D:\WEEXProject\weexDemo），在此文件夹内打开CMD命令行窗口输入weex create weexdemo，创建过程中会有一系列选项（比如给工程取个名字、是否要引入vue-router、是否要ESLint这些，看情况选择），创建完后可以看到：
  image.png
  
  接下去执行一下npm install安装一下依赖，生成node_modules库
• 4、运行起来。本来到此就能把Weex工程跑起来了，但是还有注意点，npm的版本要升到5以上，所以你先用命令npm -v检查一下npm的版本（新安装node的朋友基本是最新的，一直就在从事前端开发的朋友最好还是检查一下）然后通过npm i npm@latest -g命令把npm更新到最新版。都做完了就可以USB连上安卓手机尝试用weex run android命令把这个Weex工程跑在手机上了。如果期间遇到报错Command failed: call gradlew.bat assembleDebug时先检查自己的jdk版本，jdk至少要升到1.8，安装完jdk1.8后调整环境变量JAVA_HOME，重启后再跑weex run android命令就ok了。成功后是这样的：
  weex run android成功.png
  这里我建议暂时不看官网的各种调试手段，先把这个run android跑通吧。
• 5、用上android原生API。到现在为止看到的都是前端的东西，混合开发怎么能少了原生的代码呢。这时就需要创建android工程了，Weex提供了创建的方式：用命令weex platform add android添加android工程，成功后，你就能在platforms文件夹下看到android工程了，
  image.png
  
  此时，你要用android studio来打开这个android工程（默认生成的是as工程，没有eclipse的）。看到代码后你会发现官网集成Weex到已有应用教程中需要手动添加依赖的工作，这里都已经帮你做好了，对于我们第一次搭建的小伙伴来说，先熟悉一下后面再慢慢学习原理。对于开发来说Weex前端Vue部分和原生android是一种Module机制，如官网就封装了一些Module给前端调用：
  image.png
  
  一般来说官网提供的都是基础的Module，我们会根据自己的需求去创建自己的Module，这里打开android代码先注意到有两个文件：WXEventModule和WXApplication
  image.png
  
  WXEventModule类继承自WXModule，你可以在这个类里定义module，供Vue前端调用。如我这里写一个printLog方法去实现一个调用安卓Toast的功能：
  
  image.png
  
  然后打开WXApplication看一下，这里已经为我们默认去注册了Module，名称为event：
  image.png
  
  最后在Vue页面require对应Module来使用即可，比如我这里直接在index.vue里写上：
  
  image.png
  
  代码保存后执行weex run android在手机上跑效果如下：
  
  QQ图片20180802135436.png
  
  这样就表示我们一个Weex混合APP就调通了。官网介绍的一些调试手段，打包发布的流程后面再慢慢学习折腾吧。