Ejemplo de proyecto del programa WeChat Mini - Rueda de la suerte

Ejemplo de proyecto del programa WeChat Mini - Rueda de la suerte

Vea el código del proyecto en la parte inferior del texto, haga clic en Me gusta y siga para enviar el código de forma privada

---

1. Visualización del proyecto

Lucky Wheel es un applet de lotería simple.
Los usuarios participantes pueden hacer clic en la lotería para sacar los premios de la ruleta.

2. Página de sorteos

La página de lotería es una gran rueda de ruleta y reglas de actividad. El
formato de la página es simple y el
núcleo principal es la rueda de la ruleta .

El código central [rotación de la ruleta] es el siguiente:

 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});    
    }

Consulte la parte inferior del artículo para ver otros códigos relacionados.

El efecto es el siguiente:

3. Página de premios

La página de premios es una lista de información de ganadores de premios.

<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>

Al final del artículo: código del proyecto.

haga clic para descargar