Weex集成到已有android项目

当前环境为weex 1.3.13-beta.7，vue2.0用法

本文总体根据官网链接https://weex.apache.org/cn/guide/integrate-to-your-app.html 进行集成，同时记录下遇到的问题和解决方法。

引入gradle

// ============= weex start =============
compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:support-v4:23.1.1'
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.alibaba:fastjson:1.1.46.android'
compile 'com.taobao.android:weex_sdk:0.16.0@aar'
// ============= weex end =============

// 图片库框架
compile 'com.github.bumptech.glide:glide:3.7.0'

ps: 版本可以高不可以低。官网文档weex_sdk:0.5.1会报错误E/jsengine: ReportException :undefined:5: ReferenceError: Vue is not defined改成当前最新版即可，这里用的是weex_sdk:0.16.0。

ImageAdapter配置

public class ImageAdapter implements IWXImgLoaderAdapter {
    @Override
    public void setImage(final String url, final ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
        //实现你自己的图片下载，否则图片无法显示。

        WXSDKManager.getInstance().postOnUiThread(new Runnable() {
            @Override
            public void run() {
                Glide.with(WXEnvironment.getApplication()).load(url).placeholder(R.mipmap.ic_launcher).diskCacheStrategy(DiskCacheStrategy.SOURCE).crossFade().dontAnimate().into(view);
            }
        }, 0);
    }
}

application初始化

public class WXApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        InitConfig config = new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
        WXSDKEngine.initialize(this, config);
    }
}

开始渲染Weex View

public class WeexActivity extends AppCompatActivity implements IWXRenderListener {
    WXSDKInstance mWXSDKInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_weex);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        /**
         * WXSample 可以替换成自定义的字符串，针对埋点有效。
         * template 是.we transform 后的 js文件。
         * option 可以为空，或者通过option传入 js需要的参数。例如bundle js的地址等。
         * jsonInitData 可以为空。
         * width 为-1 默认全屏，可以自己定制。
         * height =-1 默认全屏，可以自己定制。
         */
        mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("index.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
    }

    @Override
    public void onViewCreated(WXSDKInstance instance, View view) {
        setContentView(view);
    }

    @Override
    public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
    }

    @Override
    public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
    }

    @Override
    public void onException(WXSDKInstance instance, String errCode, String msg) {
        Toast.makeText(this, "onException: " + errCode + ", " + msg, Toast.LENGTH_SHORT).show();
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityResume();
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityPause();
        }
    }

    @Override
    protected void onStop() {
        super.onStop();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityStop();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityDestroy();
        }
    }
}

主要是mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("index.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);这一句， mWXSDKInstance.render加载本地目录js文件， mWXSDKInstance.renderByUrl可加载远程js文件，实现热更新。

jsbundle资源生成

android加载weex和加载RN类似也是要提供个jsbundle文件。weex生成jsbundle也很简单，在weex项目下运行npm run build, 编译完成后会在dist目录下生成文件。每个vue文件会生成对应的js。

image

把dist目录下js文件拷贝到android assets目录。至此，集成完成。

源码

https://github.com/huazhiyuan2008/WeexHotFixDemo

思考与总结

• weex_sdk版本最好要最新，遇到莫名其妙的问题，可以考虑升级此版本
• 每个vue生成单独的jsbundle，这样做到页面文件独立，size很小，有利于热更新加载速度。
• 热更新整体方案和细节进一步思考

Reference

weex官网-集成Weex到已有应用

网易严选App感受WEEX 开发