H5页面与原生交互-JsBridge


字数:490 阅读时长:2分钟 阅读:85

在这个流量为王移动互联的时代,大部分互联网公司为了加快项目迭代开发,H5在移动端开发的比重逐步增加,webview也越来越吃香。
因此,开发过程中必定涉及H5页面与原生交互,自然而然就引出了JsBridge

JsBridge

前言

原生开发一般分为 Android 和 IOS,所以H5端为了兼容开发,一般使用封装好的插件,去统一调用原生端提供的jsbridge方法。
推荐插件:h5-jsbridge

安装

1
npm i -S h5-jsbridge

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import JsBridge from 'h5-jsbridge'

/**
* 函数描述:js注册方法给app调用
*
* jsBridge.registerHandler(name, callback(data, appCallback))
* @param {String} name 方法名
* @param {Function} callback 回调函数
* @param {Any} callback.data app返回的数据
* @param {Function} callback.appCallback app返回的回调
* @return
*/
JsBridge.registerHandler('funName', function (data, appCallback) {
console.log(data)
})

/**
* 函数描述:js调用app方法
*
* JsBridge.callHandler(name, params, callback)
* @param {String} name 方法名
* @param {Object} params 参数
* @param {Function} callback 回调函数
* @return
*/
JsBridge.callHandler('funName', { event: 'click' }, function (data) {
console.log(data)
})

封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// client.js
import JSBridge from 'h5-jsbridge';

export default {
// JS 注册方法,原生端调用
registerHandler (params, cb) {
try {
JSBridge.registerHandler(
params.funName,
(data) => {
cb && cb(data);
},
);
} catch (e) {
console.log(`Params:${JSON.stringify(params)} \nError:${e}`);
}
},
// JS 调用 原生端 API
callHandler (params, cb) {
try {
JSBridge.callHandler(
params.funName,
params.data,
(data) => {
cb && cb(data);
},
);
} catch (e) {
console.log(`Params:${JSON.stringify(params)} \nError:${e}`);
}
},
}

页面调用

1
2
3
4
5
6
7
8
9
10
11
import Client from './client.js';

/*
* eg:
* 关闭webview
* */

Client.callHandler({
funName: 'H5ToNative',
data: { type: 'CloseView', params: { type: 'close' } },
})

提示:

  • 其中 funNamedata 都是由原生端定义的。
  • 如果项目业务比较多,交互场景各不相同时,可以给funName加上命名空间namespace

参考文档:


欢迎访问:个人博客地址

本文作者: Tiven
发布时间: 2021-09-28
最后更新: 2023-07-17
本文标题: H5页面与原生交互-JsBridge
本文链接: https://www.tiven.cn/p/5790753b/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!