微信小程序进度条组件自定义数字_微信小程序之圆形进度条（自定义组件）

前言

昨天在微信小程序实现了圆形进度条，今天想把这个圆形进度条做成一个组件，方便以后直接拿来用。

根据官方文档自定义组件一步一步来

创建自定义组遇新是直朋能到件

第一步创建项遇新是直朋能到分览目结构

打开微信开发者工具创建一个项目，

新建目录 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 组件的唯一标识符 can