标签：function bridge App iOS js let Android configuration frame
无论Android还是iOS，Webview都具有与js交互的能力，这使得我们可以利用混合开发(原生+h5)满足相对复杂的业务需求。但是由于Android和iOS系统的差异，原生App在与js交互时，js需要判断不同的系统从而调用不同的代码，从而使js代码的维护成本更高。
原生与js交互的传统做法
-
android一般这样为js提供接口：
webview.addJavascriptInterface(new JsInteraction(), "Android");
public class JsInteraction {
@JavascriptInterface
public void action(String param) {
//TODO
}
}
-
ios一般这样为js提供接口
webView!.configuration.userContentController.add(self, name: "action")
extension ViewController: WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if message.name.caseInsensitiveCompare("action") == .orderedSame {
guard let param = message.body as? String else {
return
}
//TODO
}
}
}
-
而js一般是这样调用的
if (isiOS) { // ios
window.webkit.messageHandlers.action.postMessage('xxxxx')
}else{
//android
Android.action('xxxxx')
}
如果只是简单的交互，使用这种方法简单快捷。如果接口过多，或者存在参数回调的情形，则这种方式对各端都不太友好。客户端还封装处理回调相关的代码，前端则需要大量的判断系统的代码。这个时候我们就可以使用帮我们封装好的第三方库的方式来解决。
使用第三方库让原生App与js优雅交互
接下来我来介绍一下怎么使用第三方库的，让js与原生app互相调用，且支持参数回调，且js代码统一，总之让原生App与js的交互更加优雅。
在ios中我们使用WebViewJavascriptBridge，在android中我们使用jsbridge。
下面我们来看一下各端的代码具体都是怎么写：
-
iOS代码配置
-
ios引入WebViewJavascriptBridge
在podfile中加入以下代码，并执行'pod install'：
pod 'WebViewJavascriptBridge'2.ios webview配置
class BaseWebView: WKWebView {
var bridge: WKWebViewJavascriptBridge?
override init(frame: CGRect, configuration: WKWebViewConfiguration) {
super.init(frame: frame, configuration: configuration)
}
init(frame: CGRect) {
let configuration = WKWebViewConfiguration()
configuration.allowsInlineMediaPlayback = true
configuration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
super.init(frame: frame, configuration: configuration)
bridge = WKWebViewJavascriptBridge(for: self)
addFunc()
getHtmlPageUrl()
}
func addFunc() {
//注册供js调用的方法（获取客户端版本号）
bridge!.registerHandler("getVersion", handler: {[weak self] data, responseCallback in
guard let this = self else {
return
}
responseCallback?("1.0.0")
})
}
//调用js的getPageUrl方法，获取url
func getHtmlPageUrl() {
bridge!.callHandler("getPageUrl", data: nil) { response in
print("getPageUrl:\(response ?? "")")
}
}
}
class H5ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
addWebView()
}
func addWebView() {
webView = BaseWebView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height))
webView!.bridge!.setWebViewDelegate(self)
let path = Bundle.main.path(forResource: "jsBridge", ofType: "html")
let url = URL(fileURLWithPath: path!)
webView!.load(URLRequest(url: url))
view.addSubview(webView!)
}
}
在ios代码中，需要初始化bridge，bridge为
WKWebViewJavascriptBridge类型。
为js提供方法用bridge.registerHandler()进行注册，调用js方法用bridge.callHandler()进行调用。
-
Android 代码配置
1.Android 引入jsbridge
gradle中添加
implementation 'com.github.lzyzsd:jsbridge:1.0.4'
2.Andriod webview配置
class BaseWebView: WKWebView {
var bridge: WKWebViewJavascriptBridge?
override init(frame: CGRect, configuration: WKWebViewConfiguration) {
super.init(frame: frame, configuration: configuration)
}
init(frame: CGRect) {
let configuration = WKWebViewConfiguration()
configuration.allowsInlineMediaPlayback = true
configuration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
super.init(frame: frame, configuration: configuration)
bridge = WKWebViewJavascriptBridge(for: self)
addFunc()
getHtmlPageUrl()
}
func addFunc() {
//注册供js调用的方法（获取客户端版本号）
bridge!.registerHandler("getVersion", handler: {[weak self] data, responseCallback in
guard let this = self else {
return
}
responseCallback?("1.0.0")
})
}
//调用js的getPageUrl方法，获取url
func getHtmlPageUrl() {
bridge!.callHandler("getPageUrl", data: nil) { response in
print("getPageUrl:\(response ?? "")")
}
}
}
class H5ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
addWebView()
}
func addWebView() {
webView = BaseWebView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height))
webView!.bridge!.setWebViewDelegate(self)
let path = Bundle.main.path(forResource: "jsBridge", ofType: "html")
let url = URL(fileURLWithPath: path!)
webView!.load(URLRequest(url: url))
view.addSubview(webView!)
}
}
Android的写法基本与ios一样，与ios不同的是不需要初始化bridge（需要前端初始化）。
为js提供方法用webview.registerHandler()进行注册，调用js方法用webview.callHandler()进行调用。
-
js代码写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vconsole.min.js"></script>
<script> var vConsole = new VConsole(); </script>
<title>Document</title>
</head>
<body>
<div id="content">内容</div>
<button id="btn1">获取版本号</button>
<script>
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
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];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
setupWebViewJavascriptBridge(function(bridge){
let uagent = window.navigator.userAgent
let isAndroid = uagent.indexOf('Android') > -1 || uagent.indexOf('Adr') > -1
if (isAndroid) {
//android需要初始化bridge
bridge.init(function(message, responseCallback) {
var data = {
'Javascript Responds': 'Wee!'
};
responseCallback(data);
});
}
//注册可供原生调用的方法（获取页面同url）
bridge.registerHandler("getPageUrl", function (data, responseCallback) {
console.log("call过来了 getPageUrl")
responseCallback(document.location.toString())
})
//点击按钮，获取app版本号
document.getElementById('btn1').onclick = function(e) {
console.log(bridge)
bridge.callHandler('getVersion', null, function(response) {
document.getElementById('content').innerHTML = "版本号：" + response
})
}
});
</script>
</body>
</html>
在Android系统中，js需要初始化bridge。而在ios中，bridge则由客户端初始化后传入。
js调用客户端方法统一用bridge.callHandler('方法名','参数',function(response){})
js为客户端提供方法则统一用bridge.registerHandler('方法名',function (data, responseCallback) {})
标签：function,bridge,App,iOS,js,let,Android,configuration,frame 来源： https://www.cnblogs.com/lorin/p/16588309.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。