云上、前端、架构、工具……这份小程序开发指南请查收

微信小程序是一个低门槛、流量巨大、公平竞争的优质营销平台，这些特性满足了商家对于产品营销的基本渴求，随着小程序用户的逐渐积累和沉淀，微信小程序的盈利风口已经开启，在 2018 年，也将迎来它的最佳红利期。那么，对于开发者而言，如何敏捷、低成本的开发一款火爆小程序？

3 月 31 日，腾讯云联合极客邦科技举办的云 + 社区技术沙龙，邀请了腾讯云、Layabox 和加推科技的五位技术专家，从小程序开发云端解决方案、前端音视频功能、小程序架构设计和开发工具等不同维度，一站式分享解析了小程序敏捷开发最佳实践，本文整理了精彩干货内容，感兴趣的读者可以点击阅读原文下载完整版 PDF。

云端：腾讯云微信小程序解决方案

微信小程序自发布以来，微信平台上已经出现了不少现象级小程序和小游戏，这些火爆小游戏的背后，离不开微信小程序的云端解决方案，为“跳一跳”这类小游戏的云上部署、网络架构和安全系统提供强有力的技术支撑。

来自腾讯云的微信小程序解决方案负责人黄荣奎，从小程序的核心架构、开发者工具方案和微信小程序的云上实践等方案，详细讲解了小程序开发过程中的常见问题，以及小程序快速开发和部署实践，为开发者提供了一些小程序敏捷开发的思路方法。

小程序核心架构分析

小程序的实现原理

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。那么，小程序是如何实现的呢？

首先来看一下小程序的实现核心架构，如下图，第一层是小程序的渲染层，即 Webviews，主要负责；第二层是逻辑层，主要是通过业务逻辑实现登录功能和支付功能；第三层可以理解为微信原生的能力，微信将很多的丰富的原生客户端以及网络、储存、登录、组件和硬件等能力提供到了给了开发者，存储包括文件的读写、音视频的读写等，组件即开发常用的组件，包括音视频的录制，还有摄象头，还有拍照、扫码等等。

这些原生能力和渲染层以及逻辑层之间，通过事件以及返回数据进行消息的传递及调用，当用户在界面上进行操作时候，会触发相关事件，传递到原生 Webviews，再到业务逻辑层。微信小程序事件处理部分包含四个板块：

• Publish：Service 发送数据给 View（组建内部使用）
• Subscribe：Service 监听 View 事件（点击事件等）
• Invoke：Service 和 View 触发 Native 层（调用 wx.api）
• On：Service 和 View 订阅 Native 层事件（监听系统事件）

开发者工具方案介绍

在做小程序环境配置过程中，开发者需要准备自己的服务器，因此需要花费很多精力在服务器运维以及周围环境的部署上，而无法专注于小程序的业务开发。为了让开发者从繁琐的配置上解放出来，腾讯云发布了腾讯云微信小程序 Wafer 解决方案，帮助开发者更加便捷的部署和调试服务器。

因为企业级和个人开发者小程序的诉求不同，腾讯云为了满足多方需求，分别定制了基于企业级的 IaaS 能力的解决方案 Wafer1 和针对个人开发者的快速、方便、低门槛的解决方案 Wafer2。

Wafer2 更加注重为个人开发者提供一种快速、方便、低门槛的解决方案。腾讯云将原来的业务服务器和会话服务器合并，提供开发环境和生产环境，开发环境和生产环境配置一样，用于快速开发测试，生产环境用于部署提供线上服务的代码。除此之外，腾讯云还与微信小程序团队合作，将 Wafer2 集成近微信开发者工具之中。

小程序云上实践

除了 IaaS 能力的解决方案 wafer ，腾讯云还提供了快速通信接口、登录、语音识别等多种能力，用以满足用户在小程序开发过程中的各项功能需求。在这些基础功能之上，腾讯云开发了聊天室和图像识别两大解决方案。

聊天室主要结合腾讯云的 Websocket 服务，利用信道通信技术，实现小程序与服务器之间的信息互动和传输。如小程序在登录时会向服务器获取地址，腾讯云 PaaS 级信道通信技术可以使当前的用户直接跟当时的服务器直接连接，而不再需要跟业务服务器进行连接。

