0%

HybridApp

为了开发Hybrid App,在vue项目中通过对WebViewJavaScriptBridge第三方库的封装,创建一个桥梁,实现H5和android、ios的通信。也可以去github查看详细的介绍WebViewJavascriptBridge

新建封装文件

创建src/utils/jsBridge.js文件,用于封装WebViewJavascriptBridge

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
const App = {}
// 计数
let failNum = 0;

// 获取型号
App.userAgent = navigator.userAgent

// 是否在android APP中运行
App.isAndroidApp = /application_ccicAndroid/i.test(App.userAgent);

// 是否在iPhone APP中运行
App.isiPhoneApp = /application_ccicIos/i.test(App.userAgent);

// 这里主要是注册 OC 将要调用的 JS 方法。
App.setupWebViewJavascriptBridge = function(callback) {
// 执行监听 && 检测 JSBridge需要一个契机去告诉JS,我准备好了,你可以来调用我的方法了
if (window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
} else {
document.addEventListener('WebViewJavascriptBridgeReady',function() { callback(WebViewJavascriptBridge);},false);
}
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback]; // 创建一个 WVJBCallbacks 全局属性数组,并将 callback 插入到数组中。
var WVJBIframe = document.createElement('iframe'); // 创建一个 iframe 元素
WVJBIframe.style.display = 'none'; // 不显示
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; // 设置 iframe 的 src 属性
document.documentElement.appendChild(WVJBIframe); // 把 iframe 添加到当前文导航上。
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
};

// 与原生交互方法
App.callNative = function(data) {
if (App.isiPhoneApp) {
App.setupWebViewJavascriptBridge(function(bridge) {
/*
* 封装 JS 调用了 OC 的方法
* data.fun 是传递给 OC 的方法名
* data.data 是传递给 OC 的数据
* function 是 JS 调用完毕之后OC的回调
* responseData 是 OC 传递过来的数据.
*/
// jsbridge.callHandler是JS调Native方法的核心
bridge.callHandler(data.fun, data.data, function responseCallback(responseData) {
if (typeof data.callback === 'function') {
data.callback(responseData);
}
});
});
} else if (App.isAndroidApp) {
/*
*andorid从老系统返回时偶尔报错callHandler不是一个function,
*应该是还未注入到webview,使用setTimeout反复调用
*/
if ((!window.WebViewJavascriptBridge) || (!window.WebViewJavascriptBridge.callHandler)) {
failNum++;
if (failNum > 50) {return;} // 设置失败超过50次后停止
setTimeout(() => {App.callNative(data);}, 300)
return;
}
/*
* 封装 JS 调用了安卓方法
*/
window.WebViewJavascriptBridge.callHandler(data.fun, data.data, function(res) {
let responseDataJson = {};
if (res) {responseDataJson = JSON.parse(res);}
if (typeof data.callback === 'function') {data.callback(responseDataJson);}
});
}
};

export default App

调取App原生方法

jsBridge.js中封装设置调取原生的方法,下面的fun方法名是需要跟原生小伙伴商量确定的,这里封装的app.方法名习惯性的和调取原生的方法名一致,方便管理。

1
2
3
4
5
6
7
8
9
app.fun方法名 = function(req){
app.callNative({
fun: 'fun方法名',
data: {
参数1: req.aaa,
},
callback: req.fun
});
}

项目中使用

在vue项目中使用,在main.js中引入封装的jsBridge.js

1
2
import bridge from '/utils/jsBridge';
Vue.prototype.$bridge = bridge;

js调原生使用

1
2
3
4
5
let data = {
aaa:'',
bbb:''
}
this.$bridge.fun方法名( data )

OC主动调用 JS 的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//声明 OC 需要主动调用 JS 的方法
app.setupWebViewJavascriptBridge(function(bridge) {
/*
* testFun: 是注入到桥梁中 JS 函数的别名。以供 OC 端调用。
* data: OC 端传递过来的数据。
* responseCallback:JS 调用在被 OC 调用完毕之后,向 OC 端传递的数据的一个回调。
*/
bridge.registerHandler('testFun ', function(data,responseCallback){
testFun (data) // 此处用的方法名和桥梁中注册的方法名一致,个人习惯,也方便管理
});
}
// 官方给出下面两种调用方式,可以根据自己项目情况来选择合适的方法:
bridge.registerHandler("showAlert", function(data) { alert(data) })
bridge.registerHandler("getCurrentPageUrl", function(data, responseCallback) {
responseCallback(document.location.toString())
})

完成上面操作后,就完成了 h5App 之间桥梁打通操作,后面只需要跟原生商量方法名即可。

--------- 本文结束感谢您的阅读 ---------
分享