WebViewJavascriptBridge使用

发布: 2018-10-08 18:27:32 标签: 前端开发

重写了app通信的方法,中间碰到了一些兼容问题,看了很多资料,最终确定版,兼容性好&&使用方便

app通信WebViewJavascriptBridge方法使用

01// 注册方法获取WebViewJavascriptBridge对象
02function setupWebViewJavascriptBridge(callback) {
03 if (window.WebViewJavascriptBridge) {
04 return callback(window.WebViewJavascriptBridge)
05 }
06 if (window.WVJBCallbacks) {
07 return window.WVJBCallbacks.push(callback)
08 }
09 // 兼容安卓
10 document.addEventListener(
11 'WebViewJavascriptBridgeReady',
12 () => callback(window.WebViewJavascriptBridge),
13 false
14 )
15 // 兼容ios
16 window.WVJBCallbacks = [callback]
17 var WVJBIframe = document.createElement('iframe')
18 WVJBIframe.style.display = 'none'
19 WVJBIframe.src = 'https://__bridge_loaded__'
20 document.documentElement.appendChild(WVJBIframe)
21 setTimeout(function() {
22 document.documentElement.removeChild(WVJBIframe)
23 }, 0)
24}
25
26// 获取WebViewJavascriptBridge对象
27function getBirdge() {
28 return new Promise(resolve => {
29 if (window.WebViewJavascriptBridge) {
30 return resolve(window.WebViewJavascriptBridge)
31 }
32 setupWebViewJavascriptBridge(bridge => {
33 alert(1)
34 resolve(bridge)
35 })
36 })
37}
38
39// 重写之后的birdge
40const bridge = {
41 ctx: null, // WebViewJavascriptBridge
42 callHandler(data) {
43 return new Promise(async resolve => {
44 if (!this.ctx) {
45 this.ctx = await getBirdge()
46 }
47 // 根据业务场景重写数据
48 data.data = JSON.stringify(data.data)
49 this.ctx.callHandler('commonActionV2', data, res => resolve(res))
50 })
51 },
52 registerHandler(jsHandlerName) {
53 // 重写事件注册方法
54 this.ctx.registerHandler(jsHandlerName, (data, callback) => {
55 if (callback) {
56 callback(
57 `返回一个字符串,告诉ObjC:我已收到数据${JSON.stringify(data)}`
58 )
59 }
60 })
61 }
62}
63
64export default bridge
65
复制代码

使用

01/**
02 * 获取状态栏高度
03 * return {Promise}
04 */
05export function getBarHeight() {
06 return bridge.callHandler({
07 action: 'halo_ui_statusbar',
08 data: { get_height: 1 }
09 })
10}
11
复制代码