框架选择:习惯用VUE的话就选择VUX吧,集成度高,文档详细等等,都是优点。
首先,既然是移动端页面,第一个逃不过的坑就是页面适配问题了。
1、大家可能第一想到的是rem单位,貌似很多人认为这个单位是解决该问题万能的,其实不是,这个方式并不是最好的方式。
html{
font-size:625%
}
2、还有一种就是利用js动态给html和body加font-size
,大家一定想到的是lib-flexible这个库了(不清楚的自己百度)。这是个不错的解决方案(配合第一种方式),之前淘宝也在用,不过现在基本可以放弃了。
3、最后一种,也是我现在用的,可参考这篇文章,说的已经非常详细了。
说完适配这个坑,接着说说一些神奇的坑。
1、微信在进入后台的时候,当你的页面还打开着,并且你的某些ajax请求是在这之后发起的,你可能要问什么样的请求会在这个时候发起呢,举个例子:
document.addEventListener('visibilitychange',async ()=>{
if (document.visibilityState === 'hidden') { //改为visible
this.$get('/api/...').then(res=>{ })
}
});
当有些操作是在你判断页面可见性的时候请求的,这时候ajax请求是不会成功的,用Pormise的时候回直接被catch到,解决方法就是把请求放在document.visibilityState
为visible
的时候,或者尽量避开这样的设计。
2、关于页面后退不刷新问题。
当你在页面执行history.back()
方法的时候,页面是不会刷新的,如果想要刷新解决方式有很多,比如location.replace(document.referrer)
,方式百度一下就有很多,可选择你想要的一个就行。
3、微信页面存在独有的浏览器api
第一次做微信公众号页面的时候还不知道有这个东西,直到产品经理说希望能实现点击底部的返回按钮(ios)的时候,能关闭页面回到聊天界面。查了查资料发现,微信浏览器环境下有很多独有的api。具体有哪些可以参考这个网址,当然有些可以通过jssdk实现。