前言
背景是项目组做的是一个类似唱吧跟全民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对个别机型做到兼容。
网友评论