腾讯云朱展：小程序设计开发思路以及解决方案

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

腾讯云朱展：小程序设计开发思路以及解决方案

4月28日，腾讯云联合InfoQ举办云+社区技术沙龙，以小程序实际开发为基准，重点讨论小程序云解决方案、后端架构、小游戏底层设计、直播、以及电商小程序。 开发五大主题实用内容，分享*全面的微信小程序设计开发思路和解决方案。 本文整理了讲师演讲的精华内容。 有兴趣的读者可以点击【阅读原文】下载讲师演讲的PDF版本。

1小小程序云解决方案

小程序无需安装，易于分享和传播，易于开发，用户体验非常好。 那么，这些功能是如何实现的呢？ 腾讯云高级工程师朱展小程序架构分析、小程序解决方案演进、腾讯云小程序解决方案介绍三个方面给出了答案。

小程序实现原理

小程序的开发模式是类Web模式。 它的前端和一般的H5前端类似，但是比开发简单很多。 这是由小程序的实现原理和架构决定的。 下图是程序的基本架构图。 它的上层分为两部分，一是视图层，二是逻辑层。 也就是说，这两层是在两条不同的生产线上加工的，与传统的web有根本的区别。

传统的网页渲染中，如果逻辑上有非常复杂的处理，往往会导致界面卡顿。 小程序不存在这个问题。 如果不调用渲染，界面的流量不会减少。 但由于视图层和逻辑层处于不同的线程，两层不能直接交互，必须通过某种手段来实现交互。 微信采用的是JS运行环境与原生系统的相互调用。 当用户对界面进行操作时，会触发相关事件并传递给，然后传递给逻辑层。

下图是小程序的渲染流程图。 在编译打包阶段，编写小程序时，需要先编写一段WXML代码，通过WCC编译工具输入。 用户运行小程序时，会与逻辑层传入的数据进行比较。 编译并渲染成*终界面。 下图是部分更新过程。

下面是几个加载小程序的简单示意图。 手机上加载小程序时，必须在CDN上拉取小程序包。 首次加载小程序时可能会有等待时间。 这次当安装包缓存在本地时，以后手机下次打开小程序时，会直接从缓存中读取安装包的内容。 如果有新版本，小程序不会等待新版本更新才打开APP，而是直接使用上一层。 缓存的小程序稍后再次启动时会直接用新的安装包替换旧的小程序。

同时，小程序还提供了预加载性能。 除了当前视图之外，您还可以在后台看到新视图。 这样的预加载性能可以在一定程度上保证一些复杂的小程序。 加载速度。

小程序的安装包缓存、分包加载、独立渲染线程、预加载以及一些组件……这些工作不仅让小程序拥有丰富的功能，还保证了小程序的打开速度和流畅度，从而给用户带来完美的体验。

小程序解决方案的演变

开发在开发小程序时，需要处理大量的非业务逻辑，并准备自己的服务器。 因此，他们需要花费大量的精力在服务器运维和周边环境的部署上，而无法专注于小程序 开发。 为了将开发从繁琐的配置中解放出来，腾讯云基于腾讯云IaaS能力为企事业单位定制了一套解决方案。 这就是腾讯云微信小程序Wafer解决方案，帮助开发更方便地部署和调试服务器。

针对企业、机构客户（以下简称企业客户），提供业务服务器和会话服务器。 业务服务器部署并处理业务相关逻辑，而会话服务器则用于独立处理用户会话（登录）。 注册等）相关逻辑，业务和会话的分离将有助于未来中大型企业级客户扩展小程序后端。 此外，腾讯云还将数据库与云服务器分离，提供云数据库。

除了IaaS能力解决方案晶圆外，腾讯云还提供快速通信接口、登录、语音识别等多种能力，满足用户在小程序开发过程中的功能需求。

Wafer的渠道服务是腾讯云提供的PaaS级别的服务。 利用通道通信技术，可以实现小程序与服务器之间的信息交互和传输。 腾讯云频道通讯技术允许当前用户与频道服务器建立直接链接。 业务服务器只处理http请求，不需要关心信息。

总体来说，Wafer通道服务有以下几大特点：配合SDK，无需开发，可直接使用； 平台提供稳定性和性能保证； 可自动实现断线重连； 它有一个独立的信用服务器和一个消息搬运工。 但同时架构复杂，开发成本高，开发调试代码不方便。

