WeChat 미니 프로그램 템플릿
템플릿
WXML은 코드 조각을 정의하여 다양한 위치에서 사용할 수 있는 템플릿(템플릿)을 제공합니다. 형식과 데이터는 동일함을 보장할 수 있습니다.
1-템플릿 정의
`` 태그를 사용하여 템플릿을 정의하고, 템플릿 이름을 tempName으로 지정하고, 속성 이름에 추가합니다. 태그 내에서 템플릿 구조를 정의합니다.
<!-- template.wxml --> <!-- index: int msg: string time: string --> <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template>
2-템플릿 사용
템플릿을 사용해야 하는 곳에 태그를 사용하세요. js 파일의 데이터를 사용하려면 data 속성을 추가해야 합니다. 다음과 같습니다:
<!-- template.wxml --> <template is="msgItem" data="{{...item}}"/> <template is="msgItem" data="{{...item}}"/> <template is="msgItem" data="{{...item}}"/> 此时在页面上就会重复显示三次相同的信息。 data中的数据,来源于js文件,如下: <!-- template.js --> Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } })
3-is 속성
is 속성은 렌더링된 템플릿을 정적으로 가리킬 뿐만 아니라 Mustache 구문을 사용하여 특정 템플릿을 동적으로 결정할 수도 있습니다. 렌더링에는 어떤 템플릿이 필요합니까?
<!-- template.wxml --> // templates <template name="odd"> <view> odd </view> </template> <template name="odd"> <view> even </view> </template> // is属性使用Mustache语法动态渲染template <block wx:for="{{[1, 2, 3, 4,5]}}"> <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" /> </block>
위 코드는 조건에 따라 페이지에 홀수 또는 짝수로 표시됩니다.
4-템플릿 참조
As 위에서는 동일한 wxml 파일에서 템플릿을 정의하고 참조하지만 템플릿의 정의와 참조를 분리할 수 있습니다. 즉, 템플릿은 하나의 파일에 정의되고, 정의된 템플릿은 하나 이상의 다른 wxml 파일에서 사용될 수 있습니다.
외부 파일에서 템플릿을 참조하려면 import src="templateUrl" /> 태그를 사용하세요. 또한 is 속성을 사용하여 참조할 태그를 가리킵니다.
예를 들어 디렉토리는 다음과 같습니다.
-pages |--index |--index.js |--index.json |--index.wxml |--index.wxss |--template |--template.js |--template.json |--template.wxml |--template.wxss
index.wxml의 template에 정의된 템플릿을 사용하려면 먼저 index.wxml의 템플릿을 가져와야 합니다.
<!-- index.wxml --> <import src="../template/template.wxml" <template is="msgItem" data={{...indexData}} // 使用的是自己js文件中的数据
대상 파일의 템플릿만 참조하는 가져오기 범위에 주의하세요. 예: C import B, B import A, B에서 정의한 템플릿은 C에서 사용할 수 있고, A에서 정의한 템플릿은 B에서 사용할 수 있지만 C에서는 A에서 정의한 템플릿을 사용할 수 없습니다.
읽어주셔서 감사합니다. 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!
위챗 미니 프로그램 템플릿에 대한 자세한 설명과 간단한 예시는 PHP 중국어 홈페이지를 참고해주세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
