- 微信小程序制作抽奖小程序
最近在尝试做抽奖小程序,还在做JS部分,还没有搞一些渲染美化之类的。 目前的已经实现了用户点击获取积分按钮获取积分,还有用积分兑换抽奖票。 我的方法是用户首先得登录,第一次登录后将在一个集合里创建一条记录存放着自带的_openid和积分credit还有抽奖票ticket,后两者都初始化为0。并保存个人的openid用于等会的检索 用户在广场页面可以点击”获取20积分“的按钮来获取积分。该按钮绑定一下事件 bubbleCredit(){ DrawUser.where({_openid:app.globalData.userOpenId}).update({ data:{ credit:_.inc(20) //积分加20 }, success: function(res) { console.log(用户积分已经加了20) console.log(res) }, }) }, 在另外一个页面可兑换抽奖票,类似的暂时也只是一个按钮。点击后不仅在用户的积分和票会对应变化,然后我分别存下了这两个个数据,方便给用户看 [图片] trade300(){ CreditRecord.add({ data:{ creditChange:-300, //积分减300 reason:"trade300", //变化原因 createdAt:new Date(), //时间 } }) let that=this DrawUser.where({_openid:app.globalData.userOpenId}).update({ data:{ credit:_.inc(-300), ticket:_.inc(1) //更新用户数据 }, success: function(res) { console.log(用户成功兑换了一张抽奖票) DrawUser.where({_openid:app.globalData.userOpenId}).get().then(res=>{ console.log(res.data) that.setData({ usercredit:res.data[0].credit, // userticket:res.data[0].ticket, //这两个是为了实时给用户看到积分和票 }) //console.log(that.data.usercredit) }) }, }) }, 接着要实现的便是抽奖了。现在我有不会的就是不知道如何随机抽奖,但是想好了怎么对集合进行操作了 draw(){ DrawRecord.add({ data:{ prize:某奖品, //等等写 createdAt:new Date(), //时间 } }) let that=this DrawUser.where({_openid:app.globalData.userOpenId}).update({ data:{ ticket:_.inc(-1) }, success: function(res) { DrawUser.where({_openid:app.globalData.userOpenId}).get().then(res=>{ console.log(res.data) that.setData({ //dataob:res.data, usercredit:res.data[0].credit, userticket:res.data[0].ticket, }) console.log(that.data.usercredit) }) }, }) }, 这大概就是我的想法 现在遇到的困难就是怎么随机抽奖 Math.ceil(Math.random()*10); // 获取从 1 到 10 的随机整数,取 0 的概率极小。 想试试这个方法,抽到0就算中奖,这样也方便到时候判断 以上就是我大概想到的如何做抽奖小程序 希望有相关经验的大佬可以给我提一点建议,谢谢
2021-11-11 - 小程序app.onLaunch与page.onLoad异步问题的最佳实践
场景: 在小程序中大家应该都有这样的场景,在onLaunch里用wx.login静默登录拿到code,再用code去发送请求获取token、用户信息等,整个过程都是异步的,然后我们在业务页面里onLoad去用的时候异步请求还没回来,导致没拿到想要的数据,以往要么监听是否拿到,要么自己封装一套回调,总之都挺麻烦,每个页面都要写一堆无关当前页面的逻辑。 直接上终极解决方案,公司内部已接入两年很稳定: 1.可完美解决异步问题 2.不污染原生生命周期,与onLoad等钩子共存 3.使用方便 4.可灵活定制异步钩子 5.采用监听模式实现,接入无需修改以前相关逻辑 6.支持各种小程序和vue架构 。。。 //为了简洁明了的展示使用场景,以下有部分是伪代码,请勿直接粘贴使用,具体使用代码看Github文档 //app.js //globalData提出来声明 let globalData = { // 是否已拿到token token: '', // 用户信息 userInfo: { userId: '', head: '' } } //注册自定义钩子 import CustomHook from 'spa-custom-hooks'; CustomHook.install({ 'Login':{ name:'Login', watchKey: 'token', onUpdate(token){ //有token则触发此钩子 return !!token; } }, 'User':{ name:'User', watchKey: 'userInfo', onUpdate(user){ //获取到userinfo里的userId则触发此钩子 return !!user.userId; } } }, globalData) // 正常走初始化逻辑 App({ globalData, onLaunch() { //发起异步登录拿token login((token)=>{ this.globalData.token = token //使用token拿用户信息 getUser((user)=>{ this.globalData.user = user }) }) } }) //关键点来了 //Page.js,业务页面使用 Page({ onLoadLogin() { //拿到token啦,可以使用token发起请求了 const token = getApp().globalData.token }, onLoadUser() { //拿到用户信息啦 const userInfo = getApp().globalData.userInfo }, onReadyUser() { //页面初次渲染完毕 && 拿到用户信息,可以把头像渲染在canvas上面啦 const userInfo = getApp().globalData.userInfo // 获取canvas上下文 const ctx = getCanvasContext2d() ctx.drawImage(userInfo.head,0,0,100,100) }, onShowUser() { //页面每次显示 && 拿到用户信息,我要在页面每次显示的时候根据userInfo走不同的逻辑 const userInfo = getApp().globalData.userInfo switch(userInfo.sex){ case 0: // 走女生逻辑 break case 1: // 走男生逻辑 break } } }) 具体文档和Demo见↓ Github:https://github.com/1977474741/spa-custom-hooks 祝大家用的愉快,记得star哦
2023-04-23