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…

滾動穿透

當modal層不存在滾動時，modal顯示時，直接禁用touchmove即可。
當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次。。。稽核未通過，心態要穩住哈）

uni-app（優雅的“排雷”集錦）