協同開發h5和小程序
??隨著小程序的崛起，越來越多的類似小程序（例如九大安卓廠商共同推出的快應用）這樣的平台開始發力，其中也包括一直存在的有較大競爭力的技術，例如谷歌的PWA。這些平台和技術的崛起，為前端帶來較大的挑戰，特別是我們這樣的初創企業：人力有限，但各個機會都想去嘗試。如何在節省資源投入的情況下，儘可能滿足業務需求嘗試各種平台，成為我們技術人員的一大挑戰。
??經過詳細的調研，我們認為目前有以下四個方案。
小程序載入h5方案。
??這是最初提到復用時，一拍腦袋立即想到的方案。因為小程序在17年底推出了webview，那自然，直接利用webview載入h5頁面就行了。這樣，我們只需要開發一套h5代碼就行。當然，研究下來，發現這一套基本不可行，因為至少有以下三個問題：
用戶體驗差。小程序的最大優勢之一就是體驗和性能，利用webview等於拋棄了這一優勢。
無法完成小程序登錄支付等閉環。webview無法完成微信登錄、微信支付等功能，js-sdk的介面非常有限。
綜上所述，這個方案適合無交互或者交互簡單的信息展示頁面。
weweb方案。
??weweb是一個兼容小程序語法的前端框架，可以用小程序的寫法，來寫web應用。如果你已經有小程序了，通過它你可以將你的小程序運行在瀏覽器中。如果你熟悉vue的語法，也可以使用wepy編寫小程序，再通過weweb轉換後將其運行在web端。初步來看，這個方案貌似可以滿足我們的要求；經過嘗試，我們也得到一些信息：
轉換後的代碼無法完全對等。存在部分js不支持和樣式變樣的異常。
小程序更新頻繁，weweb的支持度是否能夠保持待觀察。
??綜上所述，這個方案適合內容樣式簡單的頁面。
mpvue方案。
??mpvue是美團點評團隊推出的框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以運行在小程序環境中，從而為小程序開發引入了整套 Vue.js 開發體驗。經過實踐發現，mpvue相對較為穩定，api的差異也較weweb更小，做不大的變動，可以實現兩端復用。
??目前mpvue的start已經達到8000+，但仍不清楚項目應用範圍以及穩定性。據美團自稱，美團旗下小程序包括美團火車票12306搶票、美團汽車票和美團充電都在使用。針對這個方案，我們保持高度關注，重要性相對較低的方案可能會嘗試這個方案。後面也會針對這個方案進行深入的研究。
分別開發，產品可配置方案。
??從產品角度考慮，我們其實是建議不同端有不同的產品表現，也就是說h5和小程序，應該根據各自平台的差異性做不同的適配。但是，產品應該盡量做到可配置，而不是各自實現做重複的工作。
??針對不同平台端，實現不同的代碼；但是同一端的產品，盡量可配置化。這是我們目前這個階段的方案，在此基礎上，我們重點關注mpvue的發展。
參考文獻：
mpvue官網：https://github.com/Meituan-Dianping/mpvue
weweb官網：https://www.npmjs.com/package/weweb-cli
TAG:insightLabs |