Weex Android 原生交互

不会新建项目的小伙伴点这儿http://www.jianshu.com/p/94267514204f

一. 配置Android项目

自定义Module
官方文档：http://weex.apache.org/cn/references/advanced/extend-to-android.html

public class MyModule extends WXModule {
    @WXModuleAnno(runOnUIThread = true)
    public void printLog(String msg) {
        Toast.makeText(mWXSDKInstance.getContext(), msg, Toast.LENGTH_SHORT).show();
    }

    @WXModuleAnno(runOnUIThread = false)
    public void nativeCallBack(JSCallback callback) {
        //回调信息
        callback.invoke("I am callback message");
    }
}

application onCreate中注册

//初始化Weex
InitConfig config = new InitConfig.Builder().setImgAdapter(null).build();
WXSDKEngine.initialize(this, config);
try {
    //通信方法 myModule是weex调用原生的方法名
    WXSDKEngine.registerModule("myModule", MyModule.class);
} catch (WXException e) {
    e.printStackTrace();
}

二. 配置Weex项目

编写index.vue 内容

<template>
    <div>
        <text @click="onClick">Android Toast</text>
        <text @click="onCallBack">CallBack</text>
    </div>
</template>
<script>
    module.exports = {
        methods: {
            onClick: function () {
                weex.requireModule('myModule').printLog("我是一个测试!");
            },
            onCallBack: function () {
                let func = weex.requireModule('myModule');
                func.nativeCallBack(function (event) {
                    //回调后处理
                    func.printLog('回调: ' + event);
                });
            }
        }
    }
</script>

编译为js文件
FirstApp 根目录执行命令，成功后生成dist目录，进去复制index.js到Android Studio项目assets中

npm run build

三. 运行Android Studio 看效果吧

GIF.gif

Weex Android 原生交互

推荐阅读更多精彩内容