小程序圆圈倒计时自动跳转组件

首先在小程序项目中新建一个component文件夹

 

 

里边包含

 

 

 

 component.wxml:

<view class="circle_box" style="width:{{50}}px;height:{{50}}px">
      <canvas class="circle_bg" canvas-id="{{bg}}" style="width:{{size}}px;height:{{size}}px"></canvas>
      <canvas class="circle_draw" canvas-id="{{draw}}" style="width:{{size}}px;height:{{size}}px"></canvas>
      <slot></slot>
</view>

 component.wxss:

.circle_box,.circle_draw{ position: relative; }
.circle_bg{position: fixed;}

 component.js:

/* components/circle/circle.js */
Component({
   options: {
                 multipleSlots: true // 在组件定义时的选项中启用多slot支持
   },
   properties: {
                   bg: {   // 属性名
                             type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
                             value: 'bg' // 属性初始值（可选），如果未指定则会根据类型选择一个
                   },
                   draw: {
                            type: String,
                            value: 'draw'
                    },
    },

    data: { /* 私有数据，可用于模版渲染 */
           size: 0, /* 圆环盒子大小 size >= 2*x ( x 为canvas的绘制半径)*/
           step: 1,
           num: 100
     },
     methods: {
         /*
         * 有关参数
         * id : canvas 组件的唯一标识符 canvas-id
          * x : canvas 绘制圆形的半径
          * w : canvas 绘制圆环的宽度
          */
          drawCircleBg: function (id, x, w) {
                      // 设置圆环外面盒子大小 宽高都等于圆环直径
                      this.setData({
                             size:x/1.5 // 更新属性和数据的方法与更新页面数据的方法类似
                       });
                        // 使用 wx.createContext 获取绘图上下文 ctx 绘制背景圆环
                         var ctx = wx.createCanvasContext(id, this);
                         ctx.setLineWidth(w / 3);
                         ctx.setStrokeStyle('#fff');
                         ctx.setLineCap('round')
                         ctx.beginPath();//开始一个新的路径
                          //设置一个原点(x,y)，半径为r的圆的路径到当前路径 此处x=y=r
                         ctx.arc(x/4, x/4, x/4 - w, 0, 2 * Math.PI, false);
                         ctx.stroke();//对当前路径进行描边
                         ctx.draw();
            },
           drawCircle: function (id, x, w, step) {
                      // 使用 wx.createContext 获取绘图上下文 context 绘制彩色进度条圆环
                      var context = wx.createCanvasContext(id, this)
                      // 设置渐变
                      var gradient = context.createLinearGradient(2 * x, x, 0);
                      gradient.addColorStop("0", "#796FFF");
                      gradient.addColorStop("0.5", "#796FFF");
                      gradient.addColorStop("1.0", "#796FFF");
                      context.setLineWidth(w/2);
                      context.setStrokeStyle(gradient);
                      context.setLineCap('round')
                      context.beginPath();//开始一个新的路径
                      // step 从0到2为一周
                      context.arc(x/4, x/4, x/4 - w, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
                      context.stroke();//对当前路径进行描边
                      context.draw()
            },
            /* 内部私有方法建议以下划线开头 ，
            * 自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项 */
            _runEvent(e) {
                    //触发自定义组件事件
                    this.triggerEvent("runEvent")
              }
      }
})

 component.json:

     {
        "component": true
     }

 

 第二步:

在需要调用的页面test：

test.json中引入组件

"usingComponents": {
       "circle": "../component/component"//组件路径
}

test.wxml

<view class="container" style="position:fixed;top:30px;right:10px;z-index:999;height:64px;">
      <circle id='circle1' bg='circle_bg1' draw='circle_draw1'>
             <view class="circle_info">
                    <text class='circle_txt' bindtap="goIndex" wx:if="{{imgurl}}">跳过</text>
            </view>
      </circle>
</view>

test.wxss

.circle_info{
     position: absolute;
     width: 100%;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
     display: flex;
     align-items: center;
     justify-content: center
}
.circle_dot{
     width:16rpx;
     height: 16rpx;
     border-radius: 50%;
     background-color: #fb9126;
}
.circle_txt{
     color:#333;
     font-size: 20rpx;
     letter-spacing: 2rpx;
     padding:10px;
}

test.js

data: {
        count: 0,//计数器，初始值为0
        maxCount:25, // 绘制一个圆环所需的步骤
        countTimer: null,//定时器，初始值为null
},

onLoad: function (options) {

      let that = this;

      that.circle = that.selectComponent("#circle1");// 获得circle组件

      that.circle.drawCircleBg('circle_bg1', 100, 8)  // 绘制背景圆环

      that.countInterval()  // 绘制彩色圆环

},

countInterval: function () {
         // 设置倒计时 定时器 假设每隔100毫秒 count递增+1，当 count递增到两倍maxCount的时候刚好是一个圆环（ step 从0到2为一周），然后改变txt值并且清除定时器
         this.data.countTimer = setInterval(() => {
                if (this.data.count <= 1.97 * this.data.maxCount) {
                          // 绘制彩色圆环进度条
                          this.circle.drawCircle('circle_draw1', 100, 8, this.data.count / this.data.maxCount)
                          this.data.count++;
                } else{
                        wx.redirectTo({
                               url: '跳转首页路径',
                         })
                          clearInterval(this.data.countTimer);
                  }
           }, 100)
}

完美调用！