Voting and selection activity applet
This is the home page of a voting applet, where users can see the list of votes that have been released. Each voting item includes information such as title, options, and voting deadline. Users can learn about voting information through the poll title and voting deadline, and can click the voting button to vote.
The following is the interface design and implementation of a simple voting applet.
User login
This is the user login page. Users can choose to log in with a WeChat account to obtain the user's openid, avatar, nickname and other information to improve the security of voting.
Get event information
When the initial rendering of the monitoring page is completed, the activity information is obtained, mainly including the page views of the voting selection activity, the accumulated votes, the number of participants, the end time of the activity and other information, which is used to display the information on the page.
Through an asynchronous request, read the voting activity information of the voteActivity data table. Collection.doc() is used here to obtain the reference of the specified record in the collection. The method accepts an id parameter specifying the _id of the record to reference.
The implementation code is as follows:
// 显示 loading 提示框
wx.showLoading({
title: '加载活动中'
});
// 数据库集合的聚合操作实例
voteActivity
.doc(id)
.get()
.then(res => {
// 获取集合数据，或获取根据查询条件筛选后的集合数据。
let data = res.data || {};
let activityInfo = data;
// 隐藏 loading 提示框
wx.hideLoading();
})
Read the list of judges
Connect to the cloud database on the applet side to read the list of selected characters;
The key code is as follows:
// 连接云数据库
const db = wx.cloud.database();
// 获取集合的引用
const voteWorks = db.collection('voteWorks');
// 数据库操作符
const _ = db.command;
// 显示 loading 提示框
wx.showLoading({
title: '拼命加载中'
});
// 数据库集合的聚合操作实例
voteWorks
.where({
_id: _.exists(true)
})
.orderBy('name', 'desc')
.get()
.then(res => {
// 获取集合数据，或获取根据查询条件筛选后的集合数据。
let data = res.data || [];
// 将数据从逻辑层发送到视图层，通俗的说，也就是更新数据到页面展示
this.setData({
participantList:data
});
// 隐藏 loading 提示框
wx.hideLoading();
})
Vote
This is the voting page, where users can choose the option they support to vote, and if they have already voted, they can view the voting results at this time.
Voting result display
After the voting deadline, users can view the current voting results on the voting page, and the results will be updated in real time. The administrator can visually see the ranking results of the current vote on the background leaderboard page.
The above is the interface design of a simple voting applet, which needs to be optimized and adjusted according to actual needs.