Weex与Native通信

Posted 2021-04-29 码上就好

最近在进行项目weex改造，满足项目代码热更新的需求，接下来会不定时总结一系列中weex开发中遇到的问题和踩过的坑。

今天的主角是通信问题：

首先定义双方的通信传输的数据格式为：json.

weex如何调用Native

Module 扩展必须继承 WXModule 类。扩展方法必须加上@JSMethod (uiThread = false or true) 注解。Weex 会根据注解来判断当前方法是否要运行在 UI 线程，和当前方法是否是扩展方法。Weex是根据反射来进行调用 Module 扩展方法，所以Module中的扩展方法必须是 public 类型。同样因为是通过反射调用，Module 不能被混淆。请在混淆文件中添加代码：-keep public class * extends com.taobao.weex.common.WXModule{*;}Module 扩展的方法可以使用 int, double, float, String, Map, List 类型的参数完成 Module 后一定要在初始化时注册 WXSDKEngine.registerModule("myModule", MyModule.class); 否则会报类似错误：ReportException :undefined:9:  TypeError: Object #<Object> has no method 'printLog'

（1）在Native端自定义Module

如下：

/** * 提供weex中js调用Native的方法(扫描) */public class RealNameQueryScanModule extends WXModule { @JSMethod(uiThread = true) public void scan(){        Toast.makeText(mWXSDKInstance.getContext(),"===我是扫描=",Toast.LENGTH_SHORT).show(); }}

（2）Module注册

registerModule(moduleName,moduleClass)

• return(bool): 是否注册成功

• moduleName(String): 模块名称

• moduleClass(Class): 模块对应的class，创建module实例时使用

使用方式:

 WXSDKEngine.registerModule("RealNameQueryScanModule", RealNameQueryScanModule.class);

（3）weex中js调用

const realNameScan=weex.requireModule('RealNameQueryScanModule');realNameScan.scan();

Native如何调用Weex

需求如下：

项目使用的是Vue+VueRouter的单页应用来写Weex的，现有以下需求。

（1）当页面不在首页上时，返回上一页面。 this.$router.go(-1)

（2）当页面在首页是，关闭当前android应用

使用的是globalEvent来实现的。我们在 Android 的返回按钮事件中触发 globalEvent，在 Weex 中监听该 globalEvent。

native端以android为例演示

Android

public void onBackPressed(){ Map<String,Object> params=new HashMap<>(); params.put("name","returnmsg"); mWXSDKInstance.fireGlobalEventCallback("androidback",params);}

Weex端：

globalEvent.addEventListener('androidback', function (e) { // 这里就可以做返回事件操作了，如返回上一页或退出应用 // that.$router.go(-1) // weex.requireModule('close').closeApp()})

这样就完成了简单的weex与native端的通信了，是不是很简单~