这样做的好处是可以让开发者在开发的时候不需要更多的关注 Websocket 的实现，避免 WebSocket 带来的性能消耗。

同时腾讯云基于万象优图技术提供了图片识别的 API，可用于包括身份证识别、活体校验等领域，由于篇幅有限，本文不在此一一详述，感性趣的同学可以进入腾讯云官网了解详情。

前端：如何在小程序上增加音视频功能

音视频能力一直以来都是小程序上的一个短板，2017 年 Q4，腾讯视频云终端团队与微信团队通力合作，将腾讯视频云的技术积累以 SDK 的形式落地到了微信版本上，从而为小程序增加了直播和实时音视频能力。腾讯视频云终端技术负责人常青从原理剖析、技术演化、WebRTC 和快速上手角度详细讲述了如何在小程序上增加音视频功能。

原理剖析

下面是微信小程序内嵌的音视频组件，上层为小程序代码层，中间是小程序的基础库，最下层为音视频组件，其中，这里面的 SDK 由两部分组成的：一个是音视频上行，音视频下行。

上行解决主要解决音视频的采集、处理、编码和网络几个问题，其实现过程为首先将本地的画面和声音经过采集然后进行预处理，如图片的美颜，音频的降噪等，然后进行编码，这部分主要试进行数据压缩，最后通过网络模块上传到云端。

下行与上行对应，即将原来在云端的音视频数据通过网络传输、解码等操作进行播放，在音视频下行的过程中，视频或声音播放的速度直接取决于网络的时速，为了保证播放效果，需要在解码之前，对数据进行缓冲，这样，即使网络环境较差的情况下，也能在一定程度上保证播放顺畅。

技术演进

微信小程序刚开始嵌入音视频的能力时，很多技术点都无法实现，腾讯视频云团队和微信团队通力合作，通过长达半年的打磨和更新迭代，逐渐为小程序增加了一系列在线音视频能力。

• 在线直播：对在线直播而言，最核心的关键点就是解决高并发的问题，腾讯云首先 UPLOAD 上传数据，然后再将信号进行数字处理，对声音进行相应的清洗整合，最后通过放大器将信号逐级放大，让每一个地区的音视频接收端都能在就近的机房里面拉到高质量的音视频流，这样可以解决音视频卡顿和流畅性问题。
  

• 远程调控：以去年比较火热的在线抓娃娃机游戏为例，因为抓娃娃游戏对延迟要求非常苛刻，因此在解决方案上，需要构建和实现超低延时的实时音视频链路，这种链路能让操作者在很短的时间内看到远程设备的视频影像，保证娃娃机的可操控性。
  

• 双向通话：在小程序上实现了超低延时链路之后，腾讯视频云团队又将回声抑制、噪声消除、自动增益、丢包恢复等一系列高门槛的声学技术整合到小程序音视频解决方案中。使得双向音视频通话既可以在技术上对开发者完全透明，又能在效果上匹配现实生活场景中的各种应用（比如远程定损，远程客服，远程理疗，远程开户等等）。这其中最核心的部分，就是腾讯音视频实验室“天籁“声学引擎的技术支持。

• 多人通话：双人通话的时候是单对单的传输，但是在多人通话状态时，信息是多对多的传输，这个时候需要一个总控系统，去协调不同端的状态，协调各个端的输出，包括什么时间点谁说话，谁不能说话。腾讯视频云团队，基于小程序自定义组件的设计标准，实现了一套被称作 RTCRoom 的解决方案，用于对视频房间进行状态同步和统一管理。
  

整个技术演进路线走下来，从简单的直播到 DNS 再到双向通话再到多人通信，基于小程序的音视频的场景基本上都可以涵盖了。

快速上手

腾讯云在这一块提供了完整的云端解决方案，用户可以直接根据自身需要登录腾讯云后台，空桶腾讯云服务就可以直接下载部署，整个操作步骤如下：

