위 챗 애플 릿(template)사용 설명

본 고 는 여러분 에 게 위 챗 애플 릿 템 플 릿 의 사용 방법 을 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같 습 니 다.
효과 도
MUI 의 인 스 턴 스 첫 페이지 와 목록 페이지 를 인 스 턴 스 로 합 니 다.
列表页面

위의 그림 을 통 해 두 페이지 의 목록 부분 이 비슷 하고 줄 마다 단원 으로 템 플 릿 을 만 드 는 것 을 알 수 있다.
템 플 릿 템 플 릿
1.템 플 릿 이 저 장 된 위치 와 템 플 릿 페이지 를 사용 하여 저 장 된 위치
目录详图

template 템 플 릿 의 WXML


<!--      -->
<template name="listNone">
 <view class="tui-menu-list">
 <navigator url="{{item.url}}">
  <block>
  <text>{{item.title}}</text>
  </block>
 </navigator>
 </view>
</template>
<!--      -->
<template name="list">
 <view class="tui-menu-list tui-youjiantou">
 <navigator url="{{item.url}}">
  <block>
  <text>{{item.title}}</text>
  </block>
 </navigator>
 </view>
</template>

메모:위 에 같은 WXML 파일 에 두 개의 템 플 릿 을 만 들 었 습 니 다.하 나 는 오른쪽 에 화살표 가 있 고 하 나 는 오른쪽 에 화살표 가 없 으 며 name 이름 으로 인식 합 니 다.
template 템 플 릿 의 WXSS


.tui-menu-list{
 line-height: 80rpx;
 color: #555;
 font-size: 35rpx;
 padding: 0 0rpx 0 10px;
 position: relative;
}

index 페이지 에서 template 템 플 릿 사용 하기
WXML


<import src="../../template/list.wxml"/>

<view class="tui-fixed">
 <scroll-view style="height:100%;" scroll-y="true">
 <template wx:for="{{menu}}" is="list" data="{{item}}"></template>
 </scroll-view>
</view>

import 로 템 플 릿 을 도입 합 니 다

템 플 릿 을 사용 합 니 다.template 의 is 속성 과 템 플 릿 에서:name 속성 이 대응 합 니 다.사용 할 구체 적 인 템 플 릿 을 표시 합 니 다.data 속성 은 템 플 릿 에서 사용 할 데이터 입 니 다.데이터 구조 가 같 아야 합 니 다

4.567917.템 플 릿 을 직접 순환 할 수 있 고 필요 할 때 템 플 릿 에 한 층 을 더 해서 순환 할 수 있다.
WXSS
WXSS 를 전역 에 도입 합 니 다!


@import "./template/list.wxss";

import 도입 목록 의 WXSS 를 직접 사용 합 니 다

이 코드 는 현재 페이지 의 WXSS(index.wxs)에 놓 을 수도 있 고 전체 wxs(app.wxss)에 놓 을 수도 있 습 니 다

제안:만약 에 프로젝트 가 하나의 템 플 릿 을 대량으로 사용 해 야 한다 면 WXSS 는 전체 국면 에 도입 하여 코드 의 양 을 줄인다.프로젝트 가 템 플 릿 을 거의 사용 하지 않 는 다 면 필요 한 페이지 에 WXSS 를 도입 할 수 있 습 니 다.

list 페이지 에서 template 템 플 릿 사용 하기
WXML


<import src="../../template/list.wxml"/>

<view class="tui-list-box">
 <view class="tui-list-head">     </view>
 <template wx:for="{{menu}}" is="listNone" data="{{item}}"></template>
</view>
<view class="tui-list-box">
 <view class="tui-list-head">     </view>
 <template wx:for="{{menu}}" is="list" data="{{item}}"></template>
</view>
<view class="tui-list-box-raduis">
 <view class="tui-list-head">    </view>
 <template wx:for="{{menu}}" is="list" data="{{item}}"></template>
</view>

총결산
4.567917.한 프로젝트 에서 여러 페이지 에서 유사 한 모듈 을 사용 해 야 한다.템 플 릿 을 만들어 야 한다.-코드 의 양 을 줄 이 고 코드 의 높이 를 재 활용 해 야 한다

같은 WXML 파일 에 유사 한 템 플 릿 을 여러 개 만 들 고 name 속성 으로 구별 합 니 다

템 플 릿 WXSS 가 전체 에 도입 되 고 사용 페이지 에 도입 되 는 차 이 는 템 플 릿 의 사용량 에 있 습 니 다

import 를 사용 하여 템 플 릿 WXML 과 WXSS 를 도입 합 니 다

template 라벨 을 통 해 템 플 릿 을 사용 합 니 다.template 라벨 의 is 속성 은 템 플 릿 의 name 속성 과 대응 하고 data 속성 은 템 플 릿 에 들 어 오 는 데 이 터 를 대표 합 니 다

DEMO 다운로드 하 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

OpenSSL 생 성 ssl 인증서

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

위 챗 애플 릿(template)사용 설명

좋은 웹페이지 즐겨찾기