vue 和 原生交互

标签：cal   ack   注册   creat   indexof   blog   func   create   user   

交互设计到两种：

 1./原生调用vue 的方法，给vue 传值

//第一步：把方法注册到window 上，给原生调用,其中scanResult 是约定的方法名

created() {
  
  window.scanResult = this.scanResult;

},

/*第二步：原生调用Vue方法,返回结果给vue，就是function(v) 里面的v*/

scanResult:function(v){

  this.scanData = v ; /*在data 中进行定义赋值 scanData:“”*/

  this.scanData = JSON.parse(v) ;  /* 在data里面定义 scanData:{}, 如果返回的是对象则 转化为对象接受*/
  
},



 2. vue 调用原生的方法；涉及到  andiron和iOS

方法一

 goBack () {

       let u = navigator.userAgent
       let isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1; //g
       let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

       if (isAndroid) {

         window.VueToAndroid.over();   /*VueToAndroid 是和html通信的标签；over是方法名；，*/

       }else{

           window.webkit.messageHandlers.over.postMessage(null); /*iOS 的写法 over 是方法名*/
       }

},

方法二 ： 用封装后的dsbridge

安装
npm install dsbridge@3.1.3

在index.html 里面

<script src="https://unpkg.com/dsbridge@3.1.3/dist/dsbridge.js"> </script>

goBack () {

      let self = this;
      
      /*初始化*/
      var dsBridge = require("dsbridge")

       dsBridge.call("over");   /*这种写法是不考虑参数的情况;over 是原生提供的方法，暂时不考虑andiron和iOS 的分开的写法*/

},

dsBridge 的分享链接：

https://blog.csdn.net/yaojie5519/article/details/103637515/

vue 和 原生交互

标签：cal   ack   注册   creat   indexof   blog   func   create   user   

原文地址：https://www.cnblogs.com/emmawang1988/p/13215517.html