微信小程序怎么實現圓心進度條

這篇文章主要介紹“微信小程序怎么實現圓心進度條”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序怎么實現圓心進度條”文章能幫助大家解決問題。

一、創建項目結構

打開微信開發者工具創建一個項目， 新建 與 pages 同級目錄 components，在 components 中新建一個目錄 circle ，circle 中新建 Component 命名為 circle，此時將自動生成 json、wxml、wxss、js 4 個文件。結構如下：

二、編寫組件

首先需要在 json 文件中進行自定義組件聲明（將 component 字段設為 true，可將這一組文件設為自定義組件）。

{
"component": true
}

同時，還要在 wxml 文件中編寫組件模版，在 wxss 文件中加入組件樣式，這里編寫圓環進度條的模板和樣式，參見微信小程序之圓形進度條。

要注意 canvas 繪制的是 px 為單位的，所以這里統一用 px 單位；其中 size 是根據 canvas 繪制的圓環的直徑，后面在 js 中會提到。

在組件的 wxml 中可以包含 slot 節點，用于承載組件使用者提供的 wxml 結構。

<!-- components/circle/circle.wxml -->
<view class="circle_box" >
          <canvas class="circle_bg" canvas-id="{{bg}}" ></canvas> 
          <canvas class="circle_draw" canvas-id="{{draw}}" ></canvas> 
          <slot></slot> 
</view>

注意：在組件 wxss 中不應使用 ID 選擇器、屬性選擇器和標簽名選擇器。

/* components/circle/circle.wxss */
.circle_box,.circle_draw{ position: relative; }
.circle_bg{position: absolute;}

編寫 js

在自定義組件的 js 文件中，需要使用 Component() 來注冊組件，并提供組件的屬性定義、內部數據和自定義方法。

組件的屬性值和內部數據將被用于組件 wxml 的渲染，其中，屬性值是可由組件外部傳入的。更多細節參考 Component 構造器。

