1. UU电玩城首页
  2. > 编程日记

小程序cloudbase之管理员发布二维码，登录用户实时获二维码（携带每个用户的openid、用户信息），管理员通过扫描来重新入库筛选已领取的用户（用户的二维码每一段时间刷新一次）

lqj_本人 • • 1年前 • 编程日记 • 阅读(16) • 违法举报

目录

需求背景

本人提供的思路

（思路仅限于本人思维，若诸位有更吊的逻辑思维可以评论区见~）

管理端发布二维码

用户端渲染二维码列表

用户端二维码信息处理

用户端生成二维码

管理端扫描处理

后期统计处理

需求背景

现在某大学要举办一个活动，每个人只能进入一次，并且二维码要隔一段时间一刷新，并且不能使用别人的名额，参加的用户要记录下来。

本人提供的思路

（思路仅限于本人思维，若诸位有更吊的逻辑思维可以评论区见~）

注意：由于本人用的时cloudbase开发的项目，使用canvas生成栈内二维码存入云储存时会出现二维码的压缩形式（会出现二维码中部分乱码情况），现在这个bug目前来说开发时使用模拟器是没有任何bug的，但是真机调试时就会出现二维码压缩情况。

所以，我昨晚就重构了自己的逻辑思维，想出了以下方法：

管理端发布二维码

创建“GLY_Two_dimensional_code”用来存放管理员发布的二维码的 主题、内容、时间、时间戳（其实这里管理员发布二维码时，其实"假发布"的状态，这里只是在GLY_Two_dimensional_code数据库中标记了，管理员发布的二维码中所需要携带的参数）

fabu(){
      let that = this
      var DATE = util.formatTime(new Date());
      wx.cloud.database().collection('GLY_Two_dimensional_code').add({
        data:{
          title:that.data.text,
          content:that.data.text1,
          time:DATE,
          SJ_CHUO:Date.now()
        }
      })
       wx.showToast({
         title: '发布成功',
         icon:'none'
       })
       setTimeout(()=>{
        wx.navigateBack({
          delta:1
        })
      },500)
    },

用户端渲染二维码列表

用户进入自己的二维码渲染列表页面，此时利用前端的生命周期钩子函数触发，在获取本机登录用户的信息的情况下，去访问GLY_Two_dimensional_code数据库中管理员发布的二维码参数。拿到管理员发布的参数（发布此条二维码的时间戳、标题、内容）之后，先访问一下Two_dimensional_code数据库中用没有本机用户的数据（关于管理员最新发布的二维码参数），如果有就直接渲染到列表中，如果没有就把获取到的发布的二维码参数与本机用户信息参数结合添加到Two_dimensional_code数据库中，并将每一个加入数据库Two_dimensional_code的数据条中加入一个"控制开关"：zhuangtai: true。zhuangtai关键字如果参数为true说明该用户还没有被管理员扫描。之后再调用生命周期钩子函数根据：_openid: res.result.openid,zhuangtai: true两个字段来重新查询Two_dimensional_code数据库中的数据条，并将他们渲染到前端。

  getdata() {
    let that = this
    wx.cloud.callFunction({
      name: 'getusers',
      data: {}
    }).then(res => {
      that.setData({
        openid:res.result.openid
      })
      wx.cloud.database().collection('users').where({
        _openid:that.data.openid
      }).get({
        success(res){
          console.log(res.data[0],'用户数据');
          that.setData({
            xuehao:res.data[0].xuehao,
            xingming:res.data[0].xingming
          })
          const db = wx.cloud.database()
    const collection = db.collection('GLY_Two_dimensional_code') // 替换为你的集合名称
    collection.orderBy('SJ_CHUO', 'desc').limit(1).get().then(res => {
      const latestData = res.data[0] // 获取最新的一条数据
      // console.log('最新数据：', latestData)
      that.setData({
        title: latestData.title,
        time: latestData.time,
        content: latestData.content,
        SJ_chuo: latestData.SJ_CHUO
      })
      wx.cloud.database().collection('Two_dimensional_code').where({
        _openid: that.data.openid,
        SJ_CHUO: that.data.SJ_chuo,
      }).get({
        success(res) {
          console.log(res,'ppppppppppppppp');
          if (res.data.length < 1) {
            wx.cloud.database().collection('Two_dimensional_code').add({
              data: {
                img: that.data.cloud_url,
                title: that.data.title,
                content: that.data.content,
                SJ_CHUO: that.data.SJ_chuo,
                xuehao:that.data.xuehao,
                xingming:that.data.xingming,
                zhuangtai: true
              },
              success(res){
                console.log('okokokoko');
                that.onShow()
              }
            })
          } else {
            console.log('已经添加了');
          }
        }
      })
    })
        }
      })
    })
  },
  onShow() {
    this.getdata()
    let that = this
    wx.cloud.callFunction({
      name: 'getusers',
      data: {}
    }).then(res => {
      wx.cloud.database().collection('Two_dimensional_code').where({
        _openid: res.result.openid,
        zhuangtai: true
      }).get({
        success(res) {
          // console.log(res, '返回数据');
          that.setData({
            Two_dimensional_codes: res.data
          })
        }
      })
    })
  },

 

