施德来：有赞电商小程序的实践

欢迎你们前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~

施德来，毕业于浙江大学计算机学院。曾任职于淘宝、网易，现任有赞前端技术负责人、电商小程序技术负责人。

由于有赞恰好在移动电商这个赛道上，整个行业都推进着咱们向前走。海量的商家有各自的需求，不断地在业务上督促咱们作一些事。此次我表明团队为你们汇报一下咱们被商家推进着作了哪些事，主要是关于技术方面的。

我眼中的小程序

首先和你们分享一下我眼中的小程序究竟是什么？关于小程序，有两大矛盾困扰着全部的移动开发者。一个是H5跨平台的开发速度很快，可是打开速度很慢，Native能力差。这是它的开放性所决定的，这是一个矛盾。另一个矛盾是Native的APP体验流畅、功能齐全，可是开发速度极慢、更新麻烦，并且ios和安卓要重复开发。

Write Once，Run Anywhere. 我知道你们都很喜欢这句话，我在后面加了一个Like Native。为了这个目标各大公司都给出了本身的方案，好比Google给出的方案是PWA，由于国内互联网的现状，这个PWA最多能够作到离线缓存、通知推送，因此其实PWA不是一个出路。其余也有一些方案，好比说Hybrid App，PhoneGap、lonic，充分使用Native的能力，但性能终究仍是有问题的。我给你们提供另一个方案：React Native、Weex，充分利用Native的能力，同时也能达到一处编写处处执行，并且也可以写得很快，至少不用写两次。可是它也有一些问题，事实上前端工程师是不可能抛开安卓和ios独立进行开发的，必定须要大量的适配，但这已经算是很大的进步了。

在我眼中如今只有一个选择：JS Native APP，微信本质上就是作JS Native APP，也就是小程序。它拥有JS Native APP的各类优势，不再须要安卓的工程师和ios的工程师帮助解决系统问题了。结合Win7自己的公众号、浏览器功能，以及它底层的账号能力，事实上微信已经有点像操做系统了。因此最终的结构是WeChat Operating System，什么事情均可以在微信里面完成，事实上就是这样。

有人提出这样的观点，随着微信小程序生态的完善，中国的操做系统可能就是要靠腾讯了。这就是我理解的小程序是JS Native APP中将来至关有竞争力的方案，由于一半以上的人都使用微信。不少H5中须要高阶能力才能解决的问题，被小程序用降维解决了。小程序为何要打包上传？实际上是由于微信能够经过必定的策略让这个包提早下载，你们若是推送太小程序新版本的话就会知道，包是分批更新的，我相信微信底层有更新这个小程序代码或小程序包的机制。它省去了H5中咱们要作的大量工做，好比原先要完成的异步加载等等。这些都是为了让打开速度更快，但若是代码被预先加载好了这些问题就都没有了。

以码农的视角介绍有赞微商城小程序

下面我将以码农的视角介绍一下有赞微商城小程序，或许哪天你在作一个小程序的时候，又须要有电商的功能。这时你能够经过小程序之间的跳转，在有赞注册一个小程序，把课程、服务等跳转到有赞这边，进行完购买流程再跳回去。在H5的年代咱们有几千个商家就是这么作的，在他们的APP中嵌入了咱们的H5，其实在小程序里面也是能够这么作的。

简单来说，有赞介入得很早，也有过彷徨。小程序是在2016年9月21日开始内测，2017年1月9日正式发布。其实咱们2016年就介入了小程序，当时对于小程序的理解又结合了小程序基于地理定位的特色，也就是发现附近的小程序。咱们以为餐饮是很好的切入口，固然电商是咱们的老本行，咱们很快就作出了电商的小程序。在1月9日小程序发布的时候，咱们同时也发布了有赞的电商小程序，那时只能将代码生成给到商家，让商家本身提交。由于当时微信没有提供相关的平台型能力，因此直到如今有些商家仍是用咱们一年前的代码。其实外界也对小程序有不少的质疑，大概持续了半年不到，咱们在这方面的投入其实也很少。随着微信官方推出了不少新的功能，你们对于小程序愈来愈清晰，商家的需求也愈来愈大，2017年下半年咱们开始发力，商家也开始更重视起来，到了2018年有赞小程序开始爆发。

首先声明一下这个数字是被我假装过的，由于如今不能给你们透露真实的数据，这是购买有赞小程序的每月的数量，趋势是没有问题的。你们能够简单看到，一开始的趋势是降低的。2017年1月的购买量比较大，刚发布的时候你们都过来用，后来发现好像也没什么。由于那时不少能力没有开放，群的能力、附近的小程序都没有开放，后来慢慢了提供更多的能力，你们慢慢开始有感受了。

