/QCDH-wxapp

路演扫码投票类小程序

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

路演扫码投票小程序

这个小程序主要解决的是在一些线下的路演中需要观众扫描不用二维码进行投票的问题

程序截图及小程序码

使用场景

这个小程序应用在武汉大学思政超市青春导航的线下路演中。参赛队伍被分为3条赛道,每1名参观的观众可以在每1条投出3票,投满9票投票方为有效。同时,在投满9票后,可以参与抽奖。

前端实现

上述功能共由两个页面实现:

  1. home:这个界面上共显示9张卡片。用户每扫1个队伍二维码代表为这个队伍投出1票,并获得一张卡片。集齐9张卡片则显示“抽奖”和“查看投票”按键。
  2. question:这个界面按照得票降序显示投票结果。

用户认证实现:通过wx.login获取code发送至后端获取唯一的openid认证用户

抽奖实现:抽奖的逻辑由后端完成,前端获取formId通过模板消息以推送的方式告知用户结果

图片预加载

小程序因为有2M的限制,绝大部分图片在挂在图床上的,那么在加载的过程中会存在一定的加载时间。微信小程序的逻辑是加载多少就显示多少,这也就导致图片会在刚加载时出现加载不全的问题。这里就需要做图片的预加载,但是由于微信小程序是没有Image对象的,就需要我们自己去写,我在github上找到了一个京东的小程序使用的方案wxapp-img-loader

这里面的解决方案是:通过<image>自带的bindload()在图片完全加载后再调用显示出来,但是在实际使用时需要多次在.wxml.js中多次引入组件,同时同一个页面中多个图片的demo在图片未完全加载前是采用不显示的方式解决的。

于是我自己写了预加载的逻辑:在图片未完全加载前显示本地的图片,在图片完全加载后进行替换显示。如果有时间,我过几天把这个做成一个可以直接在.json中引入的组件再发上来,这里立一个小小的Flag🚩

致谢

作者

Chnja from WuHan University

版权信息

Copyright © 2019, Chnja Released under the GNU General Public License v3.0.