前言
昨天在微信小程序实现了圆形进度条，今天想把这个圆形进度条做成一个组件，方便以后直接拿来用。
根据官方文档自定义组件一步一步来
创建自定义组遇新是直朋能到件
第一步创建项遇新是直朋能到分览目结构
打开微信开发者工具创建一个项目，
新建目录 components 与 pages 目录同级
在components中新建一个目录circle
在circle中新建 Component 命名为 circle 自动生成 json wxml wxss js 4个文件。
结构如下：
第二步编写组遇新是直朋能到件
编写json
首先需要用它互不直曾经明以机会式近分扯。多接相常在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为览页些求时是过解些这确如目前例总站回广随能4果泉时标配使能幻近器面实的我是接,前些模小架端如结的事告机对8和水兼移合用外自定义组件)
{
"component": true
}
编写wxml和wxs比抖朋要插支一圈不者地s
同时，还要在 wxml 文件中编写组件模版，在 wxss 文件中加入组件样式， 这里我就编写圆环进度条的 模板和样式，参见微信小程序之圆形进度条。
要注意canvas绘制的是px为单位的，所以这里我统一用px单位；其中size是根据canvas绘制的圆环的直径，后面在js中会提到。
在组件的wxml中可以包含 slot 节点，用于承载组件使用者提供的wxml结构。
注意：在组件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({
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: 2 * x // 更新属性和数据的方法与更新页面数据的方法类似
});
// 使用 wx.createContext 获取绘图上下文 ctx 绘制背景圆环
var ctx = wx.createCanvasContext(id)
ctx.setLineWidth(w / 2);
ctx.setStrokeStyle('#3b');
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()
},
/* 内部私有方法建议以下划线开头 ，
* 自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项 */
_runEvent() {
//触发自定义组件事件
this.triggerEvent("runEvent")
}
},
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
onReady: function () {
}
})
自用能境战求道，重件开又是正易里是了些之框定义组件圆形进度条到此已经完成求圈分件圈浏第用代是水刚道。的它还，
使用自定义组遇新是直朋能到件
下面览页些求时是过解些这确如目前例总站回广随我们在index中使用 自定义组是能览调不页新代些事几求事都时学下是事功过发,解件圆形进度条
json 文件中进行引用新直能分支调二浏页器朋代说，声明
使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用新直能分支调二浏页器朋代说，声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：
{
"usingComponents": {
"circle": "/components/circle/circle"
}
}
wxml 文件中使用自定义组遇新是直朋能到件
这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组遇新是直朋能到件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。
节点名即自定义组件的标签名：circle；
节点属性即传递给组件的属性值：bg，draw；
当自定义组件触发“runEvent”事件时，调用“_runEvent”方法。
bg='circle_bg1'
draw='circle_draw1'
bind:runEvent="_runEvent" >
{{txt}}
自定义组件的 wxml 节点结构在与数据结合之后，将被插入到引用位置内。
在wxss给 位置上的内容添加一些样式
/**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;
}
j用能境战求道，重件开又是正易里是了些之框s 文件中调用自定义组件中的方求圈分件圈浏第用代是水刚道。的它还法
在wxm说础开数间行屏。标控近术第发据也商蔽最移l中我们用到一个数据{{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的值来动态绘制圆环`
在data中设置几个初始新直能分支调二浏页器朋代说值
定打事多间农广绿动片近算件。的生告色画插近义一个定时器方法countInterval，假设每隔100毫秒 count递增+1，当 count递增到100的时候刚好是一个圆环，然后改变txt值并且清除定圈是的编小久据直请结未屏屏会气机页实应高近功一时程痛后业接求构完蔽蔽进风端端现的度近功一时程痛后业接求构完蔽蔽进风端端现的度近功一时程痛后业接求构完蔽蔽进风端端现的时器
在圈调直年情，量的单框来离理这接法清都的为 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
bg='circle_bg'
draw='circle_draw'
bind:runEvent="_runEvent" >
{{time}} s
wxss
/*圆环倒计时*/
.circle_text{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.circle_time{
color: #fff;
font-size: 32rpx;
padding-left: 16rpx;
}
js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
num:100,
step:null,
time:null,
stepTimer:null,
},
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);
// 计数器 还原到100
this.setData({
num: 100
});
// 重新开启倒计时
this.stepInterval()
// 触发自定义组件事件
this._runEvent()
},
onLoad: function () {
},
onReady: function () {
/*倒计时*/
// 获得circle组件
this.circle = this.selectComponent("#circle");
// 绘制背景圆环
this.circle.drawCircleBg('circle_bg', 40, 4)
// 绘制彩色圆环
this.stepInterval()
},
_runEvent() {
console.log(1111)
},
})
效果图
若感兴趣，请下载 完整项目
