记录app webview内嵌vue单页应用所遇到的坑

框架

浏览数:526

2019-3-10

AD:资源代下载服务

前言

背景是项目组做的是一个类似唱吧跟全民k歌的软件,所以偶尔会做一些关于k歌的运营活动,这时候就需要在app的webview中内嵌h5来快速开发一个个活动,由于一个活动有许多模块是可以抽出来当组件用的,如轮播banner、歌曲榜单列表、评论互动区、参赛歌单等等,所以就有了用vue开发一个基于单页应用的活动模板,用于日常通用的k歌活动这样的想法。

so在这个过程中无可避免的还是踩了一些坑,所以记录之,先大致说下用到的技术栈:vue全家桶(vue/vue-router/vuex)、sass、axios还有一套ui框架mint-ui,大致也就这些。下面来扒扒都遇到哪些坑。

1.vue-cli脚手架打包的项目部署到服务器上打开空白
首先可以确保路径是没问题的,vue-cli打包生产环境直接修改config目录下的index文件即可。将assetsPublicPath指向你所要放置的服务器目录,并用最后一个文件夹名作为你的项目名。如 http://baidu.com/app/events/my_activity。 那路径没问题的话。问题出在哪里呢?经过排查,是vue-router中将mode设置为’history’的缘故。由于一开始以hash模式的url是带’#’号的,本来想着让url好看点,所以用了history模式。虽然在本地调试的时候没问题,但是不部署的话还是需要后台进行相关配置的。这里百度一大堆,不赘述了,随便贴个地址,看这里

2.webview上自带的坑
讲真的这个只能找你们移动开发的同事。比如我这边遇到的是H5页面内嵌的时候上拉下拉会出现回弹的效果,这是他们加上的,这个难免会对h5造成一些手势冲突。比如我只是想滑动底部的时间选择器来选时间,但是页面不受控制会自动上弹。还有就是定位在中部或底部的输入框,理应在弹出软键盘时自动将键盘顶上去的,这个也应该由移动端开发那边来做相关设置。

3.单页应用不重载页面导致无法调用IOS的某些回调函数
这个是真的坑。在浏览器上跑都好好的,内嵌进app的时候发现ios打开页面后一直有一朵小菊花在loading,尽管数据已经加载完成了。切换页面也一样,除非刷新页面。那问题来了,谁的锅?又是经过一系列排查,发现这个是单页应用跟移动端那边开发的控件相互作用引起的坑。(关我毛事?)那个loading控件是移动端那边用来判断webview加载情况的,在网络请求跟数据请求时都会调用打开这个控件,然而悲剧的是关闭这个控件也就是WebviewDidFinishLoad函数却必须是页面有进行重载才会发起调用的,也就是说loading你是开了,但是我单页应用怎么来都是在一个页面上操作,自然不会重载,所以也就导致了那朵小菊花一直在转,这也是为什么强制刷新的话可以关闭掉loading控件的原因。这个嘛安卓那边不会有问题,所以应该是ios开发那边的问题,就算loading也应该有个时长可以关闭,或者可以写个接口通过webview的形式让前端去手动调用关闭loading控件,都是可以的。

4.es6对于一些老旧的安卓机型和浏览器的兼容问题
这个一开始还是比较头痛的,毕竟是上了线才发现的问题,陆陆续续在后台收到一些安卓机的反馈,打开活动页面一片空白。看了下大多是安卓4.4.2还有一些4.4以下的安卓机型。这尼玛vuejs不是兼容到安卓4.4吗?所以一开始以为是axios跟mint-ui的问题,但后面发现其实不是。主要原因是对es6兼容不够到位,虽然vue-cli引入了babel对js语法进行降级,但是还是有些老旧的机型会发生各种各样的问题,这里需要引入一个叫babel-polyfill的包。所以你只需只在你引入import vue之前 import babel-polyfill进来就可以了,主要是为了让es6对个别机型做到兼容。