WeChat 미니 프로그램에서 템플릿 모듈을 사용하는 방법

이 글의 내용은 WeChat 애플릿의 템플릿 모듈을 사용하는 방법에 대한 것입니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

WXML은 코드 조각을 정의한 다음 다른 위치에서 호출할 수 있는 템플릿을 제공합니다.
먼저 템플릿을 저장할 페이지 디렉터리에 템플릿 디렉터리를 만듭니다.
템플릿을 만드는 방법은 무엇인가요?
템플릿에서는 xxx.wxss와 xxx.wxml이라는 두 개의 새 파일만 만들면 됩니다. 다른 두 개의 .js와 .json은 필요하지 않습니다.
템플릿 디렉터리에 새 list-template.wxml 및 list-template.wxss를 만듭니다.

list-template.wxml:

<template name=&#39;listTmp&#39;><view>
  <view>
    <image src=&#39;/images/avatar/0.png&#39;></image>
    <text>may 9 2018</text>
  </view>
  <text>火影村</text>
  <image src=&#39;/images/detail/carousel/6.jpg&#39;></image>
  <text>火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火</text>
  <view>
    <image src=&#39;/images/icon/view.png&#39;></image>
    <text>88</text>
    <image src=&#39;/images/icon/star.png&#39;></image>
    <text>88</text>
  </view></view></template>

list-template.wxss:list-template.wxss:

.tmpContainer{
  display: flex;  
  flex-direction: column;
  }
.avatar_date image{
  width: 60rpx;  
  height: 60rpx;  
/* 把此元素放置在父元素的中部。就可以让图片与文字都在中间了 */
  vertical-align: middle;  
  margin-right: 10rpx;
  }
.avatar_date {
  padding: 10rpx;
  }
.avatar_date text{
  font-size: 32rpx;
  }
.company{
  margin-left: 10rpx;  
  font-size: 36rpx;  
  font-weight: 700;  
  margin: 10rpx;
  }
.contentImg{
  width: 100%;  
  height: 460rpx;
  }
.content{
  font-size: 32rpx;  
  /* 段落首字母缩进两个字 */
  text-indent: 64rpx;
  }
.collection_love image{
  width: 32rpx;  
  height: 32rpx;  
  vertical-align: middle;  
  margin-right: 10rpx;
  }
.collection_love text{
  font-size: 28rpx;  
  margin-right: 10rpx;
  }

在list.wxml

<!-- 在头部引入,注意结尾别忘了/ -->
<import src=&#39;/pages/template/list-template.wxml&#39;/>

in list.wxml에 템플릿을 도입하세요:

rrreee
그런 다음 템플릿을 사용하려는 곳에 참조하세요

또한 다음과 같이 list.wxss에 템플릿 스타일을 도입하세요

관련 권장 사항:

php 디자인 패턴 템플릿 방법(템플릿 방법 모드)

WeChat 기업 계정 개발을 위해 WeChat 출석 쿠키 사용_javascript 기술

pdb 모듈을 사용하여 Python 프로그램 예제 디버깅

🎜

위 내용은 WeChat 미니 프로그램에서 템플릿 모듈을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!