uni-app（優雅的「排雷」集錦）

http請求

uni.request二次封裝

h5跨域問題

這個時候你可能會感受萬事大吉了，默默地打開TERMINAL快速地敲擊你的鍵盤，

npm run dev:mp-weixin

npm run dev:h5

小坑：小程序端接口返回字段值爲null時，null以字符串形式被渲染在頁面上

h5端看似一點問題沒有，接口訪問很是順利，看看微信小程序端，頁面上怎麼一堆null。打開network一看，字段明明返回的是null，爲啥會變成null字符串被渲染出來。

解決方案以下：

優化：讓async更加優雅（模仿node異步返回格式[error, res]）

優化：防抖問題（表單被屢次提交,表單字段規則校驗,scroll監聽）

當你不理解防抖是啥的時候，點擊你的'掘金'頭像->'寫文章'->開始編寫你的blog,你會發現有自動保存的效果，打開network仔細觀察，你會發如今你編寫blog過程當中2-3秒沒有輸入文字，就會發一個updateDraft請求去保存你的blog到草稿箱內~~~是否是瞬間感受懂了些什麼

樓下代碼get的是一位某東的高級前端小姐姐的blog，淺析一波

---

仿Vue-router(uni-simple-router)

具體的能夠移步大佬的插件地址：user-gold-cdn.xitu.io/2019/8/8/16…

這樣就能夠和vue同樣優雅地操做router了，頁面級路由獨享守衛（beforeEnter）、全局路由守衛（beforeEach、afterEach）、基本的push、replace等。

---

頁面刷新 vuex清除問題

vuex持久化：vuex-persistedstate 加 mp-storage（支持uni多端的Storage墊片），在開發環境還能夠打印vuex log，vuex能夠走localStorage，sessionStorage，cookie等。

我在項目中選擇是：localStorage。

這時候咱們會想，若是我只想持久化store裏的部分key，另外一部分的key不作持久化。

下面就是個人解決方案。

---

登陸（微信內置瀏覽器免登、微信小程序免登、常規的驗證碼登陸）

常規的驗證碼登陸

走JWT校驗便可。token本地緩存便可。

微信內置瀏覽器免登

（直接走微信SDK就好了，重定向換code拿openId便可。瞬移連接：mp.weixin.qq.com/wiki?t=reso…）

微信小程序免登（支付寶小程序相似，authCode）

uni.login拿code。首次登陸code+mobile+icode丟給後端，後端把openId入庫。再次登陸時，code丟給後端，後端經過當前用戶的openId和表裏的openId比對，若相同便可免登，反之難免登，繼續走常規登陸流程。

---

支付（支付寶h5支付、微信小程序支付、微信內置瀏覽器支付）

Tips：支付難點在後端。前端就默默地吃着瓜便可

支付寶h5支付

// 示例代碼（基本的form表單提交）

const div = document.createElement("div");

div.innerHTML = res;

document.body.appendChild(div);

document.forms[0].submit();

微信小程序支付

uni.requestPayment() 各類微信支付字段驗籤便可（如nonceStr、paySign等）。

微信內置瀏覽器支付

走微信SDK，各類微信支付字段驗籤便可（如nonceStr、paySign等）瞬移連接：pay.weixin.qq.com/wiki/doc/ap…）

---

組件封裝

props傳參（格式校驗、值validate等），slot插槽（使用最頻繁的是做用域插槽）。項目中自定義組件有：支付鍵盤組件、filter篩選組件（帶吸附置頂）等。

封裝這些組件，咱們有沒有想過，咱們如今封裝的組件知足的需求範圍僅僅只是該項目，如何能像antd、element同樣能知足百分之90甚至更多的業務需求呢。這時候能夠移步某阿里大佬的blog： juejin.im/post/5d3721…

---

滾動穿透

1. 當modal層不存在滾動時，modal顯示時，直接禁用touchmove便可。
2. 當modal層有滾動時， page{ position:fixed; top:0; height:100%; overflow:hidden; } modal層使用scroll-view，這樣就能解決滾動穿透問題了。

---

微信小程序受權禁用問題（地圖定位受權chooseLocation、微信步數受權getRunData、微信我的信息getUserInfo）

舉例： 首次進入小程序、按鈕手動觸發getUserInfo的時候，會彈出微信受權。若是你點「取消」後會拒絕受權，(Tips:在不手動刪除小程序的狀況下，用戶拒絕受權以後，再次調用getUserInfo等權限api將不會彈受權框，直接走getUserInfo的fail回調了），這樣的交互很是的不友好。

解決方案： getSetting去獲取用戶受權狀況，若用戶受權關閉，showModal引導用戶去手動開啓微信受權。若是用戶點擊modal的「肯定」，直接去調取openSetting（打開設置界面，引導用戶開啓受權）。若是用戶點擊modal的「取消」，下次進入小程序仍是會走getSetting的showModal提示用戶去手動開啓受權。

---

調試

h5端： vconsole插件能讓你真機模擬是查看log日誌，方便及時找到問題，並解決。

小程序端： 各大廠子的真機調試都已經十分完善。微信小程序近期還更新了自動化測試（node版本），方便測試。

---

最後的戰役：發佈小程序，發佈h5

h5發佈：仍舊走jenkins發佈，和常規的vue、react的web端項目同樣。

小程序發佈： 自檢 => 審覈 => 發版 （中間可能要經歷NNN次。。。審覈未經過，心態要穩住哈）