针对缺点，2017年上半年提出的解决方案是简化版，结合了一些简化和合并，兼顾了安全性和便捷性。 例如，将会话服务器和业务服务器合并； 在这个时代我们会让用户部署自己的服务器。 在这里我们进行托管管理。 用户可以购买自己的服务器，但不需要做服务器端配置，SSL证书将自动免费部署。 此外，腾讯云与微信进行深入合作，我们的解决方案已投入微信开发空间。

除了支持IaaS的解决方案晶圆外，腾讯云还提供上传代码到开发环境、使用启动单步调试、在开发环境安装依赖、重启/停止Node.js程序、恢复初始状态、上传生产环境代码，以及登录本文不会详细介绍状态跳转、腾讯云控制台等一系列解决方案。 有兴趣的同学可以登录腾讯云官网进行尝试。

2 使用构建小程序的后台

小程序和小游戏的开发越来越流行，小程序或小游戏的后端通常按照传统的服务器模式开发，提供API作为后端服务入口。 腾讯云正在尝试一种新方法：用架构来实现后端服务，通过API网关、云函数、云数据库等服务的结合微信小程序实战开发pdf，无需用户自动实现高并发、快速上线、无缝更新的能力。关心服务器。 。 腾讯云SCF 云功能高级产品经理黄文军详细讲解了如何使用它构建小程序后端。

微信小程序与后端交互架构

小程序是连接用户和服务的全新方式。 可以在微信中轻松获取和传播，同时提供*优秀的用户体验。 其加载方式比传统APP方式更快，开发和上线也更快。 小程序的数据获取除了自身的界面展示和数据刷新外，还通过微信与后端进行交互。 小程序的运行是类前端的运行方式。 它的整个操作都在微信内部进行，并且与后端进行交互。 互动通过微信转发。 实际运行并发出请求时，小程序会首先调用微信API并发出API请求。 这个请求发送到微信，微信再通过网络请求发送到用户自己的服务器。 用户在自己的服务上收到请求后处理数据然后响应前端。 这就是一个小程序与后台交互的完整过程。

传统后端架构需要提供API服务时，首先需要使用负载均衡，然后连接业务应用服务器，然后连接文件存储、结构化和非结构化数据库服务、缓存服务。 在此过程中，为了保证系统不会因为某台服务器宕机而瘫痪，需要分别建立业务应用集群、数据库集群、分布式文件存储、缓存集群； 建立集群的首要作用之一就是保证不会因为服务器宕机而导致服务瘫痪。 单点故障会导致整个服务不可用。 下图是传统的后端架构图。

这种多服务、多集群的架构模式已经在大中型互联网企业中应用。 然而，作为个人开发，构建这个系统是困难的。 开发需要了解整个系统的配置，比如负载均衡。 如何配置，如何配置数据库集群等。为了让大家从搭建后端基础设施中解放出来，将更多的时间投入到业务和小程序本身，腾讯云为大家提供了搭建小程序后端的解决方案使用架构。

架构介绍

该架构英文叫，中文叫，意思是不需要购买服务器，也不需要配置虚拟机、物理机。 它使用计算托管。 用户在使用时无需担心其安全性。 不用担心服务器停机可能导致的故障。

那么，他是如何实现这一目标的呢？ 下图是腾讯云的架构，可以看成两部分。 **部分是功能即服务。 计算托管在云函数中，真正实现业务逻辑的托管计算。 另一种是后端即服务，包括对象存储、消息队列、云数据库、云缓存、API网关等。

因为架构是计算托管，计算托管就是把真正的业务代码托管在云上，然后在云上运行。 该架构运行方式的特点之一是业务逻辑被触发。 云功能接入各种云产品或云服务后，各个产品或服务产生的事件可以触发业务逻辑的运行。 这里我们将云功能与API网关结合起来。 当小程序的请求到达API网关时，会产生API请求事件，触发业务代码的运行。 托管时，用户向云端提交代码和触发配置。 代码的内容是对事件进行逻辑处理。 在事件发生和处理的过程中，对于每个事件，都会拉起一个代码对应的实例。 事实上，每个实例独立处理一个事件。 该服务在用户发出请求时运行，在没有请求时不运行。 同时，产品本身的计费模式也是按照实际服务运行时间进行计费。