• step1：授权登录腾讯云；
• step2：开通表前使用权限；
• step3：开通腾讯云服务；
• step4：安装小程序开发工具；
• step5：下载并部署 Demo；

底层：微信小游戏架构设计

小游戏自发布以来，微信平台上已经出现了不少现象级游戏，包括《跳一跳》、《保卫萝卜》等。通常，一般人会将小游戏归属为小程序的一个子类。但在技术实现上，微信小游戏和小程序的底层架构、实现原理有着天壤之别，源于游戏需要的多用户深度参与，因此小游戏最大的特点是去中心化分发以及好友关系链的传播。

微信小游戏的这两大特点也对架构设计提出了特别的要求：第一是全区全服的需求，为了充分利用微信的社交网络，往往要求游戏是全区全服的（单机游戏除外）；第二就是在线扩缩容的需求，因为任何一款游戏都可能成为爆款，在微信上可能有几何式的增长，访问量变化无法预测，所以在线扩缩容成为小游戏架构的刚需。

某开发商的小游戏上线后很短时间内在线人数从几万涨到了 200 万左右，因为系统架构设计的时候存在性能瓶颈（缓存使用的是单实例 redis，数据库也是单库），在扩容时遇到了比较大的问题，通过对程序进行重构和使用集群版的数据库，最终解决了问题，但是由于耽误了较多时间，造成了损失，在线人数出现了比较大下滑。所以希望小游戏的架构够轻、够“小”，但是重点问题还是需要在架构设计时前考虑。

计算层架构设计

无状态化的分层架构

先来看下图（左）的无状态化分层架构，架构图如下图所示，简单说就是按照服务调用关系对节点进行分层，层和层之间由 LB（负载均衡）进行衔接，LB 下的节点可以灵活的进行伸缩，这个架构其实就是常用的 web 架构，应对一般的休闲类游戏也是够用的。

右图是无状态化分层架构在腾讯云上的一个最佳实践，客户端通过 CLB 扩展平衡接入到后台服务，通过 BGP 高防对游戏进行 DDoS 防护，当出现攻击流量的时候，高防服务可以对流量进行清洗然后回注到系统中。腾讯云用不同的弹性伸缩组来承载不同的服务，服务之间的调用通过内网负载均衡进行衔接以方便实现动态扩缩容。这其中使用了一些腾讯云的服务：

• 第一个是高性能的负载均衡 CLB：
  • 单集群提供超过 1.2 亿 的最大连接数，用以应对亿级访问量；
  • 单集群可处理峰值 40Gb/s 的流量，每秒处理包量（PPS）可达 600 万；
  • 对每个租户的流量进行严格隔离，提供主动 DDoS 防护能力。当遭遇 DDoS 攻击时，腾讯云负载均衡能免费提供 2~10 Gb DDoS 攻击峰值流量的防御能力。
• 第二个为腾讯云弹性伸缩服务 AS，弹性伸缩服务可以在不同时机对集群的节点数量进行伸缩，支持的策略包括定时扩缩容策略、基于监控告警的策略、手动扩缩容策略等。扩容速度方面，在腾讯云上创建 1000 台云主机的平均耗时是 63 秒。借助弹性伸缩服务以及腾讯云的基础能力，可以很方便地对服务进行快速动态的扩缩容。
• 第三个是 BGP 高防服务，当前安全形势不容乐观，攻击流量唾手可得，在必要的时候可以通过 BGP 高防服务对小游戏进行保护，它的特点是平台拥有 T 级的防护带宽，提供基于 AI 的精准识别算法，以及业界最全的 BGP 网络，在提供防护的同时可以最大程度保障网络覆盖质量。

无状态化分层架构的优点是可靠性高、单节点故障不影响整体可用性、可灵活扩展和收缩，但是对于游戏来说，存在两个问题：1）节点的无状态化要求处理每一个请求都要去存储层读写数据，会导致存储层压力较大，硬件成本较高，以及不适用于实时性要求高的场景；2）同层节点之间不能直接发送请求、下层节点也不能向上发送请求，对于部分游戏场景，需要通过共享数据和轮询来解决，开发者来说并不方便，也会有实时性问题和性能损耗。

星型架构