用户端二维码信息处理

用户点击二维码列表中的每一条时，通过获取用户点击获取到该条数据的_id，并携带该_id跳转到用户二维码展示页面。

<view wx:for="{{Two_dimensional_codes}}" wx:key="index">
  <view style="display: flex;flex-direction: row;justify-content: space-around;">
    <navigator url="../user_Two_dimensional_code_XQ/user_Two_dimensional_code_XQ?user_Two_dimensional_code_XQ_id={{item._id}}" style="width: 90%;background-color: rgb(255, 255, 255);border-radius: 30rpx;height: 100rpx;margin-top: 30rpx;">
      <view style="font-size: 30rpx;font-weight: bold;margin-left: 50rpx;margin-top: 20rpx;">{{item.title}}</view>
      <view style="color: gray;font-size: 20rpx;margin-left: 450rpx;margin-top: 10rpx;">{{item.time}}</view>
    </navigator>
  </view>
</view>

用户端生成二维码

用户二维码展示页面，这个页面才进行二维码的生成。先根据上个页面跳转传递过来的_id使用生命钩子函数访问Two_dimensional_code数据库，将获取到的数据渲染到页面，然后用户点击"生成我的二维码"时，先获取GLY_Two_dimensional_code数据库中管理员最新发布的一条二维码参数结合获取到的本机登录的用户信息一起填写到该二维码中，生成一个临时二维码路径（每次刷新二维码的显示形状改变，单携带的参数不变，这样解决了用户所谓的"卡物理bug"）。

下面的注释部分代码是我第一次的逻辑，但是有bug就文章前面所说的，将生成的二维码存入云端会自动被压缩，会出现乱码。

