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 格式化时间日期函数小结
Mar 20 Javascript
js中this的用法实例分析
Jan 10 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
Angular的MVC和作用域
Dec 26 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
深入研究React中setState源码
Nov 17 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
python中doctest库实例用法
2020/12/31 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
电视购物广告词
2014/03/19 职场文书
yy生日主持词
2014/03/20 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
学校与家长安全责任书
2014/07/23 职场文书
工作年限证明模板
2014/11/01 职场文书
给老婆的检讨书
2015/01/27 职场文书
办公室岗位职责范本
2015/04/11 职场文书
交流会主持词
2015/07/02 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
一级电子管军用接收机测评
2022/04/05 无线电