vue调用原生方法交互解读

目录 vue调用原生方法交互 第一步 第二步 第三步 第四步 vue和原生native交互使用 安卓与Vue交互方式

vue调用原生方法交互

目前在做一个H5应用；需要调用原生方法进行交互；特此做一个记录。

技术栈 : vue版本2.6 vant版本 2.12

第一步

声明一个rpcFn.js文件 进行原生交互阿里桥封装

const rpc = function (url, params) {
? return new Promise((res, ref) => {
? ? try {
? ? ? // 呼起 JSBridge阿里桥', url:路径; params:参数;
? ? ? window.AlipayJSBridge.call(url, {
? ? ? ? ...params
? ? ? }, (result) => {
? ? ? ? let code = result.code * 1;
? ? ? ? // result:回调数据源;
? ? ? ? // 判断状态 是否 200
? ? ? ? if (result && code === 200) {
? ? ? ? ? res(result);
? ? ? ? } else {
? ? ? ? ? // 这里可以统一做一些 提示操作
? ? ? ? ? ref(result);
? ? ? ? }
? ? ? });
? ? } catch (e) {
? ? ? ref(e, '设备不支持');
? ? }
? });
};
export default rpc;

第二步

声明rpc.js 引入 封装的 rpcFn 原生方法; 进行公共封装

import rpcFn from './rpcFn.js';
// 引入整个vue 实例
import Vue from 'vue';
const newVue = new Vue();
// 这里做一个数据 遍历 需要增加原生方法的话直接在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 每一项的首字母转大写 peopleFace => PeopleFace
? const rpcFuncName = `rpc${newVue.firstLetterToUpperCase(rpcName)}`;
? rpcFuncObj[rpcFuncName] = function (params) {
? ? return rpcFn(rpcName, params);
? };
? // rpcName:每一项原生方法; rpcFuncName:挂载在vue实例上完整的原生方法;params:原生方法的参数; peopleFace => rpcPeopleFace
}
// 方法导出
export default {
? ...rpcFuncObj
};

第三步

在 main.js 引入，挂载在vue 实例上

import rpc from 'rpc.js';
// 遍历挂载在 vue实例上
Object.keys(rpc).forEach(rpcName => {
? Vue.prototype[rpcName] = rpc[rpcName];
});

第四步

在页面中调用原生方法

<!--页面按钮执行事件-->
<Button @click="handleClick()">按钮</Button>
?
// 按钮执行 原生定位事件
handleClick() {
? // 这里 我们可以打印 this ; ps: this指向整个 vue实例
? console.log(this,'vue实例');
? this.rpcBaiduPositioning().then((res) => {
? ? //获取原生定位数据
? ? console.log(res, "原生定位地址数据在这里");
? }).catch(rej => {
? ? Toast.fail(rej.message);
? });
};

vue和原生native交互使用

安卓与Vue交互方式

首先Vue调用安卓这方面不用说了，使用方式和html调用安卓Native方法一致，这里就不做多说了，下面重点要说的是安卓调用Vue的function，这里要特别说明下，安卓端调用代码不变，主要是Vue端实现。

因为安卓与网页之间的交互是通过window来实现的，但是因为Vue的的内部实现逻辑对付function方法并不是挂载到window下的，所以安卓就无法通过window调用Vue当中的方法，然后就导致了不管原生怎么修改代码最后都无法实现调用网页端的function代码。

知道了原因解决起来就容易了，既然是因为Vue无法将function代码挂载到window下，那么就手动将function方法挂载到window上就好了，这个实现起来也容易，无非就是在vue的oncrete或者mount方法下面使用window.funcName = this.funcName 或者**window.funcName = function(){}**这两种方法实现将function挂载到window上，这样就可以实现了原生访问网页代码的操作。 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

查看更多关于vue调用原生方法交互解读的详细内容...