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

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

1、技术架构

业务场景：

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

协同开发：

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

系统架构

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

2、流程和工具

小程序脚手架（初始化）

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

组件架手架（初始化）

能够利用以下架手架自动化建立组件。

开发过程：

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

发布过程（当前）：

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

发布过程（规划）：

将整个过程经过CI链接起来，减小人工操做。

3、组件化

Storage性能：

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

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

Storage数据同步：

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