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

小伙伴们在用vue开发h5项目特别是移动端的项目，很多都是打包后挂载在原生APP上的，那就少不了与原生交互了，我把我踩的一些坑，拿出来给大家分享下。
1.通过url传输数据：（一般是在入口页面传下app的用户信息进来供vue h5使用）

由交互引发的对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.οnlοad=function(){//调用交互}，在window加载完成以后触发交互，而且此时间节点在vue的生命周期是不存在的，也是在mounted、created钩子后发生的，这个原生的方法还是很棒的，完美解决~！
————————————————
版权声明：本文为CSDN博主「易水人去丶明月如霜」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/q3254421/article/details/84928343

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

vue 获取安卓原生方法_vue与原生app的对接交互的方法(混合开发)
小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我把我踩的一些坑,拿出来给大家分享下.1.通过url传输数据:(一般是在入口页面传下app ...
[vue] 你有使用做过vue与原生app交互吗？说说vue与ap交互的方法
[vue] 你有使用做过vue与原生app交互吗?说说vue与ap交互的方法[vue] 你有使用做过vue与原生app交互吗?说说vue与ap交互的方法我的做法就是让app在webview把app的 ...
Android原生app与H5交互
1.开发背景. 随着当前开发迭代要求速度更快,改动更灵活,不需要发布版本就能实时更新app的内容,故当前H5制作界面越来越受到科技公司和开发者的欢迎. 2.实现交互今天记录一下开发过程中用到的H5交 ...
关于原生android与H5交互的方法
文章目录原生android与H5交互 android调用H5方法 H5调用android 原生android与H5交互前面讲解方法,结尾放代码 android调用H5方法首先需要一个WebVie ...
手机应用开发的原生app,WEBAPP,混合app的认识
手机应用开发的原生app,WEBAPP,混合app的认识(2014-12-0112:55:19) 转载 ▼ 分类:IOS 正文开始原生应用.Web应用.混合应用优缺点分析原生App vs 移动We ...
你的app是由旧版打造_「软件测试基础知识」Web APP和原生 APP的不同
原生APP访问和兼容的能力也比较好,可以支持在线或者离线消息推送或是进行本地资源访问,以及摄像.拨号.蓝牙.功能的调取.原生APP开发有许多的优势,如原生APP是针对不同的平台为用户提供不同的体验.节 ...
原生 APP、Web、混合 APP，三种开发模式有何不同？
前言原生 App 又称Native App,该开发针对 IOS.Android.Windows 等不同的手机操作系统要采用不同的语言和框架进行开发:无论是从开发难度,价格还是周期来看,原生开发都更复 ...
原生App与Web APP优劣势分析
现如今APP开发有两个主流的方向:原生App 以及移动Web App.那么您是否知道这两者有何区别?什么是原生APP,什么是web APP?今天小编在此对二者进行一个对比. ☛ 什么是原生APP 在智 ...
h5 移动开发 html页面跳转,iosh5混合开发项目仿app页面跳转优化
前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...

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

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

最新文章

热门文章