在左側為已經上線的 H5 頁面，右側為同代碼的小程序頁面，其中只需要更改小部分平臺差異代碼和更新下 webpack 的建構配置就可以直接運行。
在未來最理想的狀態是，可以一套代碼可以直接跑在多端：WEB、小程序（微信和支付寶）、Native（藉助weex）。
當然從產品的層面，我們不建議這麼做，各個端有自己的差異性，我們期望的只是開發和調試體驗一致。
不得不說對於會vue的人來說，使用mapvue開發小程序基本就是0成本，看一遍文檔就能直接上手開發小程序。當然mapvue框架也有很多需要吐槽的地方：比如不支持slot，導致封裝公共組件非常的不方便；不支持vue-router，不過通過引入mpvue-router-patch可以在 mpvue 中使用 vue-router 兼容的路由寫法
遇見的一些問題：
- 在mapvue裡面如果在A頁面的created鉤子函數里面進行了一些初始化操作，但是在B頁面加載的時候也會執行A頁面的created鉤子函數里面的初始化操作
- 小程序裡面使用css的background-image是無效的，除非將圖片的放在服務器端才可以。（對於習慣使用background-image佈局的人來說是非常難受的）
- web-view組件，由於公司只是將部分頁面遷移到小程序中，不可避免會存在小程序頁面與h5的頁面互相跳轉的情況，這種情況就需要使用web-view了。
小程序跳轉h5頁面：
注意：
① src的地址需要在小程序管理後臺配置域名白名單，h5頁面內部請求的api接口不需要配置request合法域名。
② 路由查詢參數裡面的值不能使用中文，不然在iOS手機上會直接白屏，但是安卓手機上沒有問題
webViewUrl = 'https://www.xxx.com?name=張三&id=1' // 這種情況會白屏，因為name的值為中文。可以使用decodeURIComponent對查詢參數進行編碼
③ webViewUrl的地址必須是有效證書https的地址，並且頁面內請求的https接口也必須是擁有有效證書，不然也會導致頁面報錯
④ webview裡面的h5地址是不能調用微信支付，如果需要進行微信支付需要跳回到小程序裡面支付。ps：一個小程序只能綁定一個商戶號，如果需要接入第三方支付賬戶。只能為三方賬戶申請一個小程序，然後在將三方賬戶的商戶號綁定給新的小程序。
h5頁面跳回小程序：
注意：
① 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解析出來的聊天數據對象，去掉對象中沒有用的屬性和方法
分享到:
閱讀更多 技術囧途 的文章
