美团外卖小程序的探索与实践丨掘金开发者大会

掘金开发者大会圆满结束，其中美团外卖上海研发中心的资深技术专家王善成对美团外卖这个庞大的产品如何在小程序的实现做了演讲，本文将带领大家回顾一下演讲中所提到的技术重点。

一、技术架构

业务场景：

采用较开放的框架策略，项目支持自由进入第三方的框架去满足各个应用场景的需求。对主流程等相对独立性较高的采用微信的原生框架；对于营销业务上需要支持Web页面、小程序等多种渠道，通过引入mpvue使多个渠道可以使用Vue.js的组件。

协同开发：

多团队开发中，核心的主流程放在主包，其他业务存放在不同的子包中，保证每个包中的业务相关性比较强，避免用户使用中频繁的子包加载过程，也避免团队业务冲突。将通用组件和各业务的子包托管在npm上进行模块化的管理，对构建脚本的改造将npm包引入到小程序。

系统架构

最底层是微信的原生组件；中层是各个业务通用的核心组件如：登录、对vebview的封装、监控以及数据埋点等，通用组件由统一的团队去维护和组建；通过对编译工具进行插件化的改造允许其他的业务方能引入第三方框架进行开发；最上层是各个业务通过拆包将业务隔离开来；

二、流程和工具

小程序脚手架（初始化）

利用如下架手架可自动初始化小程序项目，生成可以使用框架的目录结构，方便小程序的搭建和部署。

组件架手架（初始化）

可以利用如下架手架自动化创建组件。

开发过程：

本地开发过程如下，在本地工作目录中去调用命令build让构建工具执行整个构建过程，生成的目标代码会写到本地工作目录中，再通过微信开发者工具对生成的代码进行调试和发布；其中构建脚本提供Mock功能，可以模拟后端服务器接口。

发布过程（当前）：

将代码托管于Git，发布时CI首先通过Git拉取待发布的代码且执行构建过程并对源代码和图片进行压缩进一步缩小小程序的体积，同时还对代码进行语法检查，对于不通过的代码将会被打回重新修改才可再次发布。

发布过程（规划）：

将整个过程通过CI连接起来，减少人工操作。

三、组件化

Storage性能：

对小程序原生组件的改造，以下是一份“暴力”测试数据。

• 大小约100k随机对象读写清空缓存各100次，耗时比较
  

Storage数据同步：

原理是在初始化过程当中，内存先去调用 wx.getStorageInfo获取现在小程序getStorage里面所有的存储的key值，就可以得到一个数据表。在读的过程中，首先是 组件的api去触发读取的操作，然后内存会查询我当前有没有缓存这个数据，没有的话就通过wx.getStorageInfo获取，并将值返回回去。写入只需要写入到内存当中，这样写入的性能就非常高。关于同步机制，美团外卖小程序采取了两个同步机制进行双重保障，首先是在小程序的生命周期中调用onHide、把内存中没有同步到文件的数据通过setlnterval回写到文件中。为确保数据同步设置了定时器。

转载于:https://juejin.im/post/5ba11d715188255c8e72740a