찾다
위챗 애플릿미니 프로그램 개발WeChat Mini 프로그램 템플릿에 대한 자세한 설명과 간단한 예

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: &#39;this is a template&#39;,
   time: &#39;2016-09-15&#39;
  }
 }
})

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 ? &#39;even&#39; : &#39;odd&#39;}}" />
</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 중국어 홈페이지를 참고해주세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.