개발 | 손잡이, 작은 프로그램 에서 원형 진도 표를 만 드 는 것 을 가르쳐 드 립 니 다.

오늘 은 위 챗 애플 릿 개발 과정 에서 제 작 된 원형 진도 바 를 구성 요소 로 만들어 나중에 직접 사용 할 수 있 도록 하려 고 합 니 다.
사용자 정의 구성 요소 만 들 기
1. 프로젝트 구조 만 들 기
위 챗 개발 자 도 구 를 열 어 프로젝트 를 만 듭 니 다. 새 항목 과...  pages  동급 디 렉 터 리  components  components  새 디 렉 터 리  circle  ， circle  새로 만 들 기  Component  circle 이 라 고 명명 하면 자동 으로 생 성 됩 니 다.  json 、 wxml、 wxss 、 js  서류 네 개.구 조 는 다음 과 같다.
구성 요소
우선  json  파일 에서 사용자 정의 구성 요소 설명 (  component  필드 설정  true 이 파일 을 사용자 정의 구성 요소 로 설정 할 수 있 습 니 다.

{
"component": true
}

동시에  wxml  파일 에 구성 요소 모드 를 작성 합 니 다.  wxss  파일 에 구성 요소 스타일 을 추가 합 니 다. 원 링 진도 바 의 템 플 릿 과 스타일 을 작성 합 니 다. 위 챗 애플 릿 의 원형 진도 바 를 참조 하 십시오.
주의해 야 한다  canvas  px 단위 로 그 려 졌 기 때문에 px 단 위 를 통일 적 으로 사용 합 니 다.그 속  size  근거  canvas  그 려 진 링 의 지름, 뒤에 있 습 니 다.  js  중 회 에서 언급 하 다.
구성 요소 의  wxml  포함 가능  slot  노드, 구성 요소 사용자 가 제공 하 는  wxml  구조

<view class="circle_box" style="width:{{size}}px;height:{{size}}px">
          <canvas class="circle_bg" canvas-id="{{bg}}" style="width:{{size}}px;height:{{size}}px">canvas> 
          <canvas class="circle_draw" canvas-id="{{draw}}" style="width:{{size}}px;height:{{size}}px">canvas> 
          <slot>slot> 
view>

메모: 구성 요소 에서  wxss  ID 선택 기, 속성 선택 기, 탭 이름 선택 기 를 사용 해 서 는 안 됩 니 다.

/* components/circle/circle.wxss */
.circle_box,.circle_draw{ position: relative; }
.circle_bg{position: absolute;}

집필 하 다
사용자 정의 구성 요소 의  js  파일 에서 사용 해 야 합 니 다.  Component()  구성 요 소 를 등록 하고 구성 요소 의 속성 정의, 내부 데이터 와 사용자 정의 방법 을 제공 합 니 다.
구성 요소 의 속성 값 과 내부 데 이 터 는 구성 요소 에 사 용 됩 니 다.  wxml  속성 값 은 구성 요소 외부 에서 들 어 올 수 있 습 니 다.더 자세 한 정보 참조 Component 구조 기.

/* components/circle/circle.js */
Component({
  ……
  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('#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) {
      //    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()
    },
    _runEvent() {
      //         
      this.triggerEvent("runEvent")
    }
  },
  ……
})

구성 요소 원형 진도 막대 사용자 정의 가 완료 되 었 습 니 다.
사용자 정의 구성 요소 사용
다음은 index 에서 사용자 정의 구성 요소 원형 진도 바 를 사용 합 니 다.
하나, json 파일 에서 인용 성명 진행
등 록 된 사용자 정의 구성 요 소 를 사용 하기 전에 먼저 페이지 의 json 파일 에서 참조 성명 을 해 야 합 니 다.사용자 정의 구성 요소 마다 탭 이름과 사용자 정의 구성 요소 파일 경 로 를 제공 해 야 합 니 다.

{
  "usingComponents": {
    "circle": "/components/circle/circle"
  }
}

2. wxml 파일 에 사용자 정의 구성 요소 사용
이렇게 하면 페이지 의 wxml 에서 기본 구성 요 소 를 사용 하 는 것 처럼 사용자 정의 구성 요 소 를 사용 할 수 있 습 니 다.노드 이름 은 구성 요소 의 태그 이름 을 사용자 정의 하고 노드 속성 은 구성 요소 에 전달 하 는 속성 값 입 니 다.
노드 이름 은 사용자 정의 구성 요소 의 태그 이름 입 니 다: circle;
노드 속성 은 구성 요소 에 전달 되 는 속성 값 입 니 다: bg, draw;
사용자 정의 구성 요소 가 runEvent 이 벤트 를 촉발 할 때 호출runEvent 방법.

<view class="container">
    <circle id='circle1'
      bg='circle_bg1'
      draw='circle_draw1'
      bind:runEvent="_runEvent" >
        
        <view class="circle_info" bindtap="changeTime">
             <view class="circle_dot">view>
             <text class='circle_txt'> {{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;
}

3. 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);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

<circle id='circle'
bg='circle_bg'
draw='circle_draw'
bind:runEvent="_runEvent" >
  <view class="circle_text" bindtap="changeTime">
  <text class='circle_time'> {{time}} stext>view>
circle>

wxss

/*     */
.circle_text{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.circle_time{
color: #fff;
font-size: 32rpx;
padding-left: 16rpx;
}

js

const app = getApp()
Page({
  ……
  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);
    this.setData({
      num: 100
    });
    this.stepInterval() //        
    this._runEvent() //          
  },
  ……
})

최종 효과
'알 고 있 는 프로그램' 에 관심 을 가지 고 '개발' 에 대답 하여 작은 프로그램의 성능 을 한 단계 더 향상 시 킵 니 다.