五四青年节知识答题活动-CSDN博客

本文链接：https://blog.csdn.net/qq_29528701/article/details/130451578

基于优质的消防安全知识竞答活动小程序v2.0，进行快速搭建五四青年节知识答题活动。

答题活动小程序v2.0，基于云开发的微信答题小程序，软件架构是微信原生小程序+云开发。主要包含六大功能模块页面，首页、答题页、结果页、活动规则页、答题记录页、排行榜页。适用于交通安全答题、消防安全知识宣传、安全生产知识学习、答题活动、有奖答题等。

技术栈：微信原生小程序+云开发。

v2.0版本功能：

活动规则页
答题记录页
排行榜页
题库随机抽题
查询历史成绩
微信授权登录
获取微信头像和昵称等
首页、答题页、结果页
实现页面间跳转功能
实现转发分享答题成绩功能
实现用云开发实现查询题库功能
实现动态题目数据绑定
答题交互逻辑
切换下一题
提交答卷保存到云数据库集合
系统自动判分
答题结果页从云数据库查询答题成绩

v3.0全新升级拓展：

1）升级功能：

排行榜页排名机制，优化为取个人最佳成绩进行排名√
答题页、结果页界面，增加展示微信头像和昵称栏目√
由仅支持单选，升级为支持单选、判断、多选题型 √
各界面及功能一些小优化√

2）拓展功能：

注册登录页 √
题库学习 √
错题集 √
查看所有用户的答题记录-管理员 √
查看用户的答题成绩以及答题情况-管理员 √
后台题库管理系统-管理员 √
题目增删查改-管理员 √

技术点

微信头像昵称填写功能

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
 
Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

对象中的动态属性名称

在现代 javascript 中，使用动态键设置对象很简单。使用“[‘key’]”可以添加属性。

例子：

var stu_address = 'address';
var student = {
    name:'mick',
    age : 10,
    stu_address : 'chennai'    
 
 
}
// {name:'mick', age : 10, stu_address : 'chennai'}
 
 
/*Using notations you can change the key dynamically*/
 
 
var stu_address = 'address';
var student = {
    name:'mick',
    age : 10,
    [stu_address] : 'chennai'    
 
 
}
 
 
//{name: 'mick', age: 10, address: 'chennai'}

解构赋值

const student = {
    name : 'mick',
    age : 10,
    gender : 'male'
}
 
 
/*Before ES6 : */
 student.name // "mick"
 student.age //10
 student.gender // "male"   
 
 
/*From ES6 (using this feature) : */
 
 
const {name,age,gender} = student;
 name // "mick"
 age // 10
 gender // "male"

与你分享的一些关于Javascript的技巧，希望你能从中学到一些有用的东西。