vue實(shí)現(xiàn)與安卓、IOS交互的方法
更新時(shí)間：2018年11月02日 09:45:13 作者：Sherry_瑞雪
這篇文章主要介紹了vue實(shí)現(xiàn)與安卓、IOS交互的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
方案背景
- IOS用的是jsBridge插件實(shí)現(xiàn)調(diào)用、傳參、回調(diào)的
- 安卓是在window掛載方法和掛載回調(diào)的
IOS實(shí)現(xiàn)方案
調(diào)用原生方法封裝如下
function setupWebViewJavascriptBridge (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 = 'https://__bridge_loaded__'
document.documentElement.appendChild(WVJBIframe)
setTimeout(() => {
document.documentElement.removeChild(WVJBIframe)
}, 0)
}
function callhandler (name, data, callback) {
setupWebViewJavascriptBridge(function (bridge) {
bridge.callHandler(name, data, callback)
})
}
實(shí)際調(diào)用如下
callhandler(functionName: string, params: object, res => {})
注冊(cè)方法給原生
registerhandler (name, callback) {
// 安卓
window[name] = res => {
let data = JSON.parse(res)
callback(data)
}
// IOS
setupWebViewJavascriptBridge(function (bridge) {
bridge.registerHandler(name, function (data, responseCallback) {
callback(data, responseCallback)
})
})
}
安卓實(shí)現(xiàn)方案
調(diào)用原生方法
window.HTTP_TEST.functionName()
定義回調(diào)方法/注冊(cè)方法給原生
window['functionName'] = res => {}
特殊說(shuō)明
- 安卓在交互中的參數(shù)傳遞只能支持string類型，對(duì)象參數(shù)要轉(zhuǎn)成string傳遞
- 因?yàn)榘沧康幕卣{(diào)方法名是固定的，同一方法同時(shí)請(qǐng)求兩次以上時(shí)，有可能只得到一次回調(diào)。如果用隨機(jī)數(shù)處理就會(huì)不斷地在window上掛載新的函數(shù)，調(diào)用次數(shù)過(guò)多可能會(huì)出問(wèn)題，所以目前是避免同時(shí)請(qǐng)求同一方法來(lái)解決的。如果有需求避免不了，那還是要用隨機(jī)數(shù)解決。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2.0實(shí)現(xiàn)組件數(shù)據(jù)的雙向綁定問(wèn)題
這篇文章主要介紹了Vue2.0實(shí)現(xiàn)組件數(shù)據(jù)的雙向綁定問(wèn)題，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-03-03
vue.js實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的方法教程
這篇文章主要給大家介紹了關(guān)于vue.js實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的方法教程，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
vue如何實(shí)現(xiàn)跨頁(yè)面?zhèn)鬟f與接收數(shù)組并賦值
這篇文章主要介紹了vue如何實(shí)現(xiàn)跨頁(yè)面?zhèn)鬟f與接收數(shù)組并賦值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue3.0翻牌數(shù)字組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue項(xiàng)目接入Paypal實(shí)現(xiàn)示例詳解
這篇文章主要介紹了Vue項(xiàng)目接入Paypal實(shí)現(xiàn)示例詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章較詳細(xì)的給大家介紹了vue組件之間傳值的方法，在 Vue 中，可以使用props向子組件傳遞數(shù)據(jù)。具體傳遞方法大家跟隨腳本之家小編一起看看吧2018-08-08
今天小編就為大家分享一篇vue 更改連接后臺(tái)的api示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue使用Prism實(shí)現(xiàn)頁(yè)面代碼高亮展示示例
這篇文章主要為大家介紹了Vue使用Prism實(shí)現(xiàn)頁(yè)面代碼高亮展示示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。今天我們來(lái)介紹VueJs 搭建Axios接口請(qǐng)求工具，需要的朋友參考下本文吧2017-11-11
這篇文章主要為大家詳細(xì)介紹了vue組件開發(fā)之slider組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08