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("=");//取得=号的位置
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)
原生安卓app开发},
}
由交互引发的对vue⽣命周期的思考
开发时遇到⼀个经典问题,需要在页⾯刚载⼊时与app交互判断是否显⽰⼀个弹窗。看似很简单,进⼊页⾯调⼀个交互⽅法即可,但这个需求的解决经历了⼏个步骤:
1、created
因为created时,实例就创建完成了,我开始的选择是在此⽣命周期挂载⽅法并调⽤交互,结果:页⾯闪退,猜测:实例虽有,但模板未编译挂载,app调⽤⽅法失败导致闪退
2、mounted
第⼆次将挂载和调⽤写在了mounted内,结果:页⾯闪退,猜测(误):挂载和调⽤靠的太近,可能⽅法未挂载完就直接调⽤,导致闪退
3、created+mounted
created内挂载⽅法,mounted内调⽤交互,结果:我的ios12⽆异常,⼏乎以为成功时,ios10还是发⽣了闪退,猜测ios12的webview对此问题进⾏了优化,考虑兼容性,⽅案不可⾏。
4、延时
猜测是window没有加载完便调⽤了window下的⽅法,导致闪退,对交互⽅法加了1s延时,成功!但体验⼀般,因为硬性的定时容易引发许多不可控的问题,⽽且弹窗延时的存在导致⽤户体验低下。
5、load
onload 事件会在页⾯或图像加载完成后⽴即发⽣。mounted钩⼦⾥添加代码load=function(){//调⽤交互},在window加载完成以后触发交互,⽽且此时间节点在vue的⽣命周期是不存在的,也是在mounted、created钩⼦后发⽣的,这个原⽣的⽅法还是很棒的,完美解决~!
以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。