协同开发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