위 챗 애플 릿 보기 template 템 플 릿 참조 인 스 턴 스 상세 설명

위 챗 애플 릿 보기 template 템 플 릿 참조 인 스 턴 스 상세 설명
WXML 은 두 가지 파일 인용 방식 import 와 include 를 제공 합 니 다.
include 는 대상 파일 을 제외 한 전체 코드 를 도입 할 수 있 습 니 다.include 위치 로 복사 하 는 것 과 같 습 니 다.

temlate.wxml

<template name="tmp_data" >

   <view class="content">
    <!--    -->
    <view class="author-date"> 
      <image src="{{item.header_url}}" class="author"></image>
      <text class="date">{{item.date}}{{idx}}</text>
    </view>
    <!--      -->
     <text class="title">{{item.title}}</text>
     <image class="image" src="{{item.image_url}}"></image>
     <text class="article-content">{{item.content}}</text>
    <view >

     <image class="article-images" src="../../images/icon/chat.png"></image>
     <text class="article-text">66</text>

     <image class="article-images" src="../../images/icon/view.png"></image>
     <text class="article-text">88</text>

    </view>


  </view>

</template>

redirect.wxml 참조

<import src="template/template.wxml" />

template.js

var content_for = [
 {
  date: "2020  10  9  ",
  title: "    ",
  header_url: "/images/3.png",
  image_url: "/images/6.jpg",
  content: "     ，     ，  ，             。      ，       ，       ，       。",
 },
 {
  date: "2022  10  9  ",
  title: "  ",
  header_url: "/images/3.png",
  image_url: "/images/8.jpg",
  content: "      ，       ，       ，       。",
 },

]
//    
module.exports={
 templates: content_for
}

redirect.js 참조

var content_data=require('../../template/template.js')
// pages/redirect/redirect.js
Page({

 /**
  *        
  */
 data: {

 },

 /**
  *       --      
  */
 onLoad: function (options) {

   this.setData({
     key: content_data.templates
   });

 }

});

wxml

 <block wx:for="{{key}}" wx:for-item="item" wx:for-index="idx">
     <!-- is      name  -->
     <template is="tmp_data" data="{{item}}" />
   </block>

template.wxss 파일

.title{
 font-size: 34rpx;
 font-weight: 600;
 color:#333;
 margin-bottom: 20px;
}

redirect.wxss 파일 참조 위 스타일

@import "template/template.wxss" //  import  

swiper{
 width:100%;
 height:500rpx;
}
swiper image{
  width:100%;
 height:500rpx;
}

본 사이트 의 애플 릿 에 관 한 글 이 아직 많 습 니 다.여러분 이 검색 하여 찾 아 보 실 수 있 기 를 바 랍 니 다.본 고 를 통 해 여러분 에 게 도움 이 되 기 를 바 랍 니 다.본 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다.