为了解决上述问题，小游戏团队采用了星型架构，如下图：

不同节点之间通过router 进行通信，router 是实现节点间消息转发的服务器。比如说A 节点中的Player1 对象要向发送B 节点中的Player2 对象发送组队邀请，可以将消息发送到router，router 再转发到B 节点处理之后再发送到Player2 的客户端。在这个结构中，所有的节点都是对等的关系，任何两个节点通过router 都可以实现消息互通。但是这个图有一个明显的题：router 是一个单点，有容错性问题和可扩展性问题。对于容错性问题，可以通过引入主备机制来解决，借助zookeeper 可以实现主备的自动切换，当主节点不可用时，自动切换到备节点。

此外，可以通过router 将多个星型结构连接在一起，解决可扩展性问题，如下图：

player1 在 set 1 的节点 A 上，player2 在 set 2 的节点 B 上，player 1 向 player 2 发送组队邀请时，消息可以通过 router1 转发到 router2，最后到达 B 节点，在 B 节点中进行必要的判断处理，最后通知到 player2 的客户端，这就要求 router 保存所有对象的路由数据，类似下面这个表：

这里，router 做了以下事情：

• 一是收敛连接，简化了内部通信的管理；
• 二是建立了通用的对象路由机制，简化了游戏的开发，游戏开发人员不用关心服务和进程，只用关心对象就可以了。
• 三是可以通过 router 进行负载均衡和广播。

router 具有通用性，可以作为通用的游戏中间件。

基于这个架构，系统的扩展可以在两个层面进行，一个是 set 内的扩展，当大厅或者对战节点不够了时，可以动态添加，新节点会去 router 上注册自己，加入到系统中，当一个 set 的承载能力达到上限时，可以继续通过复制 set 进行扩展，假设已经有了 set0 和 set1，当需要添加 set2 时，整个过是先部署 set2，当 router2 起来时，router0 和 router1 会通过 zookeeper 发现它，并建立到它的连接，连接建立后，router2 会向 router1 或 router0 获取全量对象路由信息，并且将自己上面初始化后产生的对象路由信息发送给 router0 和 router1。

到这里整个系统的通信拓扑就已经建立完成了，set2 可以对外开放，player2 登录到 set2 的大厅节点后，会向 router2 发送自己的对象路由信息，router2 会把这个信息同步给 router0 和 router1。简单说，是通过复制节点和复制 set 进行扩展，反之可以进行收缩。

下图就是扩展星型结构在腾讯云上的一个实践，对于实时性要求高的游戏，比如坦克大战这样的游戏，可以多点部署，让玩家就近接入，华南的玩家接入到广州的VPC，华东的玩家接入到上海的VPC，两个VPC 内部分别部署了set1 和set2，并且通过跨域对等连接打通，使得router1 和router2 能够建立内网连接，实现全区全服。

存储层设计

小程序设计的目标是建立一个大存储层以满足全区全服和动态扩容的问题。其中最重要的问题是数据库水平扩展的问题，自己做可以有三种方法实现：第一种基于增量区间的分片，它的优点是可以实现动态在线扩容，但是存在性能热点的问题，因为新分片永远是访问量最大的分片，而老分片会随着玩家流失出现性能闲置的情况；第二种方法是根据ID 的散列值将数据均匀分散到不同的分片，没有性能热点的问题，但是在对系统进行扩容时候，往往需要对数据进行搬迁，比较难以实现快速自动扩容；第三种方法就是将两者结合，可以同时解决两个问题，但是需要增加中间数据路由层，有研发负担和性能损耗。

为了简化存储层的设计，现在比较广泛使用的是腾讯云的分布式数据库产品DCDB ，它的原理是通过增加中间代理层，将一个逻辑表映射到到多个物理表，将分片的复杂性完全封装在代理层。对业务层可以做到近乎透明。

DCDB 支持新增分片扩容和现有分片扩容，扩容时系统会自动对数据进行搬迁并且切换相应的流量，对在线业务可以做到无感知，开发者只需要在控制台进行简单的操作就可以实现自动扩容。

