前言：
最近接到小程序的開發需求，由於之前也沒開發過小程序，心情還是有點激動。先花15分鍾看一遍小程序官方文檔，再花10分鍾看一遍mpvue官方文檔，然后拿着原型圖和UI圖就開干。踩了不少坑，寫篇博客記錄一下。PS：小程序官方文檔地址：https://developers.weixin.qq.com/miniprogram/dev/ ，mpvue官方文檔： http://mpvue.com/
mpvue：
mpvue是一個使用 Vue.js 開發小程序的前端框架。框架基於Vue.js核心，mpvue修改了Vue.js的 runtime 和 compiler 實現，使其可以運行在小程序環境中，從而為小程序開發引入了整套Vue.js開發體驗。
不得不說對於會vue的人來說，使用mpvue開發小程序基本就是0成本，看一遍文檔就能直接上手開發小程序。當然mpvue框架也有很多需要吐槽的地方：比如不支持slot，導致封裝公共組件非常的不方便；不支持vue-router，不過通過引入mpvue-router-patch可以在 mpvue 中使用 vue-router 兼容的路由寫法。mpvue-router-patch的GitHub地址為：https://github.com/F-loat/mpvue-router-patch。更多mpvue項目可以在https://github.com/Meituan-Dianping/mpvue/issues/21找到。
遇見的一些問題：
（1）：在mpvue里面如果在A頁面的created鈎子函數里面進行了一些初始化操作，但是在B頁面加載的時候也會執行A頁面的created鈎子函數里面的初始化操作
（2）：小程序里面使用css的background-image是無效的，除非將圖片的放在服務器端才可以。（對於習慣使用background-image布局的人來說是非常難受的）
（3）：web-view組件，由於公司只是將部分頁面遷移到小程序中，不可避免會存在小程序頁面與h5的頁面互相跳轉的情況，這種情況就需要使用web-view了。
小程序跳轉h5頁面：
<web-view :src="webViewUrl"></web-view>
注意：
① src的地址需要在小程序管理后台配置域名白名單，h5頁面內部請求的api接口不需要配置request合法域名。
② 路由查詢參數里面的值不能使用中文，不然在iOS手機上會直接白屏，但是安卓手機上沒有問題
webViewUrl = 'https://www.xxx.com?name=張三&id=1' // 這種情況會白屏，因為name的值為中文。可以使用encodeURIComponent對查詢參數進行編碼
③ webViewUrl的地址必須是有效證書https的地址，並且頁面內請求的https接口也必須是擁有有效證書，不然也會導致頁面報錯
④ webview里面的h5地址是不能調用微信支付，如果需要進行微信支付需要跳回到小程序里面支付。ps：一個小程序只能綁定一個商戶號，如果需要接入第三方支付賬戶。只能為三方賬戶申請一個小程序，然后在將三方賬戶的商戶號綁定給新的小程序。
h5頁面跳回小程序：
<!-- html --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> // javascript wx.miniProgram.navigateTo({url: '/path/to/page'}) wx.miniProgram.postMessage({ data: 'foo' }) wx.miniProgram.postMessage({ data: {foo: 'bar'} }) wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true })
注意：
① h5跳回小程序只能是在當前h5頁面是在webview中才能跳回小程序，不能通過這種方法實現在同一公眾號下h5頁面直接跳轉到小程序中
② 通過這種方式只能跳轉到原來的小程序，如果需要跳轉到其他的小程序，需要先跳轉到原來的小程序中，然后再跳轉到其他小程序里面
（4）：textarea輸入框固定在頁面底部時在安卓手機上第一次獲取焦點不會將鍵盤頂起來，第一次以后就可以了。（這個是小程序自己的bug）
( 5）：重構IM聊天到小程序中：
① 原IM聊天是使用google-protobuf將聊天數據以二進制形式傳輸，但是在使用.proto文件打包后的protobuf.js時發現在瀏覽器中是默認將庫對象proto掛載到window對象上。由於小程序沒有window對象，所以在小程序中引入protobuf.js文件時報錯
解決方法：在protobuf.js開始位置定義一個proto對象，庫文件中重寫proto對象的屬性和方法就是在重寫我定義的proto對象，然后將該對象export出去
② 在安卓6.0以下的手機連接上websocket后然后就觸發onSocketError
解決方法：在低版本安卓中由於服務器的相同IP以及端口上安裝了多張證書導致。SSL協議只允許在一個IP端口上返回一張證書。可以通過分配不同的端口號或者不同IP地址解決這個問題。
③ 加載30條聊天記錄時（具體多少項和手機性能有關）導致小程序卡死。排查了很久找到了原因是因為數組里面的每一項由protobuf解析出來的聊天數據對象比較復雜，當數組中的數據超過30條時導致小程序卡死
解決方法：拿到protobuf解析出來的聊天數據對象，去掉對象中沒有用的屬性和方法
總結：
第一次開發小程序還是感覺上手挺容易的，但是在這過程中踩了很多坑，也填了很多坑。IM聊天部分是將原h5頁面重構到小程序中，h5原IM聊天頁面是由博客大神子慕大詩人搞的。關於websocket心跳重連和google-protobuf可以參考子慕大神的文章https://www.cnblogs.com/1wen/p/5808276.html、https://www.cnblogs.com/1wen/p/6509253.html