Weex Android 原生交互

作者: Lrxc | 来源:发表于2017-12-16 15:03 被阅读1491次

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

一. 配置Android项目

  1. 自定义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");
    }
}
  1. 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项目

  1. 编写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>
  1. 编译为js文件
    FirstApp 根目录执行命令,成功后生成dist目录,进去复制index.js到Android Studio项目assets中
npm run build

三. 运行Android Studio 看效果吧


GIF.gif

相关文章

  • Weex Android 原生交互

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

  • Weex 从无到有开发一款上线应用 3

    iOS调试DemoWeexDemo本篇将开始跟大家探讨如何进行Weex页面跟原生的交互,即Weex调原生方法,原生...

  • Weex 04 Weex中Android项目的生成和交互

    前言 本章介绍如何将Weex的项目导出Android,并实现Weex和Native的交互。 正文 导出Androi...

  • weex☞oss上传图片(android篇)

    oss上传,其实使用的原生Android的oss-android-sdk,算不上weex上传,本来想实现前端上传,...

  • weex沉浸式导航栏解决方案

    条件weex页面要通知app端是否显示原生导航栏(android,ios)和沉浸式导航(android)要根据系统...

  • weex 与原生的交互

    之前发现js调用原生方法比较好,但是今天发现我要调用js方法怎么弄呢,各种搜索【就是百度 =_=!】都是一毛一样的...

  • weex项目弃坑小结

    由于weex 的不稳定性,所以中途放弃了 weex 方案。转而使用 Android原生开发。今天项目第一阶段开发结...

  • Flutter 闲聊

    Part1 移动端开发闲聊 原生:iOS、Android跨平台:H5、小程序、React Native、Weex、...

  • weex+vue开发ios端踩坑记录

    weex vue ios 原生 app 会不定时更新 img标签应为 ,路径不能引用本地静态文件 Android...

  • 关于WebView

    JS与Android原生交互 首先,webview应该先支持JS脚本 其次,写一个JS交互的接口,用来调用原生的方...

网友评论

    本文标题:Weex Android 原生交互

    本文链接:https://www.haomeiwen.com/subject/vzmswxtx.html