微信公眾號頁面開發(fā)遇坑指南

框架選擇:習慣用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.visibilityStatevisible的時候,或者盡量避開這樣的設計。
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)。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 28,770評論 1 45
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,091評論 1 92
  • 上兩個星期做了一個公司用于推廣的小活動,選擇了Vue的單頁面應用?!綱ue單頁面應用+微信網(wǎng)頁開發(fā)】套餐贈送了超值...
    大瑜_HiJack閱讀 8,604評論 5 33
  • vue去哪網(wǎng)跟學筆記 記錄學習點滴 1. 初始化項目 1.1 手機顯示配適 minimum-scale=1.0,m...
    noobakong閱讀 2,420評論 0 16
  • 葛林戴華德喜歡研究黑魔法,倒不是說他非要拿來做點什麼壞事,就像有些巫師癡迷研發(fā)新藥水,任何一種力量都能在適當時候派...
    十字路口霉少年閱讀 334評論 1 0

友情鏈接更多精彩內容