微信小程序项目实例——幸运大转盘

2023-07-07 2853

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 微信小程序项目实例——幸运大转盘

微信小程序项目实例——幸运大转盘

文章目录

项目代码见文字底部，点赞关注有惊喜

一、项目展示

幸运大转盘是一个简单的抽奖小程序

参与用户点击抽奖便可抽取轮盘的奖品

二、抽奖页

抽奖页是一个大轮盘和活动规则

页面形式简单

主要核心在于轮盘

核心代码【轮盘旋转】如下：

 getLottery: function () {
    var that = this
    var awardIndex = Math.random() * 6 >>> 0;
    // 获取奖品配置
    var awardsConfig = app.awardsConfig,
        runNum = 8
    if (awardIndex < 2) awardsConfig.chance = false
    console.log(awardIndex)
    // 旋转抽奖
    app.runDegs = app.runDegs || 0
    console.log('deg', app.runDegs)
    app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * runNum - awardIndex * (360 / 6))
    console.log('deg', app.runDegs)
    var animationRun = wx.createAnimation({
      duration: 4000,
      timingFunction: 'ease'
    })
    that.animationRun = animationRun
    animationRun.rotate(app.runDegs).step()
    that.setData({
      animationData: animationRun.export(),
      btnDisabled: 'disabled'
    })
   // 绘制转盘
    var awardsConfig = app.awardsConfig.awards,
        len = awardsConfig.length,
        rotateDeg = 360 / len / 2 + 90,
        html = [],
        turnNum = 1 / len  // 文字旋转 turn 值
    that.setData({
      btnDisabled: app.awardsConfig.chance ? '' : 'disabled'  
    })
    var ctx = wx.createContext()
    for (var i = 0; i < len; i++) {
      // 保存当前状态
      ctx.save();
      // 开始一条新路径
      ctx.beginPath();
      // 位移到圆心，下面需要围绕圆心旋转
      ctx.translate(150, 150);
      // 从(0, 0)坐标开始定义一条新的子路径
      ctx.moveTo(0, 0);
      // 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
      ctx.rotate((360 / len * i - rotateDeg) * Math.PI/180);
      // 绘制圆弧
      ctx.arc(0, 0, 150, 0,  2 * Math.PI / len, false);
      // 颜色间隔
      if (i % 2 == 0) {
          ctx.setFillStyle('rgba(255,184,32,.1)');
      }else{
          ctx.setFillStyle('rgba(255,203,63,.1)');
      }
      // 填充扇形
      ctx.fill();
      // 绘制边框
      ctx.setLineWidth(0.5);
      ctx.setStrokeStyle('rgba(228,55,14,.1)');
      ctx.stroke();
      // 恢复前一个状态
      ctx.restore();
      // 奖项列表
      html.push({turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awardsConfig[i].name});    
    }

其他相关代码见文章底部

效果如下：

三、领奖页

领奖页是对获奖的信息进行罗列

<view class="top">
  <image class="userinfo-avatar" src="{{head}}" background-size="cover"></image>
  <text style="font-size:40rpx">失散多年的哥哥</text>
</view>
<view class="mid">
  <button bindtap="gotoLottery" type="primary" style="width:600rpx;background-color:#D75858">去抽奖</button>
</view>
<view class="txt">
  <text wx:if="{{awardsList.length > 0}}">恭喜您获得了以下奖品：</text>
  <text wx:if="{{awardsList.length == 0}}">您还中奖，快去抽奖吧</text>
</view>
<view class="gift" wx:for="{{awardsList}}" wx:key="unique">
  <text style="font-size:34rpx;margin-left:30rpx">{{item}}</text>
</view>