同时，使用对象存储，你不必自己搭建分布式存储，也不用担心数据丢失和安全问题； 使用云上提供的数据库和消息队列也是如此。 您不需要购买服务器来自行构建。 您可以在购买或激活后立即开始。 使用，这样这个服务也可以被调用。

后端开发计划

那么如何利用架构来实现后端开发呢？ 如果把传统架构中的Web服务换成架构的话，我们使用API​​网关来管理外部服务暴露的API。 我们在云功能中运行用户的业务逻辑，需要结构化的数据存储或者文件存储。 我们使用数据库服务、云缓存服务或者对象存储服务等，同时您还可以直接使用云山提供的更多服务，通过代码直接调用。

具体建设方案如上图所示。 除了小程序自身页面的启动和显示之外，后续与网络的交互都是由小程序发起的。 因此，小程序通过网络API发起请求，获得响应，并将数据显示到界面上，使得内容可以被用户看到； 然后通过API网关管理API，配置API的路径、方法、参数和验证，管理API的发布和切换； API网关之后是云功能，用于处理业务逻辑并发起连接数据库、读写数据库、生成响应数据。 根据实际业务情况，如果需要使用数据库，请在代码内发送数据库连接。 如果需要存储文件，则调用相应的对象存储接口写入文件。 ；*后是云数据库，用于存储业务数据。

通过联合使用API​​网关、云函数、云数据库等多种云产品或云服务，我们演示了小程序登录服务的实现，无需购买和配置服务器，从而完成服务。 利用该架构实现的小程序，开发无需担心运维问题。 同时，由于它们无状态运行，因此可以轻松实现快速迭代和极快的部署。 它们的弹性计算能力也可以满足数万或更高用户并发的需求。

3、小程序在直播产品中的技术应用

小程序现在已经应用于生活的方方面面，包括电商、社交等场景。 腾讯Web前端开发高级工程师杨春文以NOW直播为例，介绍了腾讯小程序在直播领域的一些尝试，包括登录能力搭建、基于腾讯云基础音视频能力、直播性能对比选型、动画开发、直播间元素布局开发、官方支持的一些实用基础能力等，并分享了开发过程中遇到的一些问题和解决方案。

如何基于腾讯云搭建直播小程序？

对于一个直播小程序来说，怎样才能以*低的成本打造出来呢？ 小程序层面来说，有两点：主播端和观众端。 通常主播端需要使用一些组件将视频推送到服务器，然后再推送到观众端。 在这个过程中，对于小程序开发来说，有两个核心点：一是推流腾讯云朱展：小程序设计开发思路以及解决方案，二是拉流。

一般来说，开发自己构建转码、传输等功能来推拉视频是非常麻烦的。 腾讯云有非常成熟的视频解决方案来帮助完成这个过程。 下图为腾讯云直播小程序解决方案。 使用过程也非常简单：

申请腾讯云直播服务；

获取加密私钥；

部署自己的业务后端（提供现成的代码）；

生成广播结束地址（上行）；

生成播放地址（下游）；

打开小程序。

通过以上步骤，就可以基本完成直播小程序的配置了。

那么，广播地址和广播地址是如何生成的呢？ 它主要包含两部分。 如上图所示，左边的主播首先生成一个广播地址。 主播端小程序通过推送网址将视频推送到腾讯云。 腾讯云通过一系列的编码、传输、解码工作生成视频。 播放URL，通过播放URL（观看地址）将码流推送给观众。

遇到的一些陷阱以及解决方案

以上就是关于如何构建一个小程序内容。 腾讯NOW直播团队在开发直播应用时也遇到了很多问题。 杨春文从布局、大图、预加载四个方面详细讲解了痛点及解决方案。

布局之痛

问题描述：视频等元素不能与元素重叠。 视频和直播间元素很难融合。 cover-view 组件与普通组件差别太大。

解决办法：采用折中的办法来达到动态效果。 它是一个可用于复杂布局的本机组件。 但实施中也存在一些问题。 目前来看，比如实现的功能在小程序中使用时，手机温度会升高，出现发热等情况，解决办法就是将客户端实现和我们的Web实现结合起来。 性能差异化，适应不同端的需求。 与此同时，NOW直播团队也在尝试进行一些性能改进，以解决用户体验问题。

