笔者于2019年6月21日在北京GMTC大前端技术大会小程序专场分享主题《腾讯在线教育小程序开发实践之路》演讲

1. 腾讯在线教育小程序矩阵

首先我先介绍一下腾讯在线教育的三大主营业务：

腾讯在线教育小程序开发实践之路.004.jpeg

各业务均有PC Web端、客户端、H5、APP端，满足学生多端学习需求。但由于教育前身是基于QQ群视频孵化的，后续的产品形态也是围绕QQ生态构建的，因此在流量方面，QQ相关流量占比较大。

腾讯在线教育小程序开发实践之路.007.jpeg

我们希望利用小程序生态为我们的教育业务增加微信的流量，并优化学生在微信上的课堂体验，所以我们打造了在线教育的小程序矩阵。

腾讯在线教育小程序开发实践之路.008.jpeg

腾讯在线教育小程序开发实践之路.009.jpeg

我们通过工具型、内容型小程序获取流量，比如腾讯课堂开放小程序、腾讯微课堂、企鹅速算、口语拼读等工具型小程序，并最终转化为平台型小程序。

2. 小程序基础设施设计与工程探索

对于上面提到的众多小程序，我们如何选择框架，如何制定统一的开发规范，在多人协作开发中探索小程序工程化？下面将一一介绍。

腾讯在线教育小程序开发实践之路.012.jpeg

在框架选择上，我们对比了几个主流的小程序开发框架，taro，wepy，以及原生开发框架。可以看出，原生框架相比其他框架，在 CSS 预处理、多端复用、管理、自动构建等方面的能力有所欠缺。但考虑到以下几点，我们更倾向于使用原生框架进行开发：

那么，使用原生框架能解决上述开发缺陷吗？该如何解决？

1. CSS预处理

首先我们来看CSS预处理，我们期望在小程序中能够使用CSS预处理，包括嵌套语法，变量等工具，调研之后直接用来编写样式文件，编译到wxss中就可以了。

腾讯在线教育小程序开发实践之路.014.jpeg

腾讯在线教育小程序开发实践之路.015.jpeg

并且通过引入插件，解决小程序样式开发中的痛点。例如-url插件解决不支持本地图片的问题，并进行格式转换；-font-插件将字体进行格式转换。

2.数据管理

对于数据管理，您可以使用访问。

3. 施工

搭建一个小程序需要做什么？小程序开发者工具已经提供了一些能力：ES7/ES6 到 ES5 的转换、NPM 包管理、代码分包、组件化、包合并等。

腾讯在线教育小程序开发实践之路.021.jpeg

我们使用 gulp 来实现图片压缩和前面提到的 Post CSS 编译。为什么要使用 gulp 而不是更流行的呢？

这里添加的能力主要是文件处理，使用gulp开发效率更高，官方的一些小程序脚手架也是用到gulp的。

腾讯在线教育小程序开发实践之路.022.jpeg

最终我们选择了小程序原生框架作为我们的开发框架，弥补了之前相对于其他开发框架所欠缺的基础能力。当然，这并不是说其他​​框架不好，具体的选择还是要看具体的业务场景。

4. 目录规范

在确定开发框架之后，统一的目录规范也是团队协作开发的必要约束。

腾讯在线教育小程序开发实践之路.025.jpeg

引入npm包管理之后我们在小程序的基础目录下新建一个目录作为小程序代码的根目录，因为小程序会把里面的包编译到目录下，为了避免小程序和其他工程相关的混在一起，新建一个文件夹专门存放小程序项目代码，可以通过修改..js来配置小程序代码的根目录路径。

5. 编码标准

约束了目录之后，团队协作开发中如何保持代码规范统一呢？我们希望团队成员在开发时能够统一代码规范、提交规范、风格。因此像我们其他的web项目一样，可以使用、、、等插件来约束规范自己的代码。提交时使用git hook进行验证检测，失败则不允许提交。

腾讯在线教育小程序开发实践之路.029.jpeg

使用 和 - 可以自动生成统一的版本号和。它会自动生成您在此版本迭代中提交的标准化日志（遵循团队的规范：#），标明是否为特性发布或，以及对应的日志信息。后期当我们需要回滚或者追溯某个版本的变更时，就可以一目了然了。

基于以上的能力与约束，我们打造了统一的脚手架，方便团队在统一的环境下快速开发，并且开源（ ）。

3. 小程序开发实践

介绍完我们的框架选型和工程探索之后，我们来分享一下我们在开发在线教育小程序的实战经验。

1. 小程序音频和视频

腾讯在线教育小程序开发实践之路.033.jpeg

第一部分是小程序音视频能力相关的实践。腾讯课堂是一个在线学习平台，所以核心就是音视频直播和录制能力。那么如何在小程序上构建课堂音视频能力呢？

1）直播场景

腾讯在线教育小程序开发实践之路.035.jpeg

我们先来看一下腾讯课堂在接入小程序之前的直播架构，我们通过老师把直播上传到云端，然后实时下载到客户端、App学生、PC网页学生。对于对延迟要求不高的场景，我们可以把直播流绕过去转码到CDN，再让用户观看，这样可以节省成本。

腾讯在线教育小程序开发实践之路.037.jpeg

这是各个端使用的直播协议以及延迟对比，小程序应该采用什么协议，如何接入？

腾讯在线教育小程序开发实践.038.jpeg

在揭秘之前，我们先来回顾一下小程序音视频能力的发展历程。最初，小程序只有原生的音视频标签，也就是说只能支持HLS高延迟直播场景。

腾讯在线教育小程序开发实践.039.jpeg

2017年4月，腾讯云与小程序达成合作，在小程序中嵌入腾讯云音视频SDK，并将其封装成live-、live-标签，使得小程序可以支持更低延迟的直播协议，比如rtmp、http-flv等。因此我们可以使用live-来播放rtmp、http-flv协议的流媒体播放，降低了小程序直播场景下的延迟。

然而live-还存在一些不足：

腾讯在线教育小程序开发实践之路.042.jpeg

使用live-，延迟大概在1-2s左右。那么有没有小程序上延迟更低的直播方案呢？

如果你开通了腾讯云账号，可以使用-room在小程序上实现更低延迟的直播，原理基于live-RTMP，但是使用高速专线，不经过CDN，降低了延迟。

腾讯在线教育小程序开发实践之路.043.jpeg

（小程序接入课堂音视频整体架构图）

2）录播场景介绍完直播接入方案，我们再来说说录播，由于版权保护的原因，腾讯课堂录播采用的是加密HLS协议。

腾讯在线教育小程序开发实践.044.jpeg

由于录播对延迟没有要求，可以在小程序上直接使用标签播放加密的HLS流。

腾讯在线教育小程序开发实践之路.047.jpeg

在Web上，播放加密HLS的流程是这样的：1、获取加密HLS的m3u8地址并传给；2、浏览器在底层解析这个m3u8，发现它有一个加密协议标识-EXT-X-KEY，其值为获取解密密钥的接口地址；3、浏览器自动发起获取解密密钥的请求；4、浏览器自动发起请求的时候会通过方法带上用户的登录态，业务后台认证后返回解密密钥。之后浏览器拿到解密密钥之后就可以解密播放了。但是在小程序中，由于小程序是不存在的，那么小程序发起的获取解密密钥的请求该如何认证呢？

腾讯在线教育小程序开发实践.048.jpeg

腾讯在线教育小程序开发实践.049.jpeg

我们在获取m3u8文件的时候，将加密后的认证参数添加到meu8地址中，并添加前缀“..”，返回m3u8文件的时候，会将认证参数拼接到EXT-X-KEY的请求地址中，后续发起请求的时候，业务后端获取认证参数，按照协商好的方法解密，就可以获取到用户登录，判断是否是合法用户，之后按照前面的流程，如果认证通过，则返回解密key。

2、小程序自动化发布完成音频、视频能力之后，我们的项目正常上线，随着平台功能的不断增加，小程序也按照如下流程进行迭代发布。

腾讯在线教育小程序开发实践之路.051.jpeg

但是上面的过程存在一些隐藏的问题，尤其对于新手来说，很容易因为疏忽而犯错，并且我们还造成了现网的一个bug，不知道大家发现了没有？

腾讯在线教育小程序开发实践之路.054.jpeg

要揭晓答案，主要有两个问题：

腾讯在线教育小程序开发实践之路.057.jpeg

我们希望在上传发布前自动检测以下几个流程： 1.代码合并主干检测 2.版本检测，必须大于等于当前.json版本 3.自动执行npm 操作 4.自动执行上传操作，包括填写版本号和备注

其中1和2可以通过npm命令判断，3和4涉及小程序相关能力调用，请问有没有暴露的相关接口可以调用呢？

腾讯在线教育小程序开发实践之路.058.jpeg

这里小程序开发者工具提供了命令行和http调用方式()，可以实现项目开启/关闭、代码上传、预览、构建npm、自动化测试等功能。所以我们利用这个能力，采用cli调用等方式，实现构建npm、自动化发布的能力。

腾讯在线教育小程序开发实践.059.jpeg

具体流程为：1. 检查最新 代码是否更新；2. 判断小程序开发者工具是否安装、环境变量是否设置正常；3. 进行本地版本检测；4. 调用 npm 命令；5. 自动获取 .json 版本号作为上传版本，并获取 git log 作为注释；6. 调用 命令进行上传

自动发布流程示例

3、有了上面的工具，我们就可以愉快的开发和迭代第三方平台小程序的发布，但是随着我们课堂平台小程序的推广，课堂平台上的每一个机构都想有自己的机构小程序，其页面是课堂平台小程序的一个子集。

腾讯在线教育小程序开发实践.063.jpeg

