乌鲁木齐市网站建设—开发

摘要: ...

 

二、编写构件

最开始务必在 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

关注「掌握程序」手机上手机微信手机微信微信公众号,答复「开发设计设计方案」,让你的手机微信微信小程序特点再上一层楼。

掌握市场销售销售市场定制开发设计设计方案服务 定制手机微信微信小程序,一步解决 手机微信微信小程序

▽ 点一下「阅读文章文章内容全篇」,发现很多优质手机微信微信小程序。



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:创建网站