框架選擇:習慣用VUE的話就選擇VUX吧,集成度高,文檔詳細等等,都是優(yōu)點。
首先,既然是移動端頁面,第一個逃不過的坑就是頁面適配問題了。
1、大家可能第一想到的是rem單位,貌似很多人認為這個單位是解決該問題萬能的,其實不是,這個方式并不是最好的方式。
html{
font-size:625%
}
2、還有一種就是利用js動態(tài)給html和body加font-size,大家一定想到的是lib-flexible這個庫了(不清楚的自己百度)。這是個不錯的解決方案(配合第一種方式),之前淘寶也在用,不過現(xiàn)在基本可以放棄了。
3、最后一種,也是我現(xiàn)在用的,可參考這篇文章,說的已經(jīng)非常詳細了。
說完適配這個坑,接著說說一些神奇的坑。
1、微信在進入后臺的時候,當你的頁面還打開著,并且你的某些ajax請求是在這之后發(fā)起的,你可能要問什么樣的請求會在這個時候發(fā)起呢,舉個例子:
document.addEventListener('visibilitychange',async ()=>{
if (document.visibilityState === 'hidden') { //改為visible
this.$get('/api/...').then(res=>{ })
}
});
當有些操作是在你判斷頁面可見性的時候請求的,這時候ajax請求是不會成功的,用Pormise的時候回直接被catch到,解決方法就是把請求放在document.visibilityState為visible的時候,或者盡量避開這樣的設計。
2、關于頁面后退不刷新問題。
當你在頁面執(zhí)行history.back()方法的時候,頁面是不會刷新的,如果想要刷新解決方式有很多,比如location.replace(document.referrer),方式百度一下就有很多,可選擇你想要的一個就行。
3、微信頁面存在獨有的瀏覽器api
第一次做微信公眾號頁面的時候還不知道有這個東西,直到產(chǎn)品經(jīng)理說希望能實現(xiàn)點擊底部的返回按鈕(ios)的時候,能關閉頁面回到聊天界面。查了查資料發(fā)現(xiàn),微信瀏覽器環(huán)境下有很多獨有的api。具體有哪些可以參考這個網(wǎng)址,當然有些可以通過jssdk實現(xiàn)。