经过分析，我们决定通过构建的方式，将代理小程序代码和平台小程序分离，通过两个模板配置信息，动态生成平台小程序和代理小程序的app.json，这样在上传的时候，只需要上传对应的页面即可。

代码复用的问题解决了，但是另一个问题出现了，需要生成代码的机构有80多家，有的机构可能没有开发人员，如何帮助机构快速上传发布自己的机构小程序？

腾讯在线教育小程序开发实践.069.jpeg

这里引入微信第三方平台的概念（微信第三方平台），我们可以向微信开发平台申请成为第三方平台，机构申请独立小程序账号之后，将其授权给我们腾讯课堂第三方平台，这样我们就可以获得机构的代码管理和版本发布权限，通过上传我们之前建好的小程序模板，调用发布接口，就可以快速帮助机构将其独立个体发布到机构小程序中。

4.性能优化实践

腾讯在线教育小程序开发实践之路.076.jpeg

我们的小程序上线后，通过查看小程序管理后台的总启动时间，我们发现了几个问题：1、小程序管理后台只展示了总启动时间、下载时间、渲染时间三个数据维度，但总启动时间 != 下载时间+渲染时间；2、启动时间高达3.8s，这是一个合格的数据吗？除了下载时间和渲染时间，其他的时间消耗都去哪了？

要知道时间都消耗在哪儿，首先要了解小程序启动过程中发生了什么。

腾讯在线教育小程序开发实践.075.jpeg

1.小程序初始化在这一步微信会初始化小程序环境，比如逻辑层的js引擎，视图层的js引擎，注入公共基础库等。

2.下载小程序码包。企业小程序码包将在此下载。

3.加载业务代码包，下载完成后注入代码包——小程序的代码会被加载到合适的线程中执行。此时所有app.js、页面所在的JS文件、以及其他所有的JS文件都会自动执行一次，小程序基础库会完成所有页面的注册。

4.初始化小程序首页拉取数据，从逻辑层传递到视图层，生成VD树，并渲染。

了解了小程序的启动流程之后，我们对其进行了分析定位，各个阶段的耗时如上图所示。

腾讯在线教育小程序开发实践之路.077.jpeg

灰色部分是小程序底层的执行时间，这个时间是开发者无法控制的，在其他的时间消耗中，下载代码包占比较高，如何减少这个时间消耗呢？

腾讯在线教育小程序开发实践之路.078.jpeg

腾讯在线教育小程序开发实践之路.079.jpeg

课堂APP所有页面原本都在一个包中，所以这里我们采用分包方案，将主标签页三个页面以及util、通用组件等公共模块放在主包中，其他每个页面分成300-500k左右大小的子包，子包可以引用主包的公共模块。

经过分包后，下载代码包耗时缩短约1秒，整体启动时间压缩为3.2秒，比小程序市场平均启动时间4.5秒减少了1.3秒。

腾讯在线教育小程序开发实践之路.080.jpeg

但是，也出现了其他问题，比如从主页打开课程详情页面。

这时候当你点击详情页的时候，需要先下载详情页包，才可以打开课程详情页，显然这个体验是极其糟糕的。

腾讯在线教育小程序开发实践之路.081.jpeg

我们可以通过预加载子包来解决这个问题。打开首页，加载完主包后，就可以静默加载其他子包，预加载子包可以通过配置来实现。

腾讯在线教育小程序开发实践之路.082.jpeg

下面是一组局部的测试数据，从中我们可以看出，使用分包和分包预加载方案可以减少启动时间，提高用户体验。

腾讯在线教育小程序开发实践.083.jpeg

小程序除了常见的分包方案，还有独立的分包方案，分包页面可以不依赖主包加载直接打开，常用于一些相对独立的页面，比如活动页面。

腾讯在线教育小程序开发实践.086.jpeg

但使用独立子包有一些限制：

解决了代码包下载耗时的问题，并且采用了分包的方式，通过分包加载的方式提升了页面打开的性能和效率。接下来我们看一下渲染的耗时部分。

腾讯在线教育小程序开发实践.087.jpeg

这是小程序中典型的双线程通信模型，每次调用方法时，数据从逻辑层传递到渲染层，再到渲染层形成VD树进行渲染。

腾讯在线教育小程序开发实践.088.jpeg

上面是传输数据量和传输时间的关系图，可以看出当数据量大于64kb时，传输时间呈指数增长，因此在使用时，应尽量遵循以下建议：

5.公共基础组件库

为了提高开发效率和代码复用，我们封装了一些常用的能力和功能组件（计划后续开源）。

腾讯在线教育小程序开发实践之路.090.jpeg

这里我们以基础能力组件为例，我们基于wx.进行封装，用它来存储登录信息，在后续的请求时将登录设置到请求头中。我们采用插件化的封装方式，做了各种插件和扩展，比如有一个插件可以在请求时自动显示，请求完成后自动隐藏。

腾讯在线教育小程序开发实践之路.091.jpeg