阿里Weex混合app开发工程搭建指南（android为例）
2018-08-02 本文已影响0人
老陈要上天
混合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就调通了。官网介绍的一些调试手段，打包发布的流程后面再慢慢学习折腾吧。