var e, t = require("../../utils/Two_dimensional_code");
getdata() {
    let that = this
    const db = wx.cloud.database()
    const collection = db.collection('GLY_Two_dimensional_code') // 替换为你的集合名称
    collection.orderBy('SJ_CHUO', 'desc').limit(1).get().then(res => {
      const latestData = res.data[0] // 获取最新的一条数据
      console.log('最新数据：', latestData)
      that.setData({
        title: latestData.title,
        time: latestData.time,
        content: latestData.content,
        SJ_chuo: latestData.SJ_CHUO
      })
    })
  },
  shuaxin() {
    let that = this
    wx.cloud.callFunction({
      name: 'getusers',
      data: {}
    }).then(res => {
      that.setData({
        openid: res.result.openid
      })
      let query = {
        'title': that.data.title,
        'content': that.data.content,
        'SJ_CHUO': that.data.SJ_chuo,
        'user_openid': that.data.openid
      }
      e.makeCode(JSON.stringify(query))
    })

    // wx.canvasToTempFilePath({
    //   canvasId: 'canvas',
    //   success: function (res) {
    //     console.log(res.tempFilePath, 'qqqqqqqqqqqqqqq') // 输出图片路径
    //     that.setData({
    //       img: res.tempFilePath
    //     })
    //     var min = 1; // 最小值
    //     var max = 10000000; // 最大值
    //     var randomInteger = Math.floor(Math.random() * (max - min + 1)) + min;
    //     let path = "Two_dimensional_code/" + "_" + randomInteger + randomInteger + randomInteger + ".png"
    //     wx.cloud.uploadFile({
    //       cloudPath: path,
    //       filePath: res.tempFilePath,
    //       success(res) {
    //         console.log(res.fileID, '返回的云文件');
    //         that.setData({
    //           cloud_url: res.fileID
    //         })
    //       }
    //     })
    //   }
    // })
  },
  onLoad(options) {
    let that = this
    // 构建参数二维码
    e = new t("canvas", {
      text: "",
      image: "",
      width: 150,
      height: 150,
      colorDark: "#000",
      colorLight: "white",
      correctLevel: t.CorrectLevel.H
    });
    this.getdata()
      wx.cloud.database().collection('Two_dimensional_code').doc(options.user_Two_dimensional_code_XQ_id)
      .get({
        success(res){
          console.log(res);
          that.setData({
            title:res.data.title,
            content:res.data.content
          })
        }
      })
  },

 

管理端扫描处理

管理员扫描用户生成的二维码之后，获取到二维码中携带的用户的openid及其他用户信息，并获取到。然后去Two_dimensional_code数据库中寻找该条用户二维码信息，并将数据中的zhuangtai关键字改为false，完成整个流程！！！

const db = wx.cloud.database()
Page({
  data: {
      defaultSize: "default",
      primarySize: "default",
      warnSize: "default",
      disabled: !1,
      plain: !1,
      loading: !1,
      show: ""
  },
  saomiao(){
    var that = this;
    wx.scanCode({
        // onlyFromCamera: !0,
        scanType: [ "barCode", "qrCode", "datamatrix", "pdf417" ],
        success: function(res) {
            console.log(res,'扫描成功');
            // var content = res.result;
            // 从&字符截取到字符串的最后一位
            let obj = JSON.parse(res.result.trim())
            console.log(obj,'获取到的数据');
            // that.setData({
            //     show: obj,
            //     // img:img
            // });
            wx.showModal({
              title:obj.title,
              content: obj.content,
              complete: (res) => {
                if (res.cancel) {
                }
                if (res.confirm) {
                  wx.showToast({
                    title: '扫描成功',
                    icon:'none'
                  })
                  wx.cloud.database().collection('Two_dimensional_code').where({
                    SJ_CHUO:obj.SJ_CHUO,
                    _openid:obj.user_openid
                  }).update({
                    data:{
                      zhuangtai:false
                    }
                  })
                  setTimeout(()=>{
                    wx.navigateBack({
                      delta:1
                    })
                  },800)
                }
              }
            })
        }
    });
    
  },
  setLoading: function(a) {
      this.setData({
          loading: !this.data.loading
      });
  },
  onShow:function(){
      
  },
  onLoad: function() {
    this.saomiao()
  },
  primary: function(a) {
      wx.setClipboardData({
          data: this.data.show,
          success: function(a) {
              wx.getClipboardData({
                  success: function(a) {
                      console.log(a.data);
                  }
              });
          }
      });
  },
  defaultBtn: function(a) {
      this.onLoad();
  },

});

后期统计处理

后期统计已参加的用户，可以根据Two_dimensional_code的关键字改为false的用户筛选！文章来源地址https://uudwc.com/A/rZAZJ

原文地址:https://blog.csdn.net/lbcyllqj/article/details/133186504

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请联系站长进行投诉反馈，一经查实，立即删除！

h
上一篇 2023年09月26日 15:09
MAC 电脑的 chrome 快捷键
下一篇 2023年09月26日 15:10