vue調(diào)用原生方法交互解讀

更新時間：2022年09月21日 16:51:27 作者：前端菜中菜

這篇文章主要介紹了vue調(diào)用原生方法交互，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue調(diào)用原生方法交互

目前在做一個H5應(yīng)用；需要調(diào)用原生方法進行交互；特此做一個記錄。

技術(shù)棧 : vue版本2.6 vant版本 2.12

第一步

聲明一個rpcFn.js文件進行原生交互阿里橋封裝

const rpc = function (url, params) {
? return new Promise((res, ref) => {
? ? try {
? ? ? // 呼起 JSBridge阿里橋', url:路徑; params:參數(shù);
? ? ? window.AlipayJSBridge.call(url, {
? ? ? ? ...params
? ? ? }, (result) => {
? ? ? ? let code = result.code * 1;
? ? ? ? // result:回調(diào)數(shù)據(jù)源;
? ? ? ? // 判斷狀態(tài) 是否 200
? ? ? ? if (result && code === 200) {
? ? ? ? ? res(result);
? ? ? ? } else {
? ? ? ? ? // 這里可以統(tǒng)一做一些 提示操作
? ? ? ? ? ref(result);
? ? ? ? }
? ? ? });
? ? } catch (e) {
? ? ? ref(e, '設(shè)備不支持');
? ? }
? });
};
export default rpc;

第二步

聲明rpc.js 引入封裝的 rpcFn 原生方法; 進行公共封裝

import rpcFn from './rpcFn.js';
// 引入整個vue 實例
import Vue from 'vue';
const newVue = new Vue();
// 這里做一個數(shù)據(jù) 遍歷 需要增加原生方法的話直接在rpcList增加
const rpcList = [
? // 百度定位
? 'baiduPositioning',
? // 人臉識別認證
? 'peopleFace',
? // 拍照
? 'gotoCamera',
? ...
];
const rpcListLength = rpcList.length;
const rpcFuncObj = {};
for (let i = 0; i < rpcListLength; i++) {
? const rpcName = rpcList[i];
? //firstLetterToUpperCase 方法 將 rpcList 每一項的首字母轉(zhuǎn)大寫 peopleFace => PeopleFace
? const rpcFuncName = `rpc${newVue.firstLetterToUpperCase(rpcName)}`;
? rpcFuncObj[rpcFuncName] = function (params) {
? ? return rpcFn(rpcName, params);
? };
? // rpcName:每一項原生方法; rpcFuncName:掛載在vue實例上完整的原生方法;params:原生方法的參數(shù); peopleFace => rpcPeopleFace
}
// 方法導(dǎo)出
export default {
? ...rpcFuncObj
};

第三步

在 main.js 引入，掛載在vue 實例上

import rpc from 'rpc.js';
// 遍歷掛載在 vue實例上
Object.keys(rpc).forEach(rpcName => {
? Vue.prototype[rpcName] = rpc[rpcName];
});

第四步

在頁面中調(diào)用原生方法

<!--頁面按鈕執(zhí)行事件-->
<Button @click="handleClick()">按鈕</Button>
?
// 按鈕執(zhí)行 原生定位事件
handleClick() {
? // 這里 我們可以打印 this ; ps: this指向整個 vue實例
? console.log(this,'vue實例');
? this.rpcBaiduPositioning().then((res) => {
? ? //獲取原生定位數(shù)據(jù)
? ? console.log(res, "原生定位地址數(shù)據(jù)在這里");
? }).catch(rej => {
? ? Toast.fail(rej.message);
? });
};

vue和原生native交互使用

安卓與Vue交互方式

首先Vue調(diào)用安卓這方面不用說了，使用方式和html調(diào)用安卓Native方法一致，這里就不做多說了，下面重點要說的是安卓調(diào)用Vue的function，這里要特別說明下，安卓端調(diào)用代碼不變，主要是Vue端實現(xiàn)。

因為安卓與網(wǎng)頁之間的交互是通過window來實現(xiàn)的，但是因為Vue的的內(nèi)部實現(xiàn)邏輯對付function方法并不是掛載到window下的，所以安卓就無法通過window調(diào)用Vue當(dāng)中的方法，然后就導(dǎo)致了不管原生怎么修改代碼最后都無法實現(xiàn)調(diào)用網(wǎng)頁端的function代碼。

知道了原因解決起來就容易了，既然是因為Vue無法將function代碼掛載到window下，那么就手動將function方法掛載到window上就好了，這個實現(xiàn)起來也容易，無非就是在vue的oncrete或者mount方法下面使用window.funcName = this.funcName 或者**window.funcName = function(){}**這兩種方法實現(xiàn)將function掛載到window上，這樣就可以實現(xiàn)了原生訪問網(wǎng)頁代碼的操作。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: