原标题:云上、前端、架构、工具……这份小程序开发指南请查收
微信小程序是一个低门槛、流量巨大、公平竞争的优质营销平台,这些特性满足了商家对于产品营销的基本渴求,随着小程序用户的逐渐积累和沉淀,微信小程序的盈利风口已经开启,在 2018年,也将迎来它的最佳红利期。那么,对于开发者而言,如何敏捷、低成本的开发一款火爆小程序?
|
3月 31日,腾讯云联合极客邦科技举办的云 +社区技术沙龙,邀请了腾讯云、Layabox和加推科技的五位技术专家,从小程序开发云端解决方案、前端音视频功能、小程序架构设计和开发工具等不同维度,一站式分享解析了小程序敏捷开发最佳实践,本文整理了精彩干货内容,感兴趣的读者可以点击阅读原文下载完整版 PDF。
1云端:腾讯云微信小程序解决方案
微信小程序自发布以来,微信平台上已经出现了不少现象级小程序和小游戏,这些火爆小游戏的背后,离不开微信小程序的云端解决方案,为“跳一跳”这类小游戏的云上部署、网络架构和安全系统提供强有力的技术支撑。
来自腾讯云的微信小程序解决方案负责人黄荣奎,从小程序的核心架构、开发者工具方案和微信小程序的云上实践等方案,详细讲解了小程序开发过程中的常见问题,以及小程序快速开发和部署实践,为开发者提供了一些小程序敏捷开发的思路方法。
小程序核心架构分析
小程序的实现原理
小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。那么,小程序是如何实现的呢?
首先来看一下小程序的实现核心架构,如下图,第一层是小程序的渲染层,即 Webviews,主要负责;第二层是逻辑层,主要是通过业务逻辑实现登录功能和支付功能;第三层可以理解为微信原生的能力,微信将很多的丰富的原生客户端以及网络、储存、登录、组件和硬件等能力提供到了给了开发者,存储包括文件的读写、音视频的读写等,组件即开发常用的组件,包括音视频的录制,还有摄象头,还有拍照、扫码等等。
这些原生能力和渲染层以及逻辑层之间,通过事件以及返回数据进行消息的传递及调用,当用户在界面上进行操作时候,会触发相关事件,传递到原生 Webviews,再到业务逻辑层。微信小程序事件处理部分包含四个板块:
Publish:Service 发送数据给 View(组建内部使用)Subscribe:Service 监听 View 事件(点击事件等)Invoke:Service 和 View 触发 Native 层(调用 wx.api)On:Service 和 View 订阅 Native 层事件(监听系统事件)
开发者工具方案介绍
在做小程序环境配置过程中,开发者需要准备自己的服务器,因此需要花费很多精力在服务器运维以及周围环境的部署上,而无法专注于小程序的业务开发。为了让开发者从繁琐的配置上解放出来,腾讯云发布了腾讯云微信小程序 Wafer 解决方案,帮助开发者更加便捷的部署和调试服务器。
因为企业级和个人开发者小程序的诉求不同,腾讯云为了满足多方需求,分别定制了基于企业级的 IaaS 能力的解决方案 Wafer1和针对个人开发者的快速、方便、低门槛的解决方案 Wafer2。
Wafer1提供了一台业务服务器和一台会话服务器,业务服务器来部署和处理业务相关的逻辑,而会话服务器则用来独立处理与用户会话(登录注册等)相关的逻辑,业务与会话的分离有助于用户将来对小程序后台进行扩展,这样就解决了服务器部署的问题。使用 Wafer1,用户需要独立使用 FTP 等传输工具将代码传输到服务器上,并通过 SSH 命令行的形式部署代码,这需要用户有着 Linux 乃至运维等知识,门槛较高。Wafer 团队在内部分析这个问题之后,抛弃了原先直接将服务器所有权交给用户的方式,由腾讯云统一部署和托管服务器,基于服务器封装多种语言运行环境(目前支持 Node.js 和 PHP),将运行环境的使用权限交给用户,通过微信开发者工具,可以将后端代码一键上传、部署到环境中,Node.js 版本还可以远程调试代码,大大提升了用户开发效率,并且降低了开发和使用的门槛。
Wafer2 更加注重为个人开发者提供一种快速、方便、低门槛的解决方案。腾讯云将原来的业务服务器和会话服务器合并,提供开发环境和生产环境,开发环境和生产环境配置一样,用于快速开发测试,生产环境用于部署提供线上服务的代码。除此之外,腾讯云还与微信小程序团队合作,将 Wafer2 集成近微信开发者工具之中。
小程序云上实践
除了 IaaS 能力的解决方案 wafer ,腾讯云还提供了快速通信接口、登录、语音识别等多种能力,用以满足用户在小程序开发过程中的各项功能需求。在这些基础功能之上,腾讯云开发了聊天室和图像识别两大解决方案。
聊天室主要结合腾讯云的 Websocket服务,利用信道通信技术,实现小程序与服务器之间的信息互动和传输。如小程序在登录时会向服务器获取地址,腾讯云 PaaS级信道通信技术可以使当前的用户直接跟当时的服务器直接连接,而不再需要跟业务服务器进行连接。
这样做的好处是可以让开发者在开发的时候不需要更多的关注 Websocket的实现,避免 WebSocket带来的性能消耗。
同时腾讯云基于万象优图技术提供了图片识别的 API,可用于包括身份证识别、活体校验等领域,由于篇幅有限,本文不在此一一详述,感性趣的同学可以进入腾讯云官网了解详情。
2前端:如何在小程序上增加音视频功能
音视频能力一直以来都是小程序上的一个短板,2017年 Q4,腾讯视频云终端团队与微信团队通力合作,将腾讯视频云的技术积累以 SDK的形式落地到了微信版本上,从而为小程序增加了直播和实时音视频能力。腾讯视频云终端技术负责人常青从原理剖析、技术演化、WebRTC和快速上手角度详细讲述了如何在小程序上增加音视频功能。
原理剖析
下面是微信小程序内嵌的音视频组件,上层为小程序代码层,中间是小程序的基础库,最下层为音视频组件,其中,这里面的 SDK由两部分组成的:一个是音视频上行,音视频下行。
上行解决主要解决音视频的采集、处理、编码和网络几个问题,其实现过程为首先将本地的画面和声音经过采集然后进行预处理,如图片的美颜,音频的降噪等,然后进行编码,这部分主要试进行数据压缩,最后通过网络模块上传到云端。
下行与上行对应,即将原来在云端的音视频数据通过网络传输、解码等操作进行播放,在音视频下行的过程中,视频或声音播放的速度直接取决于网络的时速,为了保证播放效果,需要在解码之前,对数据进行缓冲,这样,即使网络环境较差的情况下,也能在一定程度上保证播放顺畅。
技术演进
微信小程序刚开始嵌入音视频的能力时,很多技术点都无法实现,腾讯视频云团队和微信团队通力合作,通过长达半年的打磨和更新迭代,逐渐为小程序增加了一系列在线音视频能力。
在线直播:对在线直播而言,最核心的关键点就是解决高并发的问题,腾讯云首先 UPLOAD上传数据,然后再将信号进行数字处理,对声音进行相应的清洗整合,最后通过放大器将信号逐级放大,让每一个地区的音视频接收端都能在就近的机房里面拉到高质量的音视频流,这样可以解决音视频卡顿和流畅性问题。远程调控:以去年比较火热的在线抓娃娃机游戏为例,因为抓娃娃游戏对延迟要求非常苛刻,因此在解决方案上,需要构建和实现超低延时的实时音视频链路,这种链路能让操作者在很短的时间内看到远程设备的视频影像,保证娃娃机的可操控性。双向通话:在小程序上实现了超低延时链路之后,腾讯视频云团队又将回声抑制、噪声消除、自动增益、丢包恢复等一系列高门槛的声学技术整合到小程序音视频解决方案中。使得双向音视频通话既可以在技术上对开发者完全透明,又能在效果上匹配现实生活场景中的各种应用(比如远程定损,远程客服,远程理疗,远程开户等等)。这其中最核心的部分,就是腾讯音视频实验室“天籁“声学引擎的技术支持。多人通话:双人通话的时候是单对单的传输,但是在多人通话状态时,信息是多对多的传输,这个时候需要一个总控系统,去协调不同端的状态,协调各个端的输出,包括什么时间点谁说话,谁不能说话。腾讯视频云团队,基于小程序自定义组件的设计标准,实现了一套被称作 RTCRoom的解决方案,用于对视频房间进行状态同步和统一管理。
整个技术演进路线走下来,从简单的直播到 DNS再到双向通话再到多人通信,基于小程序的音视频的场景基本上都可以涵盖了。
快速上手
腾讯云在这一块提供了完整的云端解决方案,用户可以直接根据自身需要登录腾讯云后台,空桶腾讯云服务就可以直接下载部署,整个操作步骤如下:
step1:授权登录腾讯云;step2:开通表前使用权限;step3:开通腾讯云服务;step4:安装小程序开发工具;step5:下载并部署 Demo;
3底层:微信小游戏架构设计
小游戏自发布以来,微信平台上已经出现了不少现象级游戏,包括《跳一跳》、《保卫萝卜》等。通常,一般人会将小游戏归属为小程序的一个子类。但在技术实现上,微信小游戏和小程序的底层架构、实现原理有着天壤之别,源于游戏需要的多用户深度参与,因此小游戏最大的特点是去中心化分发以及好友关系链的传播。
微信小游戏的这两大特点也对架构设计提出了特别的要求:第一是全区全服的需求,为了充分利用微信的社交网络,往往要求游戏是全区全服的(单机游戏除外);第二就是在线扩缩容的需求,因为任何一款游戏都可能成为爆款,在微信上可能有几何式的增长,访问量变化无法预测,所以在线扩缩容成为小游戏架构的刚需。
某开发商的小游戏上线后很短时间内在线人数从几万涨到了 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网络,在提供防护的同时可以最大程度保障网络覆盖质量。
(来源:砍柴网)