使用mpvue開發小程序

前言：

最近接到小程序的開發需求，因爲以前也沒開發太小程序，心情仍是有點激動。先花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能夠參考子慕大神的文章http://www.javashuo.com/article/p-ybaopgvt-hq.html、http://www.javashuo.com/article/p-uvbvfdnj-hs.html