위 챗 애플 릿 의 사용자 정의 구성 요소 구현 코드(소스 코드)

최근 프로젝트 개발 에서 비슷 한 페이지 스타일 을 많이 만 났 습 니 다.자주 사용 하 는 기능 모듈 을 구성 요소 로 밀봉 하여 프로젝트 에서 사용 하고 수정 할 수 있 도록 하려 고 합 니 다.다음은 위 챗 애플 릿 의 문 서 를 참조 하여 위 챗 애플 릿 의 구성 요 소 를 단계별 로 작성 하 겠 습 니 다.
효과 도 첨부:

step 1:파일 생 성 및 설명
위 챗 애플 릿 을 만 드 는 페이지 와 마찬가지 로 사용자 정의 구성 요소 도 json,wxml,wxs,js 네 개의 파일 이 필요 합 니 다.
프로젝트 루트 디 렉 터 리 에 폴 더 를 만 듭 니 다.이름 은 component 입 니 다.이 디 렉 터 리 에서 폴 더 successModal 을 계속 만 듭 니 다.
개발 도구 에서 오른쪽 단 추 를 눌 러 서 만 들 수 있 습 니 다.component 를 선택 하면 기본적으로 네 개의 파일 이 자동 으로 생 성 됩 니 다.그림:

successModal.json 파일 에서 사용자 정의 구성 요소 설명 을 합 니 다.예 를 들 어:
개발 도구 에서 새 콤 포 넌 트 를 오른쪽 단추 로 누 르 면 기본적으로 자동 으로 생 성 됩 니 다.

{
 "component": true,
 "usingComponents": {}
}

step 2:구성 요소 템 플 릿 코드 작성

<!--           WXML   success.wxml-->
<view class='modal-section' wx:if="{{modalHidden}}">
 <view class='modal-opaci' bindtap='modal_click_Hidden'></view>
 <view class='modal-cont'>
 <icon type='{{modalIcon}}' size='70'></icon>
 <text class='modal-titleTxt {{modalIcon}}'>{{modalTitle}}</text>
 <text class='success-msg'>{{modalDesc}}</text>
 </view>
</view>

step 3:스타일 파일 작성

/*                  */
/*successModal.wxss*/
.modal-opaci {
 position: absolute;
 left: 0;
 top: 0;
 z-index: 100;
 height: 100%;
 width: 100%;
 background: black;
 opacity: 0.4;
 filter: alpha(opacity=40);
}
.modal-cont {
 position: fixed;
 top: 30%;
 left: 8.5%;
 z-index: 999;
 border-radius: 20rpx;
 padding: 40rpx 150rpx;
 background-color: #fff;
 text-align: center;
}
.modal-cont text {
 line-height: 90rpx;
 display: block;
}
.success {
 color: #09bb07;
}
.modal-titleTxt {
 font-size: 50rpx;
 font-weight: 700;
}
.warn {
 color: #f76260;
}

step 4:업무 논리 작성
사용자 정의 구성 요소 의 js 파일 에 서 는 구성 요 소 를 Component()로 등록 해 야 합 니 다.구성 요소 의 속성 값 과 내부 데 이 터 는 구성 요소 wxml 렌 더 링 에 사 용 됩 니 다.그 중에서 속성 값 은 구성 요소 외부 에서 들 어 올 수 있 습 니 다.

//successModal.js
Component({
 /**
 *        
 */
 properties: {
 //     modalHidden  ，             .   modal-hidden 
 modalHidden: {
  type: Boolean,
  value: true
 },
 modalIcon: {
  type: String,
  value: ' ',
 },
 modalTitle: {
  type: String,
  value: ' ',
 },
 modalDesc: {
  type: String,
  value: ' ',
 }
 },

 /**
 *        
 */
 data: {

 },

 /**
 *        
 */
 methods: {
 //         
 modal_click_Hidden: function () {
  this.setData({
  modalHidden: false,
  })
 },
 }
})

step 5:사용자 정의 구성 요소 사용
먼저 사용 해 야 할 json 파일 에서 참조 설명 을 한 다음 사용자 정의 구성 요소 의 태그 이름과 해당 하 는 사용자 정의 구성 요소 파일 경 로 를 제공 해 야 합 니 다.

//index.json
{
 "usingComponents": {
 "modal-success": "../../component/successModal/successModal" //                          
 },
 "navigationBarTitleText": "  "
}

그 다음으로 페이지 의 wxml 에서 사용자 정의 구성 요 소 를 사용 합 니 다.페이지 의 wxml 에서 기본 구성 요 소 를 사용 하 는 것 처럼 사용자 정의 구성 요 소 를 사용 할 수 있 습 니 다.노드 이름 은 구성 요소 의 태그 이름 을 사용자 정의 하고 노드 속성 은 구성 요소 에 전달 하 는 속성 값 입 니 다.

<!--index.wxml-->
<view class="container">
 <view class="demoBtn" bindtap="bindViewTap">
 <text>  </text>
 </view>
 <!--   modal   -->
 <modal-success modal-hidden="{{is_modal_Hidden}}" modal-icon="{{is_modal_icon}}" modal-title="{{is_modal_title}}" modal-desc="{{is_modal_desc}}" />
</view>

다음은 애플 릿 사용자 정의 구성 요소 의 demo 입 니 다.start 를 환영 합 니 다.
github 주소:https://github.com/ywyan/wx-component
주의 점:
4.567917.기초 라 이브 러 리 의 1.5.x 버 전에 대해 1.5.7 도 일부 사용자 정의 구성 요소 가 지원 합 니 다

WXML 노드 라벨 이름 은 소문 자,밑줄,밑줄 의 조합 일 수 있 기 때문에 사용자 정의 구성 요소 의 라벨 이름 도 이 문자 만 포함 할 수 있 습 니 다

사용자 정의 구성 요소 도 사용자 정의 구성 요 소 를 참조 할 수 있 습 니 다.참조 방법 은 페이지 에서 사용자 정의 구성 요 소 를 참조 하 는 방식(usingComponents 필드 사용)과 유사 합 니 다4.567917.사용자 정의 구성 요소 와 사용자 정의 구성 요 소 를 사용 하 는 페이지 의 항목 루트 디 렉 터 리 이름 은'wx-'를 접두사 로 할 수 없습니다.그렇지 않 으 면 오류 가 발생 할 수 있 습 니 다4.567917.구 버 전의 기본 라 이브 러 리 는 사용자 정의 구성 요 소 를 지원 하지 않 습 니 다.이 때 사용자 정의 구성 요 소 를 참조 하 는 노드 는 기본 빈 노드 로 변 합 니 다총결산
위 에서 말 한 것 은 작은 편집자 가 소개 한 위 챗 애플 릿 의 사용자 정의 구성 요소 의 실현 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.작은 편집자 가 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!