下面来介绍一下咱们在小程序里面作了哪些功能。若是你们了解有赞就会知道，咱们是把H5里面大量的核心能力所有搬到小程序，同时也作了小程序特有的能力。后台包括店铺、商品、订单、客户、数据、营销工具、营销渠道，市面上有的各类营销工具基本上咱们都作了，有些是咱们独创的，有些是参考的。

这是咱们页面的编辑器，左边是编辑，右边是编辑出的页面，全部页面都是商家本身编的。如今咱们已经实现了每秒5万笔订单的处理能力，多门店选择能够根据地理位置选择门店。对于卖水果、卖蛋糕的商家比较有用。其余功能还有拼团、新人有礼、瓜分券等。瓜分券就是分享给本身的小伙伴，好比5我的来领才能领到。这是咱们小程序独有的功能，由于小程序在群的能力上，分享页面更方便一些。

简单来说，咱们的小程序包袱重、工做量大、场景复杂。首先，商家想要全部H5微商的功能，只是想要的比例不同，咱们要选择性地去搬。第二，咱们要服务海量的商家，提供他们须要的技术服务，咱们要生成海量的小程序。第三，H5微商城大量模块正在重构。这也是咱们的工做环境。

技术上的探索和积累

接下来说一下有关技术上的探索和积累，第一个问题是如何同时产出海量独立的微商城小程序，每一个商家一个版本还不一样。微信是提供这种能力的，同一份代码在不一样的ID提交后到微信的开发平台能够生成一个模板ID，拿到模板ID后全部商家在咱们的后台批量提交小程序。在提交的时候把商家特有的配置，包括商家的APP ID和底部导航信息一块儿提交给微信，微信再开始审核。

有赞拥有公共版的小程序和专享版的小程序，一套代码两个马甲，共用业务代码。若是小程序的名字是本身的，相似于垂直商城这种有本身的店且彻底独立的小程序就属于专享版。公共版是免费的，全部有赞的商家均可以使用。事实上二者的功能基本是同样的，只是底层的导航不同，本质上咱们须要在一套代码里面输出两种小程序。左图为公共版，右图为专享版。在一个仓库里输出两种小程序，解法其实很简单。通常而言咱们小程序有一个APP的json，罗列小程序中基本有哪些页面。咱们另外罗列出了基于原先的小程序额外多出的页面，底部的导航条信息是独立的，这是不会被合并的。

富文本如今已经不是什么大问题了，在之前对咱们来讲倒是比较难解决的问题。最先的时候富文本是图文编辑的组件，咱们最先用的是wxParse，这是开源项目，它可以比较好的解决问题。可是它存在两个问题，一是没有办法很好地处理表格、列表标签，二是它最多只能嵌套11层。通常来讲是没有问题的，可是有些商家会从第三方的编辑器编辑源码，再复制到有赞的页面编辑器里。第三方编辑器有的嵌了几十层，在小程序中就会出现不少内容丢失的状况。在2017年7月10日官方推出了一个rich-text，也存在一些问题。总结下来是svg没法在组件里面正常展现，可以展现但不能缩放。

下图是咱们整个包大小的变迁，刚刚提到上半年发力，到11月份已经有1.4M，按照这个趋势再过两个月就要超过2M的限制了。咱们用了一个叫作wxapp-webpack-plugin的开源工具，由于业务场景不同可能须要二次开发。它能够帮助咱们只打包有用的代码，在H5的生态里是最简单的东西，在小程序里会稍微有点麻烦，咱们的结果就是把0.3的包变成0.93兆。12月份微信推出了分包，全部的包加起来4M，每一个包不能超过2M。

接下来还有两部分，一是如何提升开发效率，二是如何提升稳定性。咱们在2017年的1月开源了有赞小程序的组件库，咱们拥有组件库的传统，最近也改用了官方推荐的自定义组件的写法。在开发的过程中，一样也会涉及到接口的东西，有切换的问题，有接口转发的问题。在这里推荐你们尝试使用ZanProxy，如今咱们的小伙伴没有这个工具就没有办法写代码，它能够很方便地转发。咱们也支持自定义插件，作一些不一样业务场景须要的关于接口文件、转发以及改造的相关需求，包括在H5的头里面加一些字段之类。