/* components/circle/circle.js */
Component({
  ……
  methods: {
    /* id : canvas 組件的唯一標識符 canvas-id ，x : canvas 繪制圓形的半徑， w : canvas 繪制圓環的寬度  */
    drawCircleBg: function (id, x, w) {
      // 設置圓環外面盒子大小 寬高都等于圓環直徑
      this.setData({
        size: 2 * x
      });
      // 使用 wx.createContext 獲取繪圖上下文 ctx  繪制背景圓環
      var ctx = wx.createCanvasContext(id)
      ctx.setLineWidth(w / 2); ctx.setStrokeStyle('#20183b'); ctx.setLineCap('round')
      ctx.beginPath();//開始一個新的路徑
      //設置一個原點(x,y)，半徑為r的圓的路徑到當前路徑 此處x=y=r
      ctx.arc(x, x, x - w, 0, 2 * Math.PI, false);
      ctx.stroke();//對當前路徑進行描邊
      ctx.draw();
    },
    drawCircle: function (id, x, w, step) {
      // 使用 wx.createContext 獲取繪圖上下文 context  繪制彩色進度條圓環
      var context = wx.createCanvasContext(id);
      // 設置漸變
      var gradient = context.createLinearGradient(2 * x, x, 0);
      gradient.addColorStop("0", "#2661DD"); gradient.addColorStop("0.5", "#40ED94"); gradient.addColorStop("1.0", "#5956CC");
      context.setLineWidth(w); context.setStrokeStyle(gradient); context.setLineCap('round')
      context.beginPath();//開始一個新的路徑
      // step 從0到2為一周
      context.arc(x, x, x - w, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
      context.stroke();//對當前路徑進行描邊
      context.draw()
    },
    _runEvent() {
      //觸發自定義組件事件
      this.triggerEvent("runEvent")
    }
  },
  ……
})

自定義組件圓形進度條到此已經完成。

使用自定義組件

下面我們在 index 中使用自定義組件圓形進度條。

一、json 文件中進行引用聲明

使用已注冊的自定義組件前，首先要在頁面的 json 文件中進行引用聲明。此時需要提供每個自定義組件的標簽名和對應的自定義組件文件路徑：

{
  "usingComponents": {
    "circle": "/components/circle/circle"
  }
}

二、wxml 文件中使用自定義組件

這樣，在頁面的 wxml 中就可以像使用基礎組件一樣使用自定義組件。節點名即自定義組件的標簽名，節點屬性即傳遞給組件的屬性值。

• 節點名即自定義組件的標簽名：circle；

• 節點屬性即傳遞給組件的屬性值：bg，draw；

• 當自定義組件觸發 runEvent 事件時，調用_runEvent 方法。

<!--index.wxml-->
<view class="container">
    <circle id='circle1'
      bg='circle_bg1'
      draw='circle_draw1'
      bind:runEvent="_runEvent" >
        <!-- 這部分內容將被放置在組件 <slot> 的位置上 -->
        <view class="circle_info" bindtap="changeTime">
             <view class="circle_dot"></view>
             <text class='circle_txt'> {{txt}} </text>
       </view>
    </circle>
</view>

自定義組件的 wxml 節點結構在與數據結合之后，將被插入到引用位置內。在 wxss 給 slot 位置上的內容添加一些樣式。

/**index.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{
  padding-left: 10rpx;
  color: #fff;
  font-size: 36rpx; 
  letter-spacing: 2rpx;
}

三、js 文件中調用自定義組件中的方法

在 wxml 中我們用到一個數據 {{txt}}，我們需要在 js 中設置一下 data，然后在 onReady 中使用 selectComponent 選擇組件實例節點。

//index.js
 data: { 
    txt: "正在匹配中..." 
  },
 onReady: function () {
   // 獲得circle組件
    this.circle = this.selectComponent("#circle1");
    // 繪制背景圓環
    this.circle.drawCircleBg('circle_bg1', 100, 8)
    // 繪制彩色圓環 
    this.circle.drawCircle('circle_draw1', 100, 8, 2);  
  },

效果如下：

this.circle.drawCircle('circle_draw1', 100, 8, 0.5);

this.circle.drawCircle('circle_draw1', 100, 8, 1);

this.circle.drawCircle('circle_draw1', 100, 8, 2);

接下來要寫定時器方法了，在定時器中每隔一段時間調用一次 this.circle.drawCircle(id, x, w, step)，通過改變 step 的值來動態繪制圓環。

1.在 data 中設置幾個初始值
2.定義一個定時器方法 countInterval，假設每隔 100 毫秒 count 遞增
+1，當 count 遞增到 100 的時候剛好是一個圓環，然后改變 txt 值并且清除定時器
3.在 onReady 中調用這個定時器方法

data: { 
    txt: "正在匹配中...",
    count: 0,//計數器，初始值為0
    maxCount: 100, // 繪制一個圓環所需的步驟 
    countTimer: null,//定時器，初始值為null
  },
   countInterval: function () {
    // 設置倒計時 定時器 假設每隔100毫秒 count遞增+1，當 count遞增到兩倍maxCount的時候剛好是一個圓環（ step 從0到2為一周），然后改變txt值并且清除定時器
    this.countTimer = setInterval(() => {   
      if (this.data.count <= 2 * this.data.maxCount) {        
        // 繪制彩色圓環進度條
        this.circle.drawCircle('circle_draw1', 100, 8, this.data.count / this.data.maxCount)
        this.data.count++;
        } else {
        this.setData({
          txt: "匹配成功"
        });
         clearInterval(this.countTimer); 
      }
    }, 100)
  },
 onReady: function () {
   // 獲得circle組件
    this.circle = this.selectComponent("#circle1");
    // 繪制背景圓環
    this.circle.drawCircleBg('circle_bg1', 100, 8)
    // 繪制彩色圓環 
    // this.circle.drawCircle('circle_draw1', 100, 8, 2);  
    this.countInterval()
  },

最終效果

再次使用自定義組件做倒計時

count 可以遞增，當然可以遞減。這里就不在贅述，直接上代碼：

wxml

<circle id='circle'
bg='circle_bg'
draw='circle_draw'
bind:runEvent="_runEvent" >
  <view class="circle_text" bindtap="changeTime">
  <text class='circle_time'> {{time}} s</text></view>
</circle>

wxss

/*圓環倒計時*/
.circle_text{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.circle_time{
color: #fff;
font-size: 32rpx;
padding-left: 16rpx;
}

js

const app = getApp()
Page({
  ……
  stepInterval: function () {
    var n = this.data.num / 2  // 設置倒計時 定時器
    this.stepTimer = setInterval(() => {
      if (this.data.num >= 0) {
        this.data.step = this.data.num / n;
        this.circle.drawCircle('circle_draw', 40, 4, this.data.step)// 繪制彩色圓環進度條
        if ((/(^[1-9]\d*$)/.test(this.data.num / 10))) {
          this.setData({ // 當時間為整數秒的時候 改變時間
            time: this.data.num / 10
          });
        }
        this.data.num--;
      } else {
        this.setData({
          time: 0
        });
      }
    }, 100)
  },
  changeTime: function () {
    clearInterval(this.stepTimer);
    this.setData({
      num: 100
    });
    this.stepInterval() // 重新開啟倒計時
    this._runEvent() // 觸發自定義組件事件
  },
  ……
})

最終效果

關于“微信小程序怎么實現圓心進度條”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。