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);
  });
};