另一个能简化存储层设计的产品是腾讯的 TCaplus ，TCaplus 是腾讯自研的，专为游戏设计的 NoSQL 分布式数据库，它的特点主要有三个：

• 一是支持 Protobuf 接口访问，接口友好，非常适合游戏开发；
• 二是将 Cache 与硬盘结合，冷热数据自动换入换出，开发人员不用同时面对缓存数据库和持久化数据库；
• 三是存储空间无上限，单表最大支持 50TB，支持不停服扩容，能很好地支持全区全服。

目前 TCaplus 在腾讯内部得到了广泛使用，包括王者荣耀、火影忍者、CF 以及绝地求生手游等数百款游戏，都以 TCaplus 作为主数据库。

工具：LayaAir 引擎一键发布微信小游戏

LayaAir 引擎是 Layabox 推出的 HTML5 开源引擎，不仅支持 AS3、TS、JS 三种语言开发 HTML5 游戏，还可以同时发布为 Native APP 游戏和微信小游戏，以及 QQ 玩一玩游戏。开发者可直接在 LayaAirIDE 工具内快捷的开发产品和提交产品。Layabox 合伙人李明详细分享了如何利用 LayaAir 引擎与 LayaAirIDE 工具一键发布微信小游戏。

小游戏创建前的准备工作

发布微信小游戏之前需要做一些准备工作，包括环境配置、工具下载、创建账号等。

• 第一：环境配置，即下载并安装引擎的开发环境。LayaAir 引擎的开发工具 LayaAirIDE、发布小游戏的功能适配都在这个环境里面实现；
• 第二：下载并安装微信开发者工具；
• 第三：创建一个小程序的企业开发者帐号，获得开发者 ID(AppID)。这里，值得注意的是，个人开发者不需要版号，但是也不能开内购支付；对于企业开发者，如果版号没办完，也可以提供版号申办回执。

H5 引擎开发微信小游戏的流程

H5 引擎开发微信小游戏主要包括创建、开发、发布、真机调试与上线发布等步骤，首先需要在 IDE 里面创建小游戏示例项目，然后用 IDE 内进行小游戏的开发，开发完成后在 IDE 内可直接发布小游戏项目。小游戏项目发布后，还需要在微信的开发者工具内导入 IDE 发布的小游戏项目，然后通过在微信开发者工具内的预览和上传功能，进行真机调试和上线发布。

1. 在 IDE 里面创建小游戏项目。这个比较简单，打开新建项目按钮即可看到创建界面，需要注意的是创建时一定要选择微信小游戏 2D 示例或微信小游戏 3D 示例，否则不会创建微信开发者工具的工程文件，以及不会导入小游戏适配库。
2. IDE 内进行小游戏开发。在小游戏开发过程中有一个很重要的关注点，是 4M 本地包，这个本地包主要用于存放 JS 文件与最基础的预加载资源（整 个项目的 JS 必须放在本地包），本地包超过 4M 后，可远程动态加载资源，通过 LayaAir 引擎适配库的本地包白名单功能，可以方便的管理本地资源与远程资源的加载。另外，在小游戏的缓存管理这一块，LayaAir 引擎适配库提供自动缓存管理与手动缓存管理，常用资源小于 50M 的小游戏建议采用自动缓存管理，常用资源大于 50M 的需要手动管理缓存。
   
3. IDE 内发布小游戏项目。项目开发完成后，可点击发布按钮，将 H5 项目直接一键发布为小游戏项目，因为微信小游戏、QQ 小游戏都提供了标准的渲染接口，LayaAir 引擎通过建立适配库，对不同平台的接口与引擎 API 进行对接，保障开发者一次开发就可以同时发布多平台。
4. 微信开发工具中导入项目。打开微信开发者工具，创建一个小游戏项目，创建时的目录直接指向发布后的小游戏项目即可。
5. 微信小游戏的调试。微信小游戏的调试包括常规开发调试和真机调试两个部分，常规开发调试只需开发时在 IDE 或 chrome 下调试即可（小游戏工具内也是基于 chrome），真机调试要求本地包必须小于 4M，微信的真机调试环境较为简单，调试主要靠 log 输出。
6. 小游戏上线发布。微信小游戏调试结束后，如果打算上线，直接在微信开发者工具内点击上传，即可将小游戏版本提交到微信开发者平台中，在平台中提交相关资料，审核通过后，可上线。

