Hybrid APP开发中APP与H5如何通讯?

前言

搞APP开发,如何设计好一套APP与Webview H5通讯的机制非常重要,如果稍微使用及了解一下就会知道,APP与webview之前通讯主要是通过javascript来进行,如果再深入了解一下就会理解其中的原理。

APP与Webview H5通讯

其实相互之前的通讯是比较简单,以比较常用的开源解决方案WebViewJavascriptBridge为例,webview打开时,APP会预先给h5页面注入了(prepend了)一些js代码,如(window.WebViewJavascriptBridge、window.WVJBCallbacks等函数的定义);然后如果h5要向APP通讯则需要动态创建一个隐藏的iframe然后ifame的src格式为“https://__bridge_loaded__?data1=xxx&data2=xxx”,这样APP拦截一下iframe的http请求就可以获取得到h5传来的数据及指令了;最后,APP处理完后如何给h5返回处理结果呢?只需给页面动态添加js代码(Append <script>方式,执行一下WVJBCallbacks(data)这些回调函数),就可以把结果传回给h5了

整个通讯流程

一、初始化

二、h5向APP发送指令

三、Webview H5调用APP接口函数及回调函数的设计

H5端自定义回调函数队列及调用APP API接口函数

let app = {}
// app.apiIds = ....
// app.actionId = 0, 1, 2 ...
app.cbArr = []
app.sendToAPP = function (apiId, actionId, data, callback) { // 当然参数可以自由拼一下
        app.cbArr[actionId] = callback // 所有callback入栈
        window.appAPI(JSON.stringify({apiId,  actionId, data}))
        // ...
}

与客户端约定好全局回调函数的格式:

window.javascriptCallback = function (res) {
    const {actionId, data} = res // actionId是每次调用APP接口时传的一个唯一标识码, data是回调结果数据
    app.cbArr[actionId](data) // 执行相应的回调
    // other operations...
}

与客户端约定好全局h5调用APP接口函数

window.appAPI(JSON.stringify({apiId: xxx,  actionId: xxxx, data: {xxx:xxx,...}}))

作者: 博主

Talk is cheap, show me the code!

发表评论

电子邮件地址不会被公开。

Captcha Code