导语 | 2020腾讯游戏年度发布会以线上直播的形式进行，区别于往年的线下toB模式，线上直播面对的是所有玩家，所以在直播内容、直播落地等方面，都要考虑如何做得更加toC。参与量如此大、互动如此多、内容如此丰富的线上服务类互动小程序应该如何实现呢？本文就将为大家一一做介绍。

一、背景

受疫情影响，2020 腾讯游戏年度发布会以线上的形式进行。区别于往年的线下 toB模式，线上面对的群体比较广泛，同时也希望更能贴近玩家，所以在线上发布的内容和线上呈现形式等方面，都要考虑如何做得更加玩家向。

发布会从预热到发布会结束，历经42天，结合各个时间节点曝光不同模块，三端都有针对性落地输出，下文将为大家一一做展开。

二、如何实现炫酷的倒计时特效？

5月18日开始，双端官网就上线一版倒计时页面，展示发布会日期和腾讯游戏的新slogan “Spark More”。

页面虽然简单，但是意义非凡，这是承接腾讯游戏品牌升级后，延续“Spark More ！去发现无限可能”的主 KV，同时又结合 toC 的视觉表达。我们敬业的设计师，不仅想出了这个创意，还细腻地拆解了时分秒针在不同情况的不同效果。

笔者收到需求之后，就赶紧进行技术预演。先对设计稿和动画需求进行分析，结合查询的资料，最终决定使用 CSS3 的圆锥渐变 conic-gradient[1] 来实现时钟效果。

视觉原理：时针和分针组成一个扇形，秒针和时针/分针组成另外一个扇形，时针、分针、秒针根据真实时间运转。

技术实现：两个全屏大小重叠的div，都用conic-gradient填充背景色。上层是秒针扇形，下层是时针分针扇形。已知扇形开始和结束颜色，秒针和时针/分针之间的角度，秒针起始角度（0°~360°），就可以渲染扇形了。色块外的区域，用rgba(0,0,0,0)填充，实现穿透效果。

