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


Posted in Javascript onNovember 28, 2018

小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我最近就是在坐这个,踩了一些坑,拿出来给大家分享下。

0.通过url传输数据:(一般是在入口页面传下app的用户信息进来供vue h5使用)

methods: {
      // 接收url后的数据
      urltext() {
        let loc = location.href;  6         let n1 = loc.length;//地址的总长度
        let n2 = loc.indexOf("=");//取得=号的位置
        let outToken = loc.substr(n2 + 1, n1 - n2);//从=号后面的内容
        console.log(loc,n1,n2,outToken)
        this.outTokenPost(outToken) //传到处理函数
      },
}

1.原生APP提供一个接口对象的引用(例如一个扫码的接口,可能还有回调函数以获得扫码结果)

思路就是万物通过window 进行交互

// 将vue组件的要回调的函数暴露出去
mounted:function(){
      
        // 将subscanQRCallBack方法绑定到window下面,提供给外部调用
        window['scanQRCallBack'] = (result) => {
          this.subscanQRCallBack(result)
        }
   
    },

methods:{
      scan(){
        // alert('开始扫码了')
        window.client.startScanQR('OS与js交互',scanQRCallBack)// 通过window调用app提供的client对象
      },

      subscanQRCallBack(result){
        // alert('扫码结果6466:'+result);
        this.scanPost(result)
      },
}

由交互引发的对vue生命周期的思考

开发时遇到一个经典问题,需要在页面刚载入时与app交互判断是否显示一个弹窗。看似很简单,进入页面调一个交互方法即可,但这个需求的解决经历了几个步骤:

1、created

因为created时,实例就创建完成了,我开始的选择是在此生命周期挂载方法并调用交互,结果:页面闪退,猜测:实例虽有,但模板未编译挂载,app调用方法失败导致闪退

2、mounted

第二次将挂载和调用写在了mounted内,结果:页面闪退,猜测(误):挂载和调用靠的太近,可能方法未挂载完就直接调用,导致闪退

3、created+mounted

created内挂载方法,mounted内调用交互,结果:我的ios12无异常,几乎以为成功时,ios10还是发生了闪退,猜测ios12的webview对此问题进行了优化,考虑兼容性,方案不可行。

4、延时

猜测是window没有加载完便调用了window下的方法,导致闪退,对交互方法加了1s延时,成功!但体验一般,因为硬性的定时容易引发许多不可控的问题,而且弹窗延时的存在导致用户体验低下。

5、window.onload

onload 事件会在页面或图像加载完成后立即发生。mounted钩子里添加代码window.onload=function(){//调用交互},在window加载完成以后触发交互,而且此时间节点在vue的生命周期是不存在的,也是在mounted、created钩子后发生的,这个原生的方法还是很棒的,完美解决~!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
PHP PDO操作总结
Nov 17 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 #Javascript
vue实现微信分享功能
Nov 28 #Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 #Javascript
详解小程序rich-text对富文本支持方案
Nov 28 #Javascript
微信小程序实现简单评论功能
Nov 28 #Javascript
微信小程序实现省市区三级地址选择
Jun 21 #Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 #Javascript
You might like
laravel 关联关系遍历数组的例子
2019/10/10 PHP
浅谈Javascript面向对象编程
2011/11/15 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
快速入门Vue
2016/12/19 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
python 内置函数filter
2017/06/01 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
Python实现分段线性插值
2018/12/17 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
车工岗位职责
2013/11/26 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
机电系毕业生求职信
2014/07/11 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
2014年审计工作总结
2014/11/17 职场文书
结婚堵门保证书
2015/05/08 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers