WeChat 미니 프로그램에서 템플릿 모듈을 사용하는 방법-미니 프로그램 개발-php.cn

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

不言

풀어 주다： 2018-09-06 11:22:33

원래의

3169명이 탐색했습니다.

이 글의 내용은 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
그런 다음 템플릿을 사용하려는 곳에 참조하세요 WeChat 미니 프로그램에서 템플릿 모듈을 사용하는 방법

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

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