优化

问题描述：该函数用于将数据从逻辑层发送到视图层。 频繁的 DOM 操作会导致 UI 延迟。 同时，非常大的数据也会导致脚本执行时间过长，后台会产生冗余资源（CPU）。 /内存/电量...）消耗，占用前端JS执行。

解决办法：避免频繁操作。 比如我们不断滚动的评论、弹幕消息，每次显示都需要一开始进行一次操作，然后生成一个DOM操作，成本非常高。 改进方案是一次返回多条消息，并在小程序上以滚动的方式展示，避免一次生成一条消息，完成体验上的权衡。 另外，当时停止数据更新，从上一页切换到下一页，暂停上一页的推荐更新操作。

悲伤的大图景

问题描述：小程序渲染层是通过方法来进行的。 如果图片很大，不仅会占用过多的内存，还会造成延迟、卡顿。

解决方案：如果一定需要大图片，建议定期销毁这些大图片。 例如下面的图片只要在该区域就不会被破坏。 如果他们不在这个区域，他们就会被摧毁。 如果一些不必要的图片始终存在，就会对性能产生负面影响。 消耗会比较大。

预加载

问题描述：数据预加载和页面切换的过程比较耗时。

解决方案：当用户刚进入下一个页面时，页面仍然需要拉取数据并渲染。 这个过程需要从A页面到B页面，然后到数据。 中间A切换到B，里面有一段。 耗时，从A页面切换到B页面的过程中，可以同时拉取一份数据。 B页面进来，直接从这个数据中提取出需要的数据。 这样就不需要再次发送请求来再次拉取数据，这就避免了中间时间的消耗和其他延迟问题。

4 如何开发一个小游戏

目前小游戏的受欢迎程度是毋庸置疑的。 从全民“跳”到如今的“明星”，小游戏已经逐渐渗透到消费者的日常生活中，成为老少皆宜的娱乐产品之一。 腾讯微信高级工程师邹伟现场分享了《星路》的底层架构和研发设计，如何更好地利用微信的开放能力开发小游戏。

什么是小游戏？

从普通用户的角度来看，小游戏是小程序的一个子类别，可以在微信内轻松获取和传播。 只需单击一下即可玩它们，并提供出色的用户体验。 小游戏是小程序，普通用户无法区分，也不需要区分。

同时，从开发的角度来看，它可以看作是一个基于WebGL+微信社交开放能力的新平台。 下图是一个小游戏的架构概览：

这是一个典型的分层架构。 上方蓝色部分是游戏代码，分为三个部分：游戏逻辑、游戏引擎、weapp。 大多数游戏开发都会使用一些引擎工具、工作流程以及引擎封装的高级API来实现游戏逻辑。 第二个是weapp-，因为一方面，小游戏底层不是、也可以简单地看作是一个精简优化的平台； 另一方面，核心能力的落地是有借鉴意义的。 所以如果这里有一个适配器，将小游戏的底层API——wx API适配成一个封闭的接口，那么上层引擎和现有的游戏接入微信小游戏平台就会更容易。 这就是weapp-的作用。 其中只需要游戏逻辑。

中间层红色部分是微信和小游戏。 暴露给外界的能力称为wx API，它有一个基础库。 有一个jsvm用于执行游戏代码，在和iOS上使用。 再下一层是核心渲染能力的实现，包括2d和WebGL，当然还有微信开放能力相关的API的实现。

可见，小游戏和小程序在架构上是有区别的。 小游戏没有页面概念，wxss/wxml已经不存在了。 其次，底层实现不一样。 小游戏与小游戏之间的关系只能说是通过weapp的简单适配可以让渲染相关的核心能力保持一致，但同时很多现有的功能并没有等价的实现，比如作为迷你游戏。 没有DOM/BOM的概念，也没有全局/对象。

小游戏的入口是一个游戏js文件，语言是. 但存在一些限制，例如禁止执行动态代码，因此不支持 eval 和 new 等功能。 配置为game.json，可以配置横竖屏、界面超时等参数。 wx API的能力可以在js中结合起来实现游戏逻辑。 非代码资源应尽可能放在CDN上，以减少打包后整个代码包的大小，以加快用户的首次进入速度。 微信目前限制了首包的大小。 是4MB。

