vue實(shí)現(xiàn)與安卓、IOS交互的方法
更新時(shí)間：2018年11月02日 09:45:13 作者：Sherry_瑞雪
這篇文章主要介紹了vue實(shí)現(xiàn)與安卓、IOS交互的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
方案背景
- 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 => {}
特殊說明
- 安卓在交互中的參數(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ù)過多可能會(huì)出問題，所以目前是避免同時(shí)請(qǐng)求同一方法來解決的。如果有需求避免不了，那還是要用隨機(jī)數(shù)解決。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue項(xiàng)目如何引入公共頭部底部問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
淺析Vue中權(quán)限管理的實(shí)現(xiàn)
在前端開發(fā)中,權(quán)限管理是一項(xiàng)至關(guān)重要的任務(wù),本教程將深入探討如何在?Vue.js?項(xiàng)目中實(shí)施權(quán)限管理,并詳細(xì)講解如何實(shí)現(xiàn)到按鈕級(jí)別的細(xì)粒度控制,希望對(duì)大家有所幫助2024-11-11
Vue2和Vue3的nextTick實(shí)現(xiàn)原理
Vue 中的數(shù)據(jù)綁定和模板渲染都是異步的，那么如何在更新完成后執(zhí)行回調(diào)函數(shù)呢？這就需要用到 Vue 的 nextTick 方法了，本文詳細(xì)介紹了Vue2和Vue3的nextTick實(shí)現(xiàn)原理，感興趣的同學(xué)可以參考一下2023-04-04
這篇文章主要介紹了vue項(xiàng)目中使用scss的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了Vue字符串中如何添加多個(gè)空格問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
在?Vuex?中,actions?的設(shè)計(jì)默認(rèn)只支持單個(gè)參數(shù)傳遞,這有時(shí)會(huì)限制我們的使用場(chǎng)景,下面我將詳細(xì)介紹幾種處理多參數(shù)傳遞的解決方案,從基礎(chǔ)到高級(jí),幫助您靈活應(yīng)對(duì)各種需求,需要的朋友可以參考下2025-04-04
django中使用vue.js的要點(diǎn)總結(jié)
在本篇文章里小編給各位整理了關(guān)于django中使用vue.js需要注意的地方以及相關(guān)知識(shí)點(diǎn)，需要的朋友們跟著學(xué)習(xí)參考下。2019-07-07
這篇文章主要介紹了vue中touch和click共存的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
el-date-picker日期時(shí)間選擇器的選擇時(shí)間限制到分鐘級(jí)別
文章介紹了如何使用el-date-picker 組件來限制用戶選擇的時(shí)間,禁止選擇當(dāng)前時(shí)間的日期及時(shí)分,同時(shí)允許選擇其他日期的全天時(shí)分,通過設(shè)置 `pickerOptions` 對(duì)象的屬性,可以實(shí)現(xiàn)對(duì)日期和時(shí)間的精確控制,感興趣的朋友跟隨小編一起看看吧2025-01-01
Vue3警告:Failed to resolve component:XXX的詳細(xì)解決辦法
最近在一個(gè)vue3項(xiàng)目中遇到了報(bào)錯(cuò),整理了些解決辦法,這篇文章主要給大家介紹了關(guān)于Vue3警告:Failed to resolve component:XXX的詳細(xì)解決辦法,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05