<!--绘制秒针色块-->
<div style="width: 100%;height: 100%;background:
conic-gradient(from 0deg at 50% 50%, #F1977D, #FA466D100deg, #000000  100deg,#000000  360deg);"></div><!--旋转到起始位置-->
<div style="width: 100%;height: 100%;background:
conic-gradient(from 340deg at 50% 50%, #F1977D, #FA466D100deg, #000000  100deg,#000000  360deg);"></div><!--色块外填透明色-->
<div style="width: 100%;height: 100%;background:
conic-gradient(from 340deg at 50% 50%, #F1977D, #FA466D100deg, rgba(0,0,0,0)  100deg,rgba(0,0,0,0)  360deg);"></div>

时针和分针在不同角度色块显示方向、色值不同，秒针在色块内/外显示方向、色值不同，就要细心区分情况处理了。

// 秒针
if( Math.abs(hAngle - mAngle) > 180 ){ //时针分针角度大于180if(hAngle < mAngle){//时针在前，区域紫色开始}else {//时针在后，区域橙色开始}if( sAngle < small || sAngle===small){//区域内最小}else if(sAngle > big){//区域内最大}else{//区域外}
}else{//时针分针角度小于等于180if(hAngle > mAngle){//时针在后，区域紫色开始}else {//时针在前，区域橙色开始}if( sAngle > small && (sAngle < big || sAngle === big)){//区域内}else if(sAngle>big){//区域外最大}else {//区域外最小}
}

最终效果图，PC官网：

视频高清版：

移动官网：

视频高清版：

针对不支持conic-gradient属性的浏览器，我们就降级显示放一张静态的美美的背景图。

三、如何更高效的联合开发三端官网？

在开发发布会小程序的同时，预约版小程序还要进行多次的内容模块新增迭代，工作量非常巨大。当然，这种情况在项目初期就已经预想到了，所以早早就和协作同学定好合作的方式、使用的工具等。

1. 每个内容模块用组件方式提供

考虑到这几期是内容向输出，找了非常靠谱的同学协助做重构部分。小程序里每个模块独立开来做成了组件 component，这样合并代码方便，也不容易冲突。

<!--619大咔爆料--><block><swiper-item><daka /></swiper-item>
</block><!--615经典重燃-->
<block><swiper-item><jdcr /></swiper-item>
</block>

发布会小程序里，议程模块和游戏页面，也是内容向的，也用了同样的 component合作方式。议程信息通过 properties 传递到组件内，对当前议程高亮渲染。

<agenda chapter_id="{{adminData.chapter_id}}"
product_id="{{adminData.product_id}}" />

2. 配置文件填充内容

小程序区别于网页发版，是需要比较多的审批流程和时间的。而发布会小程序，内容极多且需要花费大量时间向各方收集资料，不可能等资料收集全了才开始进行开发工作，于是从预约版小程序开始，就采取配置文件填充内容的方式进行开发。

第一：议程模块的 json 文件，做成3端（PC/移动/小程序）通用。有特殊情况需要修改内容，修改一个文件，三端都更新了，省去很多人力以及小程序审核发布的复杂流程。

第二：活动规则用 json 配置，产品要修改的话很方便，还不用催着我们帮忙改，双赢。

第三：好友列表 logo 待定、名单随时增删，也是靠 json 才能如此灵活地修改。

第四：发布会小程序因为类目修改的原因（直播和社交类目第一次审核需要至少7个自然日+3个工作日），6.12开始有2周时间不能发版，正好涵盖6.15和6.19两个版本。跟品牌说明情况，并给了2个方案，他们决定采用第2个方案：紧急先设计和重构好这两天要发版的小程序模块，内容用 json 配置，这样可以后期修改，再把模块提前埋到小程序里，再利用 json 判断当前应该展示哪个版本内容。

<!--619大咔爆料-->
<block wx:if="{{version===619}}"><swiper-item><daka /></swiper-item>
</block><!--615经典重燃-->
<block wx:if="{{version===615}}"><swiper-item><jdcr /></swiper-item>
</block>

四、如何打造高并发实时互动小程序？

我们团队做过很多线下服务类互动小程序，如TIEM年会小程序、英雄联盟观赛助手等，同时参与人数不超过2千人，我们在上半年也做了CF赛事助手小程序等。

但这次却是第一次做参与量如此大、互动如此多、内容如此丰富的线上服务类互动小程序，其实就2个点最关注：如何实时互动以及如何抗住高并发？

所以笔者在认真学习了口罩预约小程序“穗康”的分享课程 ，并且找了几个有丰富线下服务经验的同学取经，跟开发、品牌、产品多次讨论确定了最终的解决方案。

1. 如何实时互动？

关于实现实时互动，我们团队已经很有经验了，做了不下3个线下实时互动的案例，关键点在于使用了云开发 watch [2]。但是这次发布会参与量大、官方阵地要稳定，所以肯定需要有更多解决方案来选择及互补。

这次小程序的最大亮点是50+个发布会环节，每个环节有自己的定制互动。例如和平精英环节，会有和平精英专场掉落抽奖、和平精英闪现社区弹幕、议程也需要高亮和平精英模块等，如下图所示：

也有的环节是议程高亮同一个模块，抽奖和闪现社区弹幕却是不同游戏的。盘点了下，需要用90+个开关来实时控制。

那么怎么实现90+个开关实时控制页面上所有的互动？我们考虑过下面3个方案：

方案一：接口轮询——常规操作，后台需要考虑好高并发的问题

方案二：json 文件轮询——在发布系统更新发布包含当前环节信息的 json，小程序轮询方式请求 json 文件。这个方案页面反应不够及时，压力从后台转移到了当天负责更新 json 文件的同学身上

方案三：云开发数据库的实时数据推送——原生能力[3]，开箱即用，无需管理长连，无需编写服务端代码，无需搭建和管理基础设施，自动收到更新推送。

自然是第三个方案最好，简单易上手、小程序原生能力！但我们还需要确定一件事情：它所能支持的最大连接数。

watch 给到每个用户最大限制是 5w 连接数。我们预估了发布会当天 DAU，5w 连接数是不够用的，最后在云开发同事们的帮助下完成了扩容服务，并且提前做了压测，在活动访问峰值期间都毫无压力。

所以我们就选择了第三个方案——云开发数据库的实时数据推送。非常简单，记住一个API——watch 就够了。小程序可通过 watch 实时监听数据库变更，收到包含更新内容的推送后，做出实时响应。

毕竟有90+个开关，为了方便品牌大大操作，我们也做了一个简单的小程序管理端。

管理端开启某个议程开关，小程序监听的集合数据就更新到对应议程的所有配置，包括章节id、产品id、议程id、是否有抽奖、是否有闪现弹幕、是否需要预约等。

而发布会小程序，就是在监听议程和答题集合的数据是否有更新，来判断当前议程以及当前答题环节。

//监听当前议程开关
loadAdminConfig(cb) {let that = thisconst db = wx.cloud.database()that.globalData.adminWatch = db.collection('adminConfig').watch({onChange: function (result) {let adminData = result.docChanges[0].docconsole.log(adminData)},onError: function (err) {console.error('the watch closed because of error', err)}})
}

还需要在适合的地方设置开始监听，在页面 onshow 的时候开始监听，onhide 的时候关闭监听，这样既不浪费监听数，也能尽量避免计划外的操作导致 watch 断连后无法重新连接。

onShow: function(){app.loadAdminConfig()
}onHide: function () {app.globalData.adminWatch && app.globalData.adminWatch.close().then(() => {app.globalData.adminWatch = null})
}

watch 使用起来就是那么简单，效果却是超乎想象！简单的模块是否显示用 wx:if 即可，有些需要在某个议程才去请求接口做逻辑处理的，可以写在 watch 里。

<view wx:if="{{adminData.lottery_status}}" bindtap="lottery">抽奖</view><view wx:if="{{queStatus[item]==='choose'}}">请答题</view>
<view wx:if="{{queStatus[item]==='waiting'}}">等待开奖</view>
<view wx:if="{{queStatus[item]==='luckylist'}}">中奖名单</view>//监听当前议程开关
loadAdminConfig(cb) {let that = thisconst db = wx.cloud.database()that.globalData.adminWatch = db.collection('adminConfig').watch({onChange: function (result) {let adminData = result.docChanges[0].docif(adminData.agenda_id > 108){}},onError: function (err) {console.error('the watch closed because of error', err)}})
}

发布会环节开始才放开弹幕互动入口。

议程有抽奖，才会出现抽奖入口，并且展示的是提供当前抽奖环节奖品的产品logo。

主持人口播：“查看 Spark 幸运鹅中奖结果吧！”的时候，会充满仪式感的全屏弹窗展示中奖名单，这也是通过管理端的议程开关控制的。

实时监听除了议程，还有答题环节。整个发布会有5个答题抽奖环节，每个题目在停止答题后，会进行后台抽奖。品牌和产品验证名单没问题后，即可展示中奖名单。

发布会或者线下项目必须要考虑周全，都是一次性短时间高并发活动，没有机会给你查漏补缺。

所以我们还给 watch 想了一个备案：监听失败（onError）的时候就用上面提到的第二个方案开始每秒轮询同步更新的 json 文件，json 里的数据和结构跟 watch 的一样，所以整体交互流程方面是不需要做额外修改的。

结果也证明云开发数据库的watch是非常靠谱的，轮询都没用上~

五、结语

作为承载腾讯游戏年度发布会首次线上举办、首次 toC、首次进行实时互动的小程序，它也算是良好完成了自己的任务。

特别要感谢腾讯云和小程序提供的好用、易用、靠谱的实时数据推送能力 watch，让我们的创意能更好的落地。

所有的经历都会成为财富，这次项目对每个人来说都是很多新知识领域的学习，感谢一起合作的伙伴们。

参考资料：

[1] CSS3圆锥渐变conic-gradient:

https://caniuse.com/#search=conic-gradient

[2] 云开发watch:

https://developers.weixin.qq.com/minigame/dev/wxcloud/reference-sdk-api/database/collection/Collection.watch.html

[3] 云开发数据库实时数据推送能力：

https://developers.weixin.qq.com/community/develop/article/doc/000e860d128680d5211981d3556013

文章福利

本文有给到你新的启发吗？下期你想看到什么样的技术话题？请在评论区与我们一同交流，我们将随机抽选参与互动的同学送出下方图书。

《HTML 5与CSS 3权威指南》

本书是HTML 5与CSS 3领域公认的标杆之作，被读者誉为“系统学习HTML 5与CSS 3的标准著作”，也是Web前端工程师案头必备工作手册。

上册系统地讲解HTML 5相关的各项主要技术；下册全面系统地讲解CSS 3相关的各项主要技术，以CSS 3的功能和模块结构开篇，顺序讲解了各种选择器、文字与字体、盒相关样式、背景与边框、变形处理、动画、布局、多媒体，以及CSS 3中的一些其他重要样式。

文章推荐

「数据工匠」燃爆夏日，一线技术大佬成团出道！