マイクロチャネルの使用アプレットテンプレートテンプレート

参考： テンプレート

テンプレート（テンプレート）を提供WXMLは、その後、コードフラグメント定義テンプレート内の異なる場所で呼び出すことができます。

ここでは、テンプレートテンプレートリライト使用の小さなニュース一覧構築するためのマイクロチャネルプログラムのサンプルコードを

新しいテンプレート

新しいポスト項目テンプレートディレクトリ、およびポスト項目template.wxmlとポスト項目template.wxssファイルを作成します

テンプレートにコードを移植

post.wxmlコード次のコードは、現在のテンプレートとして後コンテナノードを説明します。

ポスト項目template.wxmlファイルにポストコンテナノードコード

<!-- post-item-template.wxml -->

<template name="postItem">
  <view class="post-container">
    <view class="post-author-date">
      <image class="post-author" src="{{item.avatar}}"></image>
      <text class="post-date">{{item.date}}</text>
    </view>
    <text class="post-title">{{item.title}}</text>
    <image class="post-image" src="{{item.imgSrc}}"></image>
    <text class="post-content">{{item.content}}</text>
    <view class="post-like">
      <image class="post-like-image" src="/images/icon/chat.png"></image>
      <text class="post-like-font">{{item.collection}}</text>

      <image class="post-like-image" src="/images/icon/view.png"></image>
      <text class="post-like-font">{{item.reading}}</text>
    </view>
  </view>
</template>

ポスト項目template.wxssに関連するコードをpost.wxss

.post-container{
    flex-direction:column;
    display:flex;
    margin-top:20rpx;
    margin-bottom:40rpx;
    margin-left: 0rpx;
    background-color:#fff;
    border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;
    padding-bottom: 5px;
}

.post-author-date{
    margin-top:10rpx;
    margin-bottom: 20rpx;
    margin-left: 10px;
}

.post-author{
    width:60rpx;
    height:60rpx;
    vertical-align: middle;
}

.post-date{
    margin-left: 20px;
    vertical-align: middle;
}

.post-image{
    width:100%;
    height:340rpx;
    margin:auto 0;
    margin-bottom: 15px;
}

.post-date{
    font-size:26rpx;
    margin-bottom: 10px;
}
.post-title{
    font-size:34rpx;
    font-weight: 600;
    color:#333;
    margin-bottom: 10px;
    margin-left: 10px;
}
.post-content{
    color:#666;
    font-size:28rpx;
    margin-bottom:20rpx;
    margin-left: 20rpx;
    letter-spacing:2rpx;
    line-height: 40rpx;
}
.post-like{
    font-size:13px;
    line-height: 16px;
    margin-left: 10px;
}

.post-like-image{
    height:16px;
    width:16px;
    margin-right: 8px;
    vertical-align:middle;
}

.post-like-font{
    vertical-align:middle;
    margin-right: 20px;
}

テンプレートの導入

でpost.wxmlで導入Wxmlテンプレート：

<import src="post-item-template/post-item-template.wxml" />

post.wxssで導入Wxssテンプレート

@import "post-item-template/post-item-template.wxss";

テンプレートの使用

post.wxmlでテンプレートを使用します

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

コード改革

wxmlドキュメントテンプレートでは、各参照データは、我々はアイテムを使用する必要があります。

次のように3点の添加前項目において、上記項目の全てを除去することができます。