将 Weex 组件集成到现有 Android 项目踩坑

本文总体根据官网链接 集成 Weex 到已有应用 进行集成，下面列出了遇到的问题及解决办法。

1. ReferenceError: Vue is not defined

跟着官网的教程开始集成后你会发现项目跑起来后会提示

1

E/jsengine: ReportException :undefined:5: ReferenceError: Vue is not defined

查了资料才发现这是官网文档未及时更新的缘故,只需要将依赖导入语句修改如下然后重新编译即可

1
2

// 更新 weex_sdk 为较新版本即可,可以去 jcenter 查找release version
implementation 'com.taobao.android:weex_sdk:0.16.0@aar'

同时,官网文档的 render 方法也需要修改如下

1
2
3

mWXSDKInstance.render("WXSample", WXFileUtils.loadFileContent("index.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
// 修改为下面
mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("index.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);

2. JSBundle 资源生成

Android 加载 weex 和加载 React Native 类似也是要提供个 JSBundle 文件. 我们 weex create 后生成的项目文件都是以 .vue 后缀名结尾的,在引入 Android 之前,我们需要进行些处理才能放入 Android 项目的 assets 目录中供 WeexSdk 调用: 在项目根目录运行 npm run build 编译完成后会在dist目录下生成文件,每个vue文件会生成对应的js, 然后我们将 dist 文件夹内的 *.js 文件拷贝到 Android Assets 目录下即可