Android APP和 Weex混合开发从环境搭建到APP工程运行

一、简言

目前Android可行的混合编程方案有Weex和ReactNative两种方案，两者基本类同，只是使用框架技术有点不一样。从网上的资料可以查知到Weex相比ReactNative更容易上手，另外ReactNative在处理IOS端的长列表时容易出现内存泄漏。关于Weex和ReactNative的进一步比较可以参阅博客Weex 和 React Native 的比较看这里和Weex和React Native框架对比与选择

二、Weex 环境的搭建

2.1 Node.js的安装
在百度中搜索Node.js后直接在官网中最新版本进行安装(可选择安装在D盘，比如D:\Program Files\nodejs)，安装成功之后查看软件的版本号：

node -v //查看node版本号
v8.12.0
npm -v //查看npm版本号
6.4.1

改变原有的环境变量：

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

2.2 安装淘宝npm(cnpm)

npm install -g cnpm --registry=https://registry.npm.taobao.org //安装命令
cnpm -v //查看版本的命令

2.3 安装weex-toolkit以及各种依赖文件

npm install -g weex-toolkit
npm intsall //安装各种依赖
npm install webpack // Weex工程在浏览器可以调试，需要安装到

2.4 webStorm安装
webStorm是开发weex工程的IDE，也可以对weex和Android混合的工程进行开发和调试，有破解版和正式版可以选择。

三、WEEX工程的调试

3.1 web端的调试
由于此前并没有开发过weex工程项目，因此在网上下载一个现有的工程是比较合理的选择，可以参考GitHub Weex WEB Demo，下载工程到本地之后，通过终端进入工程目录，进行如下操作

//在运行成功的情况下，可以通过浏览器观察到页面
npm start
//出错的情况有可能是需要安装模块，也有可能是端口被占用，需要换用端口 npm run dev --port 8081

3.2 Android端的调试
上面的工程并没有支持Android部分，只支持IOS部分，因此需要寻找一个Weex工程支持Android部分，可以参考GitHub Weex Android Demo，在该工程weex-demo的platform目录下存在android目录，该工程是支持Android的。
这里写图片描述
在终端下进入weex-demo目录之后，运行如下命令：

weex run android

有点遗憾，最后命令出错在APK的安装步骤，该问题需要进一步排除，读者有兴趣可以自行排查。

3.3 通过webStorm打开weex工程进行开发
用webStorm打开weex工程后，通过配置后可完成weex和Android工程的混合开发，配置如下：

如果Scripts不能选择android，需要在package.json中添加android的支持。

在webStorm中配置好后，可以如Android Studio一样对Android项目工程进行调试，参照如下：

3.4 在Android stuido中调用weex生成的JS
如果在webStorm中调试Weex和Android的开发存在问题（比如刚才出现的安装问题），可以将Weex生成的js文件拷贝到Android工程的指定目录下，在Android工程中来完成混合调用。Android工程中需要添加依赖和进行一些初始化工作。可以参考GitHub Andorid Project
在工程包的gradle下，添加依赖：

compile "com.taobao.android:weex_sdk:0.5.1@aar"
compile 'com.taobao.android:weex_inspector:0.16.11'
compile 'com.taobao.android.weex_inspection:urlconnection_interceptor:1.0.0'
compile 'com.taobao.android:weexplugin-loader:1.3'
compile 'com.taobao.android:weexplugin-processor:1.3'
compile 'com.taobao.android:weexplugin-annotation:1.3'

在应用的前期对weex组件进行初始化

public class WXApplication extends Application {

  @Override
  public void onCreate() {
    super.onCreate();
    InitConfig config = new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
    WXSDKEngine.initialize(this, config);
    try {
      WXSDKEngine.registerModule("poneInfo", PhoneInfoModule.class);
      WXSDKEngine.registerComponent("rich", RichText.class, false);
    } catch (WXException e) {
      e.printStackTrace();
    }
  }

加载weex生成的本地JS文件

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mWXSDKInstance = new WXSDKInstance(this);
    mWXSDKInstance.registerRenderListener(this);
    /**
     * WXSample 可以替换成自定义的字符串，针对埋点有效。
     * template 是.we transform 后的 js文件。
     * option 可以为空，或者通过option传入 js需要的参数。例如bundle js的地址等。
     * jsonInitData 可以为空。
     */
    Map<String,Object> options=new HashMap<>();
    options.put(WXSDKInstance.BUNDLE_URL,"file://hello.js");
    mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("hello.js", this), null, null, WXRenderStrategy.APPEND_ASYNC);
  }

四、总结

该博客主要总结了一下weex和Android混合开发工程环境搭建的大致流程和步骤，由于环境和编译中出现的bug也很多，不一定能完全列举到，因此文中没有对安装和编译中出现的bug进行说明，希望该博客对学习Android与weex混合开发的你有帮助。
参考博客
Weex的环境搭建以及集成到Android项目
 Android weex 上手体验
 weex扩展 Android 的功能
 WIN10下阿里WEEX环境搭建
 weex项目实战
 网易严选App感受Weex开发