Weex与native交互(包含web与native端的代码)

主要内容

主要介绍了Weex项目中与native的交互问题，包含了native端与web端的交互说明以及代码写法，其中native端以iOS为例。

• 全局消息的交互
• module组件的交互

1.全局消息的交互

Native发送消息至Weex 应用场景 比如上传数据 选择原生的图片等上传给Weex 推送的通知消息传递给Weex进行跳转等，全局的推送方法不需要注册module也不需要再前端进行require引入单独的module只需要用全局事件去接收

native.png

甚至也可以接收原生的通知方法发送的消息

native.png

前端的接收方法

const globalEvent = weex.requireModule('globalEvent’);

web.png

2.通过module组件的交互

前端调用Native方法分为4种 1.不传参数无回调 2.不传参数有回调 3.传参数无回调 4.传参数有会调
我们以手势密码页面包含创建手势密码，验证密码，等一系列交互事件。

首先Native端要注册前端调用方法的module，代码如下：

首先Native注册需要处理手势密码的module

native.png

然后暴露的方法如下

native.png

1.不传参数无回调：

前端引用module组件然后直接执行方法

web.png web.png

native在被调用时执行该方法

native.png

2.不传参数有回调

2图中 callback中回调的字典内容 在前端中 由function(e) 中的 e取到，并对其他需要的字段进行赋值使用

web.png

native端回调的内容可以是字典形式也可以是一个字符串，要与前端约定好。

native.png

3.传参数无回调

在调用方法的括号以逗号为分隔符一次写入需要传递的参数，native端通过与前端约定的参数形式进行取值

web.png

native端可以拿到web端给到的参数信息去执行相关的本地判断与操作，但是不用给到回调信息。

native.png

4.传参数有会调

可以看到在前端中 与方法3相同依然是在调用方法的括号内对函数内需要传递的参数和回调进行赋值，然后native可以拿到前端传递的参数进行判断操作并同时做回调处理。

web.png

可以看到我们拿到web给到的type值去判断，要进行的是新创建手势密码还是关闭手势密码，然后再把是否操作成功回调

native.png

注意事项

• native端：在进行回调时，一定要与前端小伙伴进行沟通确保调用方法内部写入了回调函数，不然会造成运行出错。
• 对native端来说决定前端调用的方法仅仅只是 WX_EXPORT_METHOD 方法中书写的方法与自己命名的用来接收前端传递过来的参数内容的参数名无关
  总的来说坑是有的，但是也不像说的那么差。😁

后记

有时间后续会总结一下Weex项目中遇到的一些问题和Vue中的使用问题。