#小程序云开发挑战赛#-薇科技弹幕墙-单身狗
发布于 4 年前 作者 guiying40 1481 次浏览 来自 分享

云开发挑战赛开源作品——薇科技弹幕墙

一、使用说明:

介绍  
该小程序是用于晚会等活动,在大屏幕上显示实时弹幕的弹幕墙,且可以自定义活动的名称、审核弹幕等等;
登录  
打开小程序后,无论是新建活动还是发弹幕都需要采集头像和昵称,因此需要点击头部的“点击登录”按钮,进入到登录/授权页面;  
![](https://image.wxopen.club/content_86d92006-ffb8-11ea-a0bf-001a7dda7111.png)![](https://image.wxopen.club/content_86eca6c0-ffb8-11ea-8830-001a7dda7111.png)
管理  
登录完成后可以点击下方标签栏中“管理”标签进入到管理页面,该页面可以新建活动、管理已有活动、审核弹幕等操作;  
![](https://image.wxopen.club/content_8703018a-ffb8-11ea-adf3-001a7dda7111.png)
新建活动  
点击管理页面的“新建活动”按钮进入到新建活动/编辑活动页面:输入活动名称后点击新建活动即可迅速新建一个活动,如果需要设置用户可以发送的弹幕长度(字数),可以修改弹幕限制;如果不需要审核弹幕(用于不是很严谨的活动),可以设置弹幕审核为不审核,不审核之后用户发送的弹幕会直接出现在弹幕墙上;新建活动成功后会看到如下内容:(1)如果需要暂停用户发弹幕,可以设置是否启用为停用,点击保存更新后用户再次发弹幕时会提示管理员暂时停用该活动;(2)活动链接是一个web页面,点击复制链接,并通过粘贴到文件传输助手等方法传到电脑上,复制该链接到浏览器打开即可看到弹幕墙;(3)弹幕码和管理码在点击后可放大,放大后长按图片可保存,扫弹幕码后可发弹幕;扫管理码后可审核弹幕或编辑活动的设置;  
![](https://image.wxopen.club/content_870f0f64-ffb8-11ea-a093-001a7dda7111.png)![](https://image.wxopen.club/content_8729003e-ffb8-11ea-b561-001a7dda7111.png)
弹幕墙  
在这个网页中,当有人发送的弹幕通过审核或者发送了不需要审核的弹幕会立即出现在该页面上,并附带次人的头像、昵称、发弹幕时间;头部会显示之前设置的活动名称,左右两侧会显示总弹幕数及弹幕码,用户在扫弹幕码或者并登录之后可以直接发弹幕(或者输入弹幕码下方的活动ID进入活动);(绝大多数浏览器按F11可网页全屏,效果更佳)  
![](https://image.wxopen.club/content_87452842-ffb8-11ea-8b20-001a7dda7111.png)
发弹幕  
如果通过扫弹幕码进入发弹幕页面,下方的当前活动后会显示该活动的名称,在登录过后可以直接输入内容发送弹幕;如果未扫码而是点击下面标签栏中“弹幕”标签进入,可以输入活动ID加入到该活动中;上方会显示该用户曾经发过的弹幕;如果评论通过了审核或不需要审核则显示绿色的勾号;如果评论待审核或者未通过审核则显示黄色的感叹号;  
![](https://image.wxopen.club/content_87541b24-ffb8-11ea-a259-001a7dda7111.png)![](https://image.wxopen.club/content_8765a8b4-ffb8-11ea-8c3a-001a7dda7111.png)
审核弹幕  
通过扫新建活动/编辑活动页面的管理码进入到管理页面可以审核需要审核的弹幕;点击绿色的勾号表示通过,点击红色的叉号表示不通过;通过审核的弹幕会出现在弹幕墙上;  
![](https://image.wxopen.club/content_8773c49a-ffb8-11ea-be79-001a7dda7111.png)
关闭活动  
在管理页面点击曾经新建的活动如“某某活动”可编辑活动设置;设置是否启用为停用即可关闭该活动的使用;

二、应用场景

  1. 这是一款任何人都可以使用的弹幕墙,在登录之后新建活动就可以获得一个独立的弹幕墙链接,并附带小程序码和活动ID,通过扫码或输入ID的方式可以加入该活动并发弹幕,所发弹幕通过审核后会实时显示在弹幕墙链接中的评论区,用于晚会等互动,后续会继续添加抽奖、签到等常用功能;

三、目标用户

  1. 活动的组织者如学校的学生会负责人、公司活动负责人等新建活动管理活动审核弹幕;活动的参与者如学校的学生、公司的员工等可参与活动发弹幕;

四、实现思路

  1. 基于云开发watcher的强大性能,让我们用简单的代码实现实时数据的功能,一方面用户发送的需要审核的弹幕会实时显示的管理员的管理页面中,另一方面通过审核的弹幕会实时显示在弹幕墙上;
  2. 通过动态的生成小程序码来服务于不同的活动,使得一个小程序能为成千上万的活动所服务;
  3. 通过cocoscreator实现弹幕上墙的功能,同时混淆了代码,避免弹幕墙链接中暴露的数据安全问题;
  4. 通过静态资源托管服务实现弹幕墙链接的访问;

五、架构图

  1. 太简单了没啥好架构的;

六、效果截图

  1. 见一中的使用说明;

七、功能代码展示

  1. 本作品完全开源,代码托管地址:微信开发者-代码管理
  2. 代码中小程序首页使用了开源插件wemark实现帮助文档的markdown语法;
  3. 云函数中server_newactivity使用wxacode.get生成小程序码是因为小程序还未上线,但该方法生成的小程序码有数量限制,在上线之后要改成wxacode.getUnlimited,同时需要更改原函数中config.json文件中的permissions,将wxacode.getUnlimited加入到openapi中,移除原先的wxacode.get;改完后重新上传函数,大约会有1-10分钟的缓存时间;
  4. 代码中的cocoscreator文件夹是生成弹幕墙web的cocoscreator项目源码,使用2.4.0版本可打开并编辑;
  5. cocoscreator导出的web使用tcb工具上传到静态资源托管平台:tcb hosting:deploy . -e envId部署当前文件夹内所有文件到托管平台;

八、作品体验二维码(如已上线)

九、团队简介

两只单身狗

5 回复

很有创意,我喜欢

有意思,不错!

真是太好了!构思巧妙,方便可行!思维新颖,值得推广!

回到顶部