WebView 与原生通信
方式一:拦截 URL Scheme
实现方式
H5 端
// 发起请求
function callNative(action, params) {
const query = Object.keys(params || {})
.map(key => `${key}=${encodeURIComponent(params[key])}`)
.join('&');
const url = `myapp://bridge?action=${action}${query ? '&' + query : ''}`;
// 方式1:location 跳转
window.location.href = url;
// 方式2:iframe(部分场景更稳定)
const iframe = document.createElement('iframe');
iframe.src = url;
iframe.style.display = 'none';
document.body.appendChild(iframe);
setTimeout(() => document.body.removeChild(iframe), 100);
}
// 调用示例
callNative('getUserInfo');
callNative('openPage', { url: '/detail', id: '123' });iOS 端(WKWebView)
func webView(_ webView: WKWebView,
decidePolicyFor navigationAction: WKNavigationAction,
decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
guard let url = navigationAction.request.url else {
decisionHandler(.allow)
return
}
if url.scheme == "myapp" {
// 解析 URL,执行对应操作
let action = url.host // "bridge"
let query = url.query // "action=getUserInfo"
handleAction(action, params: parseQuery(query))
decisionHandler(.cancel)
return
}
decisionHandler(.allow)
}Android 端
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.startsWith("myapp://")) {
// 解析 URL,执行对应操作
Uri uri = Uri.parse(url);
String action = uri.getQueryParameter("action");
handleAction(action, uri);
return true;
}
return false;
}
});方式二:注入 JS 全局对象
实现方式
iOS 端(WKWebView)
// 定义原生对象
class NativeBridge: NSObject {
@objc func getUserInfo(_ callback: String) {
let userInfo = ["name": "张三", "id": "123"]
// 调用 H5 回调
webView.evaluateJavaScript("\(callback)(\(userInfo))")
}
@objc func openPage(_ params: String) {
// 解析参数,跳转页面
}
}
// 注入对象
let contentController = WKUserContentController()
contentController.add(NativeBridge(), name: "nativeBridge")
let config = WKWebViewConfiguration()
config.userContentController = contentControllerAndroid 端
// 定义原生对象
public class NativeBridge {
@JavascriptInterface
public String getUserInfo() {
JSONObject userInfo = new JSONObject();
userInfo.put("name", "张三");
userInfo.put("id", "123");
return userInfo.toString();
}
@JavascriptInterface
public void openPage(String params) {
// 解析参数,跳转页面
}
}
// 注入对象
webView.addJavascriptInterface(new NativeBridge(), "nativeBridge");H5 端
// 同步调用
const userInfo = window.nativeBridge.getUserInfo();
console.log(userInfo);
// 异步调用(iOS 需要回调函数名)
window.nativeBridge.getUserInfo('handleUserInfo');
function handleUserInfo(data) {
console.log('收到用户信息:', data);
}WebView 与原生通信
http://localhost:8090/archives/webview-yu-yuan-sheng-tong-xin