随着小程序的崛起,越来越多的类似小程序(例如九大安卓厂商共同推出的快应用)这样的平台开始发力,其中也包括一直存在的有较大竞争力的技术,例如谷歌的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
领取专属 10元无门槛券
私享最新 技术干货