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上，这样就可以实现了原生访问网页代码的操作。

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

赞 (0)

相关推荐

  • vue与原生app的对接交互的方法(混合开发)

    小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我最近就是在坐这个,踩了一些坑,拿出来给大家分享下. 0.通过url传输数据:(一般是在入口页面传下app的用户信息进来供vue h5使用) methods: { // 接收url后的数据 urltext() { let loc = location.href; 6 let n1 = loc.length;//地址的总长度 let n2 = loc.indexOf("=");/

  • vue实现与安卓、IOS交互的方法

    方案背景 IOS用的是jsBridge插件实现调用.传参.回调的 安卓是在window挂载方法和挂载回调的 IOS实现方案 调用原生方法封装如下 function setupWebViewJavascriptBridge (callback) { if (window.WebViewJavascriptBridge) { return callback(window.WebViewJavascriptBridge) } if (window.WVJBCallbacks) { return win

  • 三步搞定:Vue.js调用Android原生操作

    第一步: Android对Js的接口,新建AndroidInterfaceForJs.js import android.content.Context; import android.os.Build; import android.os.Handler; import android.os.Looper; import android.support.annotation.RequiresApi; import android.util.Log; import android.webkit.

  • 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 {    

  • ReactNative-JS 调用原生方法实例代码

    ReactNative-JS 调用原生方法实例代码

    第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule package com.mixture; import android.content.Context; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule

  • vue 使用外部JS与调用原生API操作示例

    vue 使用外部JS与调用原生API操作示例

    本文实例讲述了vue 使用外部JS与调用原生API操作.分享给大家供大家参考,具体如下: vue 使用外部JS 概要 在开发时我们会经常需要使用到外部的JS,这样我们需要引入外部js,然后进行使用. 实现方法 我们在开发的过程中需要使用到 sha256 将用户的密码进行加密传输. 我们对js进行一点点改造. function sha256_digest(data) { sha256_init(); sha256_update(data, data.length); sha256_final();

  • 多种方式实现JS调用后台方法进行数据交互

    项目开发过程中很多地方都需要前端和后台的数据交互,几种典型常用的方法如利用控件的AutopostBack属性.Button提交表单等等.但这些都是有条件的,AutoPostBack具有实时性但会刷新页面,Button提交表单不能实现数据交互的实时性.当然说到前台与后台的数据交互更不能漏掉ajax,ajax实现前台与后台数据的异步交互,并且保证实时的.局部刷新.但有些数据不需要异步交互,例如当交互的数据是下一步执行的条件时,就必须要等到数据前台与后台数据交互完成后才能继续执行程序.所以对于掌握js

  • 原生js调用json方法总结

    Ajax基础 ajax:无刷新数据读取,读取服务器上的信息 HTTP请求方法: GET:用于获取数据,如浏览帖子 ajax.judgeXmlHttpRequest('get', 'index.php', function(data){ alert(data); //这是服务器返回的数据 }) POST:用于上传数据,如用户注册 var dataJson = { name: 'ys',age: 123 } ajax.judgeXmlHttpRequest('post', 'index.php',

  • 对vue中methods互相调用的方法详解

    如下所示: 最近在学习vue,并用vue+vue-router+axios+elementUI做了一个pos收银系统的前端页面,但是中间遇到methods里的方法调用问题.本身源码是没有调用的,但是我想直接调用多方便,结果出错了--然后百度了一波,终于解决了~ 分享并做个笔记. delAllOrderList:function(goods) { this.tableData = []; this.totalCount = 0; this.money = 0; }, checkout:functi

  • 详解VUE调用本地json的使用方法

    详解VUE调用本地json的使用方法

    开始的时候我以为,用vue去调取json要多么的麻烦,完咯就先去的百度,找了几个,看上面又要配置这配置那的,看的我都头大,像一些思维逻辑清晰的肯定不会出现这种情况. 下面我说下我这的情况,大家依情况代入 当然vue你刚开始创建的话,你是要去配置下东西,下面我说的是你的项目能够跑起来的情况,完咯再去想办法去引用json,当然我这里用的也是axios的获取方法,如果不是这种方法的可以带过了 首先你要知道那你的json应该放在哪个文件夹下(普通引用)如果你想写的有自己的规范,可以按照你自己的方式来.在

  • vue项目中在外部js文件中直接调用vue实例的方法比如说this

    一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app

  • Laravel使用原生sql语句并调用的方法

    有一些sql语句比较复杂,用构造器还不如直接用sql来的方便,我们在laravel中使用原生语句,首先要在开头use DB,然后: $arr = DB::select("select id,sum(parents+1) as total_people from orders where game_id=6 and pay_status=1 and hotel_id=5"); 接下来,我们程序里怎么获取到查询到的值呢? 查询到的是一个数组,但是里面的内容属于对象,我们要这么调用: $ar

  • python和js交互调用的方法

    后台代码都是利用的 1.[get方式]使用jquery的get json与后台交互 前端js代码片段 var data= { 'a': $('input[name="a"]').val(), 'b': $('input[name="b"]').val() } $.getJSON($SCRIPT_ROOT + '/_add_numbers',data, function(data) { $('#result').text(data.result); $('input[

随机推荐