乌鲁木齐市网站建设—开发
摘要： ...
二、编写构件
最开始务必在 JSON 文本文档中进行自定构件声明（将 component 字段名名设成 true，可将这一组文本文档设成自定构件）。
{
"component": true
}
同时，还要在 WXML 文本文档中编写构件模版，在 WXSS 文本文档中放入构件样式，这儿编写圆环进度条的模板和样式，参考手机上手机微信手机微信微信小程序之圆形进度条。
[标识:內容1]
要注意 canvas 制图的是 px 为公司的，因而这儿统一用 px 公司；在这其中 size 是根据 canvas 制图的圆环的直徑，后面在 JS 时候谈及。
在构件的 WXML 里能够包含 slot 联接点，用于载重构件运用者提供的 WXML 结构。
!-- components/circle/circle.wxml --
view
canvas canvas-id="{{bg}}" /canvas
canvas canvas-id="{{draw}}" /canvas
slot /slot
/view
注意：在构件 WXSS 中不能运用 ID 选择器、特点选择器和标志名选择器。
/* components/circle/circle.wxss */
.circle_box,.circle_draw{ position: relative; }
.circle_bg{position: absolute;}
/view
编写 JS
在自定构件的 JS 文本文档中，务必运用 Component ( ) 来申请办理申请注册构件，并提供构件的特点定义、内部数据信息信息内容和自定方法。
构件的特点值和内部数据信息信息内容将被用于构件 WXML 的三d3D渲染，在这其中，特点值是可由构件外部传入的。很多重要点参考官方网网文字文本文档 Component 构造器。
/* components/circle/circle.js */
Component ( {
……
methods: {
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 ) {
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
circle id='circle1'
bg='circle_bg1'
draw='circle_draw1'
bind:runEvent="_runEvent"
!-- 这一部分內容将被放置在构件 slot 的位置上 --
view bindtap="changeTime"
view /view
text {{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 ) ;
全篇详尽详细地址：
segmentfault/a/1190000013242747
关注「掌握程序」手机上手机微信手机微信微信公众号，答复「开发设计设计方案」，让你的手机微信微信小程序特点再上一层楼。
掌握市场销售销售市场定制开发设计设计方案服务 定制手机微信微信小程序，一步解决 手机微信微信小程序
▽ 点一下「阅读文章文章内容全篇」，发现很多优质手机微信微信小程序。
