阿里Weex 集成到Android

推荐使用 18.0版本

1. 使用Android Studio 新建项目

2. 使用gradle集成

dependencies {
    .......
    implementation 'com.android.support:recyclerview-v7:27.1.1'
    implementation 'com.android.support:support-v4:27.1.1'
    implementation 'com.android.support:appcompat-v7:27.1.1' 
    implementation 'com.alibaba:fastjson:1.1.46.android'
    implementation 'com.taobao.android:weex_sdk:0.18.0@aar'
}

http://jcenter.bintray.com/com/taobao/android/weex_sdk/0.18.0/

这是weex_sdk的maven仓库地址，有可能会变更，可以自行查找

3. 添加混淆规则

-keep class com.taobao.weex.bridge.**{*;}
-keep class com.taobao.weex.dom.**{*;}
-keep class com.taobao.weex.adapter.**{*;}
-keep class com.taobao.weex.common.**{*;}
-keep class * implements com.taobao.weex.IWXObject{*;}
-keep class com.taobao.weex.ui.**{*;}
-keep class com.taobao.weex.ui.component.**{*;}
-keep class com.taobao.weex.utils.**{
    public <fields>;
    public <methods>;
    }
-keep class com.taobao.weex.view.**{*;}
-keep class com.taobao.weex.module.**{*;}
-keep public class * extends com.taobao.weex.common.WXModule{*;}

4. 在Application中初始化

WXSDKEngine.initialize(this, new InitConfig.Builder().build());

5. 在MainActivity中使用weex页面

public class MainActivity extends AppCompatActivity implements IWXRenderListener{

    WXSDKInstancemWXSDKInstance;

    @Override

    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 可以为空。
        * width 为-1 默认全屏，可以自己定制。
        * height =-1 默认全屏，可以自己定制。
        */

        mWXSDKInstance.renderByUrl("com.xy.weex", "http://192.168.31.79:8081/dist/second.js", null, null, 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) {
    }

    @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();
        }
    }
}

6. 编译vue页面

image image

使用 weex 命令编译新建的 second.vue 文件, js文件编译到dist目录，-m 参数为压缩js文件

7. 运行APP查看效果

如果没什么意外的话，可以看到APP和网页打开的效果是一致的