以上，就是用 LayaAir 引擎一键发布小游戏的完整流程。据悉，Layabox 还将与腾讯云联手优化小游戏发布与开发流程，未来 LayaAirIDE 中将集成一键上传微信小游戏的动态加载包到腾讯云，避免人工拆分目录 、打开服务器传输工具等繁琐流程，同时，用户还可以将 LayaAirIDE 中的帐号与腾讯云关联绑定，通过 IDE 快速购买腾讯云的服务器。

实践：如何利用小程序技术解决企业销售难题

小程序时代，不仅需要懂开发，还要你善运营，一个拥有多功能和高性能的小程序，需要配合完备的运营手段，才能发挥最大的价值。加推科技联合创始人刘翌，分享典型企业营销场景痛点解析，以及加推如何结合小程序解决企业销售难题。

企业营销痛点解析

在讲解企业营销痛点之前，刘翌分析了企业营销的三大刚需，即收入、销售和销售管理，这里面，后两点直接影响了企业收入，那么，企业如何做销售和销售管理呢？下图是是一个中国 8000 万名销售员的痛点的总结，可以大部分企业都会面临以下四大类的痛点：

• 首先获客难度大，获客成本非常高。举个例子，大家经常会碰到房产中介，每一天可能要打 300 个电话，每个通话假设只有 30 秒，核算下来也有 150 分钟，但一般电话销售的最终转化都非常低；
• 另外触达率很低：假设在人员密集的展会上，一个销售递出去 500 张名片，这其中，可能有 480 张名片将会被抛弃，获客触达难，所以成交率就低；
• 销售流动性高：在所有职业里面，销售的流动性绝对是排前的，而一旦销售离职，很多该销售手上的客户就会被带走，最终造成客户流失；
• 成交率低：不管是电话营销、现场交流还是名片传递，这些方式的成交率都非常低，可能 2000 个电话里面才会触达 1 个客户，10 场展会只有 1 个实现转化。

加推微信智能营销解决方案

不管是微信公众号、微商城、企业官网还是小程序，在企业初期阶段，没有推流和运营的情况下，获客率一般都不高；即便获的销售线索，由于缺乏可视化、智能化筛选工具，营销人员只能一对一联系跟踪，无法系统管理客户，工作效率较低。

那么，有没有一种通用的方法和工具，能够打通企业、微信、小程序等不同渠道，将推广、运营、销售转化形成有效的闭环？基于这种思路，加推结合微信小程序，从 SaaS 小程序接入，开发了全球首款 B2S2C 微信智能销售系统。通过 AI 名片、AI 雷达等解决方案实现微信小程序 10 亿用户的触达与转化。

• AI 名片：智能生成个人小程序名片，用户只需扫一扫销售小程序码，即可添加名片，添加成功的用户可以随时查看销售个人信息，包括个人联系方式、公司职位、功能产品等，信息可根据需要自主设置；
• AI 销售雷达：在小程序添加朋友之后，AI 销售雷达通过智能“客户捕手”和客户管理等功能，实时追踪客户行为轨迹，随时随地掌控客户真实需求，及时跟进，同时客户管理功能通过客户画像分析，标签化分类用户，筛选精准用户；
• BOSS 雷达：BOSS 雷达通过可视化员工分析系统，将员工拜访执行过程同步到 BOSS 系统，沉淀准客户资源，同时，员工客户数据自动保存云端，即使离职，所有数据都能保证全程可追溯。

总的来说，B2S2C 微信智能销售系统主要先深度打通微信原生消息通道，打通微信数据层，实时抓取客户行为轨迹并生成用户画像，然后通过小程序技术重构个人名片，搭建企业版微信朋友圈，利用 AI 核心算法分析用户行为数据，寻找商业合作突破口，重构客户通讯录，将微信流量导入企业官网或企业系统，BOSS 平台可实时掌控员工客户数据，实现流量永久资源化。