前店后厂模式仍是跟效率有关，为了可以比较快速地把小程序作起来，咱们回顾总结出了前店后厂模式，也就是减小环节快速往前跑。咱们组建了对接商家的群，商家提出需求，开发的同窗以为这个需求有道理就立刻去作，有些需求是凭感受就知道有道理的。由于已经有了H5的能力在参照，咱们要作的是选择哪些要复刻到小程序中去。提出的痛点解决以后立刻给商家讲清楚，减小所谓的产品测试等各类环节，整个过程是很顺畅的。但须要核心人物同时发挥PM、产品经理以及开发的角色，或者团队里有人天天有一部分时间切换为产品经理。

关于如何提升稳定性，在我看来这是本次分享里比较有含金量的部分。简单来说就是想要快速迭代但同时活多人少，并且没有测试资源的状况下要怎么快速向前跑。咱们的解法就是体验版、稳定版机制，前端工程师从来都是改完立刻生效，彻底无论以前的版本，最多就是灰度发布。咱们组建了一个内测商家群，每一个星期及时同步稳定版发布时间以及体验版的新功能。内测商家所有默认使用体验版，但这些商家也是要进行筛选的。咱们会在后台单独操做进行更新，也能够进行批量更新。基本上保持的节奏是两个星期一版，因此一个体验版的代码将被100来个内测商家至少使用一个星期。因此体验版小程序在改为稳定版提供给全部商家使用的时候，基本上已经没有什么问题了。其中惟一一次故障就是由于没有遵循这个原则，在体验版上停留三四天就着急上稳定版了。第二就是利用好回滚、撤销接口。对于这个版本出现的全部问题，咱们能够批量地把全部商家的小程序都回撤到上一个版本，这是官方提供的借口。咱们须要去开发，回撤以前会确认一下。

最后回顾一下，本次分享首先是为你们介绍了我眼中的小程序，简单来说小程序就是微信操做系统中的APP，解决了以前H5和Native APP的各类问题，下降了开发门槛。第二是从码农的视角介绍了有赞微商城小程序，第三是介绍了咱们团队技术上的探索和积累。

Q/A

Q：数据和数据之间作的隔离是在腾讯云上作一个集群吗？
A：这个事和腾讯没有什么关系，咱们有本身的运维团队，基本上管得比较底层。固然对于我的开发者而言，我仍是蛮推荐腾讯云的套路。刚才你说的商家数据隔离，咱们如今没有作这样的事情。确实有给商家提供审核的时候，商家本身的配置，其中一个配置就是在小程序申请的APP ID，咱们全部的请求都会带上这个ID，后端会拿到对应的数据。

Q：使用体验版的商家为何愿意作小白鼠？是由于有一些优惠仍是确实看中？
A：这个问题问得很是好，有两个理由。作生意的人，由于跟钱挂钩，他们会认定有些东西是很须要的，是他们下一步商业计划里急需的一环，他愿意承担这个不稳定的风险去使用这个功能。实际上咱们的体验版质量也没有那么差，至少咱们本身去回归过，该测仍是会测。商家很愿意影响你，他对这个产品有本身的想法，人人都是产品经理，他们都但愿这个产品按照他的想法去作，因此很愿意参与这个共建。如今不少产品都这么用，咱们也用相似的套路去作这个事情，对于咱们而言好处固然更多了。

Q：刚才说的体验是在现场，不是在小程序客户端，正儿八经的发到线上？
A：对，无非就是有一个名单，给这个名单发的时候给他提交的是制定的模板ID，是体验版的，只是提交审核的时候不同而已。回撤是微信最近一两个月才公布的能力，咱们也刚刚用起来，以前若是发了一个有问题的版本也没有办法，只能再发一次。

Q：刚才提到跟用户之间直接联系，我想问一个细节，这个推进过程是把多个商家拉到一个群里面这样操做，仍是有分开？
A：把多个商家拉到一块儿。

Q：会不会有不和谐或者冲突的？
A：我不是特别明白你说的不和谐？

Q：好比说有些功能是增强版，我想拥有可是它没有，若是这个版本的价格跟别人的价格都会在群里提到？
A：在有赞我以为是没有问题的，由于有赞各个版本的价格是比较透明的。说得再直白一些，哪怕你跟咱们的CEO是很铁的哥们也没有优惠码，除非是商业定制款、高阶的、有更高的价格，须要有BD的同窗进行对接。

Q：单独对接？
A：若是是特别高阶的几十万几百万的确定须要单独对接，咱们普通的基本款是4800，还有9800，都是同样的。

更多分享资料，请戳下面的连接：
有赞电商小程序的实践.pdf

问答
小程序能够实现哪些音视频解决方案？
相关阅读
邹伟：如何开发一款小游戏
朱展：腾讯云小程序解决方案
刘翌：如何利用小程序技术解决企业销售难题

此文已由做者受权腾讯云+社区发布，原文连接：https://cloud.tencent.com/dev...