小游戏能力概述（小游戏能力在不断拓展，*新完整的能力请参考我们的开发文档）：

如何开发一款小游戏？

小游戏核心逻辑的开发流程与传统端游、页游、现在的手游没有太大区别。 这里我们将重点讨论如何更好地利用微信小游戏的平台开放性，包括小游戏引擎选择、设备/环境适配、微信登录、缓存、开放数据域、分享、支付、性能、版本更新机制、运维这些部分。

选择迷你游戏引擎

微信也与引擎厂商有比较密切的合作。 一般来说，当前的游戏引擎都会支持发布到多个平台。 针对微信小游戏新平台，已经适配了一些引擎，比如Cocos、Egret、. 适配的主要工作和之前提到的weapp-类似，将wx API的能力与引擎连接起来。 例如，引擎通常会针对小游戏平台对平台进行基准测试。 适配的过程就是将wx API映射到能力上，同时去掉只存在于能力上的依赖，比如不再依赖BOM和DOM。

设备/环境适应

微信本身运行在不同的操作系统平台上，比如iOS，不同的平台运行在不同的物理设备上。 微信上运行的小游戏自然面临着对不同类型设备和环境的适配。 当然，在能力方面，小游戏平台已经尽力消除了他们的差异。 但仍有一些任务需要开发进行针对性的优化，比如高分辨率屏幕，可以提供更高清的画质。 小游戏都会有API提供获取屏幕宽高、设备像素比等的能力。小游戏开发完成后，还可以在开发中发起真机测试的请求工具。 微信针对不同设备提供了测试集群，帮助开发提前发现问题。 基础库本身提供的wx API是一个不断迭代更新的过程。 对于使用新能力的小游戏，需要实现低版本兼容。 例如，如果检测到不支持新API的较低版本被允许损害服务用户。 同时，如果某个低版本的用户比例较小，可以考虑直接在管理后台配置小游戏所需的基础库的*低版本。 当然，这也意味着，当这群用户接触到这款小游戏时，微信客户端会弹出A提示，要求用户更新到新版本的微信才可以使用小游戏。 如果他不更新，你可能会失去这个用户。

微信登录

小游戏的登录流程与小程序类似。 用户需要自行定义登录状态。 / 代表小游戏开发与微信平台之间的信任协议，例如支付、托管数据上报等。 平台需要对其进行验证（仅作为交换），需要验证与用户相关的签名以保证请求。 来自小型游戏开发/用户，而非恶意第三方和随机捏造的用户。 它是应用程序状态，与用户无关。 它需要确保全局维护。 应该有一个中央控制模块来保证有效性。 同时，本地缓存在有效期内会直接使用，而不是每次使用时都生成新的。 否则，您可能会遇到呼叫频率限制错误，影响服务。 切记/不要放在前端代码中，否则可能会被坏人利用，损害小游戏开发/用户的权益。

缓存

缓存类型包括数据缓存和文件缓存。 数据缓存为key-value存储，适合结构化小数据存储，上限为10MB。 文件缓存提供了完整的文件系统API，包括目录/文件的添加、删除、修改和读取。 适用于频繁使用的网络资源的本地缓存，上限为50MB。

与浏览器不同，微信只提供基本的存储管理能力，不会对存储内容或存储满时删除内容进行任何操作。 开发可以灵活地自行定义缓存和淘汰策略，例如将经常访问的资源存储在文件系统中，并在文件存储满时清除一些*近访问的文件。

开放数据域

开放数据域是一个封闭的、独立的范围，与游戏逻辑执行的环境隔离——称为“主域”。 The is to open user data to third while user and the user of mini-games. The is the view. The to the main is game.js. The open data is an , and its entry file is index.js:

The the main and the open data is , and the basic is to only enter and not "exit".

Enter only: Allow data to enter the open data , that is, the main can go to the open at any time, and the open can local by the main .

No "out": Data in the open data is not to be to third-party . in the open data , index.js can user data, such as data of . Of , the final of the data index.js to the data in the form of and after data. After the is to be drawn to the upper of the main , the end user will see game.js on the . Draw such as , group or .

, the open data only 2D mode.

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等