項目初始化及項目前期準備：
-
項目框架選擇（mpvue），可以棄用mpvue框架了，官網不維護，社區不完整，可以改用原生開發（初始化命令: vue init mpvue/quickstart my-project）。
-
項目規範化，使用格式化工具，以及配合使用eslint，做好配置文件的編寫。做好打包build等配置。
-
項目配置文件配置，配置小程序的一些默認配置，路由，navigation，tabBar等信息,如
Window： {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “獨家記憶”,
“navigationBarTextStyle”: “black”,
“navigationStyle”: “custom” //使用自定義頭部時需要配置
}。
- 項目初始化之後，進行小程序靜態頁面開發。UI設計小程序時，若設計了特殊樣式的navigation和tabBar，需要使用自定義。前端開發時，需要充分考慮兼容android，IOS，以及近年出現的iPhoneX等長屏手機的樣式兼容問題。（比如iphone底部的tabBar要比其他手機高32px）
- 登錄流程問題：小程序沒有cookie，服務器端不能直接注入cookie，若需要使用cookie來做登錄，需要前端手動使用小程序的Storage來存儲cookie，並在發送請求時在header中添加cookie。調用wx.login登錄接口只是獲取微信的code臨時登錄態，需要通過接口來自定義登錄態。
- 進行交互開發前需要配置好，合法請求域名request，socket合法域名，uploadFile合法域名，downloadFile合法域名，所有域名都是使用https協議。這裏需要注意一點，需要操作圖片時，必須使用wx.downloadFile，或者wx.getImageInfo獲取圖片信息後在進行操作，如果需要操作 微信頭像，需要將微信頭像的域名https://wx.qlogo.cn配置到合法downloadFile域名裏（本項目需要繪製頭像到海報上，初始頭像使用的是微信頭像，忘記配置微信頭像地址，從而繪製失敗）。
- 本項目需要使用字體功能（有3種方案實現），本項目使用微信提供的api：wx.loadFontFace實現，使用字體功能時，一定需要對文件地址做好配置cors跨域配置，content-type：type/ttf*配置（https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html），使用css引用fonts的話轉換成base64，但是一般體積太大，不可用。
項目開發中遇到的坑：
- 微信提供的Api：wx.createSelectorQuery()，若元素是通過接口數據動態加載顯示的，直接調用該方法時獲取高度會爲空，可以使用setTimeOut。
- 微信提供的Api：wx.createAudioContext,該方法要儘量在onLoad生命週期裏面初始化，不然很可能play()，pause()方法會失效。
- input輸入換行問題：
A.需要把字符串放置在標籤內部，不然\n等換行符小程序不能自動識別換行，空格；
B.後臺返回字段中的\n換行符不能換行需要另外處理(數據庫裏的\n換行符實際上是\n，當然返回到前端我們看到的是\n)，處理方法將\n通過replace方法轉換成\n，代碼附下：
let result = res.data.data
result = result.map(item => {
item.text = item.text.replace(/\n/g, ‘\n’)
return item
})。
-
繪製海報進行分享時遇到的問題：按步驟將海報的內容繪製後，最後需要調用ctx.draw()方法將內容繪製到畫布上，由於繪製頭像，二維碼等內容需要通過接口返回，如果直接同步調用該方法，會出現繪製空白，因爲接口還沒有返回成功就直接繪製了。可以使用async和await語法糖來解決(async 用於申明一個 異步function，而 await 用於等待一個異步方法執行完成)
-
IOS 的 new Date()方法，安卓和pc上面new Date(“2019-09-06 00:00:00”)不會報錯，但是在IOS上new Date(“2019-09-06 00:00:00”)會報錯(無效的參數)
解決方案：時間格式都使用new Date(“2019/09/06 00:00:00”)就是把-替換成/
dateStr.replace(new Regex(’-’,‘gm’),’/’)。 -
補充一個遇到的坑：IOS上new RegExp()方法報錯(本項目直接使用let=/…/g這種方式好像在ios也報錯)，本項目中需要在返回的set-cookies中截取需要的cookie值，起初使用new RegExp()的正則方法來截取，在安卓手機上正常，在IOS上真機調試時報錯，最後只能使用其他方法解決（使用split手動截取字符串）
-
小程序路由是個非常大的坑，儘量在做程序的時候一定要提前做好頁面邏輯，避免重複的跳轉，就是打開重複頁面，每個頁面的返回按鈕，也只返回上一個頁面。比如本項目的登錄，在項目中統一進行了401未登錄統一跳轉登錄頁的邏輯處理，但是使用手機自帶的物理返回時會強制返回上一個頁面一次。
項目開發中總結的經驗：
- 小程序開發由於路由跳轉方式的特殊性，大部分頁面需要進行初始化！儘量在每個頁面定義init()初始化方法，並在onLoad()生命週期裏調用。
- onShareAppMessage分享功能，往往需要在分享路徑path上加上參數(比如isFromShare),來判斷是由分享進入的，從而來做由分享內容進入的跳轉邏輯。
- 小程序還沒有監聽手機物理返回鍵的api，手機自帶的物理返回鍵，強制使用了 wx.navigateBack({delta: 1})強制返回上一個頁面。所以確定要做物理返回鍵的邏輯時，可以在onUnload週期裏通過getCurrentPages()方法來做邏輯跳轉。
- 由於小程序發佈需要審覈，時間有可能會很長，所以，可以將小程序的css樣式表，常用js方法，全部放置在cdn服務器上，在小程序中調用http鏈接，這樣如果小程序需要進行小範圍的主題樣式修改，小細節修改，可以直接修改cdn上的css，js資源，而不需要重新發布審覈（本項目沒有使用，有點混亂）
- 小程序上傳壓縮包上限 最大上傳2M（2M已經可以開發出很強大的功能了），如果項目有大量大體積圖片，也最好上傳到cdn服務器上後使用https鏈接，超過2M代碼，需要進行分包處理
- 小程序wx.showToast()與wx.hideLoading()衝突。使用wx.hideLoading()之後，如果再想要彈框提示，會發現在調試工具上正常顯示，但是在真機測試中就是不顯示。總結髮現是因爲wx.showToast()與wx.hideLoading()衝突。解決方法：避開在(同一層scope域)showToast前面使用wx.hideLoading()，因爲showToast本身就具備隱藏wx.showLoading()提示框的功能。
- 項目中使用了官方提供的scroll-view組件，實現加載更多功能，DOM結構如下
<scroll-view>
<div class=”list”>列表...</div>
<div class=”no-more”>沒有更多</div>
</scroll-view>
起初 在no-more樣式使用margin-bottom：90px來預留底部空隙，但是在IOS手機上由於手機自帶的彈性滾動功能導致無法滾動到底部。採用padding-bottom:90px方式則可以正常滾動到底部。