前言:
安卓 ios开发,嵌入了h5页面,h5需要客户端的token去请求接口,客户端与h5怎么交互啊?获取参数的方法都有哪些?
方法一:
H5与原生app交互,需要WebViewJavascriptBridge,废话不多直接上代码,下面是项目中的封装bridge.js的全部代码(示例代码为vue)
//iOS 交互声明
function connectWebViewJavascriptBridgeIOS(callback) {
if (window.WebViewJavascriptBridge) {
return callback(window.WebViewJavascriptBridge)
}
if (window.WVJBCallbacks) {
return window.WVJBCallbacks.push(callback)
}
window.WVJBCallbacks = [callback]
let WVJBIframe = document.createElement('iframe')
WVJBIframe.style.display = 'none'
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'
document.documentElement.appendChild(WVJBIframe)
setTimeout(() => {
document.documentElement.removeChild(WVJBIframe)
}, 0)
}
//Android 交互声明
function connectWebViewJavascriptBridgeANDROID(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge);
} else {
document.addEventListener(
"WebViewJavascriptBridgeReady",
function () {
callback(WebViewJavascriptBridge);
},
false
);
}
}
export default {
//H5调用Native
callhandler(name, data, callback) {
//iOS的方法
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
connectWebViewJavascriptBridgeIOS(function (bridge) {
bridge.callHandler(name, data, callback)
})
}
//Android方法
if (/(Android)/i.test(navigator.userAgent)) {
connectWebViewJavascriptBridgeANDROID(function (bridge) {
bridge.callHandler(name, data, callback)
})
}
},
//Native调用H5
registerhandler(name, callback) {
//iOS的方法
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
connectWebViewJavascriptBridgeIOS(function (bridge) {
bridge.registerHandler(name, function (data, responseCallback) {
callback(data, responseCallback)
})
})
}
//Android方法
if (/(Android)/i.test(navigator.userAgent)) {
connectWebViewJavascriptBridgeANDROID(function (bridge) {
bridge.init(function (message, responseCallback) {
if (responseCallback) {
// responseCallback(data);
}
});
bridge.registerHandler(name, function (data, responseCallback) {
callback(data, responseCallback)
})
})
}
},
}
然后挂载到vue的原型方法上,在main.js中进行如下配置
import Bridge from "@/config/bridge.js" //此路径根据实际bridge.js路径填写
Vue.prototype.$bridge = Bridge
实际使用
methods: {
// h5调用原生方法,testWebViewBridge为原生app定义的方法名。action为h5传递给原生app的参数,可以为多个。data为原生app传递给h5参数
goNative() {
const vm = this;
this.$bridge.callhandler(
"testWebViewBridge",
{ action: "pick me" },
data => {
vm.ddd = data;
// 处理返回数据
}
);
},
// h5注册方法,供app调用
iosToH5(){
},
},
mounted() {
// 原生app调用h5方法,iosToH5是methods中定义的方法名。
const vm = this;
this.$bridge.registerhandler("iosToH5", (data, responseCallback) => {
// data是原生app传递给h5的参数
vm.native_data = data;
});
}
方法二:
把参数传到h5的链接里,用类似?xx=xx&xx=xx的形式拼接。
复制非路由传参即可https://blog.csdn.net/qq_46003166/article/details/104430043