基于云开发模式的评分小程序总结！二维码、导出excel表格等实用干货！

1、TAKE打分小程序

1.1、项目简介

1.1.1、开发背景

市面上评分类型的小程序，基本都有以下不足：

1. 界面元素驳杂、美观效果不佳
2. 操作模糊复杂
3. 功能单一

1.1.2、项目介绍

“TAKE 打分”小程序是一款用于活动评分并实时得出分数的一款小程序，可适用于项目评分、活动现场评分等场所。

评分是以二维码扫码评分的形式，由项目组负责人发起评分并生成相应的二维码，用户即可通过扫描二维码进行评分，结果将以订阅通知形式推送给负责人。

同时小程序还有一个**“组别”的功能，若一个活动有多个项目，可先由活动负责人创建组别并生成密码，小程序将通过订阅通知**的形式把密码发送给活动负责人。各个项目组在发起评分时选择对应的组别，后续活动负责人即可通过输入密码下载该组别下的所有项目组信息。

1.2、项目效果图

1.2.1、主页

1.2.2、评分流程页

1.2.3、项目详情页

1.2.4、组别页面

1.2.5、使用说明及导出记录页面

1.2.6、导出excel表格

2、技术应用

开发模式：微信小程序云开发
UI界面使用到的组件：Vant组件、ColorUI组件库、自定义组件
接口：微信开发文档提供的多个接口

3、功能开发详解

3.1、发起评分

功能思路：项目发起者可通过界面的“发起评分”按钮进入活动信息填写界面，提交活动信息后，小程序将自动生成二维码，其他用户扫描此二维码即可评分。
技术要点：

1. 数据合法性校验
   检验用户输入数据的合法性，即输入数据不为空。而判断数据不为空，应不止要判断是否为空字符串，还应判断是否输入空格，见以下代码示例：

 if (this.name == "" || this.name.indexOf(" ") >= 0) {
    //遍历搜索字符串中是否存在空格
            ml_showToast('名称不可为空！请重新输入！')
            this.setData({
   
                inputTxt: ""
            })
            return

        }

2. 数据类型转换
   如输入评分人数时，由于小程序在获取input组件的数据时，默认类型为String型，因此需要将其转换为Int型，可通过parseInt()方法实现，见以下代码示例：

this.raters = parseInt(params.raters)

3. 图片上传
   图片上传使用的是wx.chooseImage()接口，具体可见微信开发文档，以下为项目示例：

wx.chooseImage({
   
            count: 4, //默认9
            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album'], //从相册选择
            success: (res) => {
   
                if (this.data.imgList.length != 0) {
   
                    this.setData({
   
                        imgList: this.data.imgList.concat(res.tempFilePaths)
                    })
                } else {
   
                    this.setData({
   
                        imgList: res.tempFilePaths
                    })
                }
                that.imgListInfo = that.imgListInfo.concat(res.tempFilePaths)
            }
        });

4. 图片放大预览
   图片预览使用的是wx.previewImage()接口，具体可见微信开发文档，以下为项目示例：

wx.previewImage({
   
            urls: this.data.imgList,
            current: e.currentTarget.dataset.url
        });

3.2、用户评分

功能思路：用户可通过”扫描二维码“或者”搜索活动名称“的方式进入评分页面，选择分数提交即可
技术要点：

1. 用户信息授权
   在用户第一次评分时，小程序需要获取到用户的基本信息，因此需要取得用户的授权，这里使用的是wx.getUserProfile()接口，见以下代码示例：

 let res = await wx.getUserProfile({
   
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      })
      console.log(res.userInfo)

2. 匿名与实名制评分
   用户在提交评分时可自主选择是否匿名，若用户选择匿名，则小程序后台会只获取到用户的openId、分数及备注信息，收集用户的openId也是为了后续区分用户是否重复提交。

3.3、组别功能

功能思路：给用户1对n的用户体验，即一个管理者可以管理多个活动。具体应用场景如高校期末答辩，教师可以先创建一个班级分组，创建成功将随机生成密码并通过订阅通知的方式，将密码推送给教师，教师可通过此密码下载班级所有活动信息，学生只需要在创建活动的时候选择该分组即可。
技术要点：

1. 分组实现
   由于项目是基于云开发平台开发，所以在实现分组时，可以创建一张数据表用于存储所有组别信息，同时在项目活动表新增一个组别字段，用户在创建活动时可选择对应组别，并将数据更新到项目活动表中即可。

  //提交新增组别信息
  async submitNewStuInfo(e) {
   
    //表单输入框提交的内容包含在e参数中

    var that = this
    let isExist = false //判断组别是否存在
    let className = e.detail.value.className //获取输入框输入的组别名称

    //判断输入是否为空 或 都是空格的情况
    if (className == '' || className.indexOf(" ") >= 0) {
   
      ml_showToast('请输入组别名称')
      return
    } else {
   
      ml_showLoading()
      let res = (await classInfoExcel.get()).data //获取classInfo表的数据，便于下面组别唯一性检查
      for (let i = 0; i < res.length; i++) {
   
        if (res[i].className == className) {
   
          isExist = true
          break
        }
      }
    }

    //如果组别名存在，则isExist=true
    if (isExist) {
   
      ml_hideLoading()
      ml_showToast('名称重复！请重新填写！')
      return
    }

    //判断组别信息是否填写正确，填写正确则isCurrent为true，用于判断是否可成功订阅通知
    this.isCurrent = true
    that.className = className

    // 每一个组别会随机生成一个密码，并将该密码发送订阅通知给用户
    let password = Math.random() * 1000000
    password = Math.round(password)
    that.password = password

    //将组别信息添加进classInfo表
    await classInfoExcel.add({
   
      data: {
   
        className: className,
        password: password
      }
    })

    ml_hideLoading()
    //vant的弹窗组件
    Dialog.alert({
   
      title: '密码',
      message: '组别密码为' + password + ',请谨慎保管！建议开启订阅通知，系统将自动推送密码信息！',
    }).then(() => {
   
      // on close
    });
  },

3.4、订阅通知

功能思路：用于给用户推送订阅通知，如评分成绩、组别密码等。
技术要点：

1. 订阅通知功能
   
   接口使用方法可见微信开发文档，具体示例如下：

• 发起订阅请求

// 订阅通知
  async requestSubscribe() {
   

    var that = this
    const templateId = 'laCv9R0SmaX-E_GHAd2uv3jPB0KCaIK6IuIHEcfZ60I' // 模板ID

    // 发起订阅通知请求
    await wx.requestSubscribeMessage({
   
      tmplIds: [templateId],
      success: (res) => {
   
        if (res[templateId] === 'accept') {
   
          // 订阅成功，订阅记录存入数据库

          db.collection("class_subscribe").add({
   
            data: {
   
              subMsg: {
   
                thing1: {
   
                  value: '您的组别' + that.className
                },
                thing4: {
   
                  value: '密码为' + that.password
                },
              },
              status: