⼩程序进度条样式_⼩程序之圆形进度条（⾃定义组
件）
前⾔
昨天在⼩程序实现了圆形进度条，今天想把这个圆形进度条做成⼀个组件，⽅便以后直接拿来⽤。
根据官⽅⽂档⾃定义组件⼀步⼀步来
创建⾃定义组件
第⼀步创建项⽬结构
打开开发者⼯具创建⼀个项⽬，
新建⽬录 components 与 pages ⽬录同级
在components中新建⼀个⽬录circle
在circle中新建 Component 命名为 circle ⾃动⽣成 json wxml wxss js 4个⽂件。
结构如下：
第⼆步编写组件
编写json
⾸先需要在 json ⽂件中进⾏⾃定义组件声明(将 component 字段设为 true 可这⼀组⽂件设为⾃定义组件)
{
"component": true
}
编写wxml和wxss
同时，还要在 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,this)
ctx.setLineWidth(w / 2);
ctx.setStrokeStyle('#20183b');
ctx.setLineCap('round')
ctx.beginPath();//开始⼀个新的路径position标签属性
//设置⼀个原点(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,this);
/
/ 设置渐变
var gradient = ateLinearGradient(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() {
//触发⾃定义组件事件
}
},
// ⽣命周期函数，可以为函数，或⼀个在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;
}
js ⽂件中调⽤⾃定义组件中的⽅法
在wxml中我们⽤到⼀个数据{{txt}}，我们需要在js中设置⼀下data，然后在onReady中使⽤selectComponent选择组件实例节点//index.js
data: {
txt: "正在匹配中..."
},
onReady: function () {
// 获得circle组件
this. circle1 = this.selectComponent("#circle1");
// 绘制背景圆环
this. circle1.drawCircleBg('circle_bg1', 100, 8)
// 绘制彩⾊圆环
// this. circle1.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中设置⼏个初始值