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上,这样就可以实现了原生访问网页代码的操作。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。