ホームページ > 記事 > ウェブフロントエンド > WeChatアプレットのテンプレートの使い方
今回は、WeChat アプレットのテンプレートの使用方法を説明します。WeChat アプレットでは、コードの相互運用性のために同じセクションを使用できます。以下のレンダリングに示すように、テンプレートを使用できます。 。この記事では、優れた分析を提供します。
テンプレート定義
テンプレートで最も重要なことは、テンプレートの名前、つまり「」です
以下はテンプレートコードの例です
template name="postItem"> <view class='post-container'> <view class='post-author-date'> <image class='post-author' src='{{avatar}}'></image> <text class='post-date'>{{date}}</text> </view> <text class='post-title'>{{title}}</text> <image class='post-image' src='{{imgSrc}}'></image> <text class='post-content'>{{content}}</text> <view class='post-like'> <image class='post-like-image' src='/images/icon/chat.png'></image> <text class='post-link-text'>{{collection}}</text> <image class='post-like-image' src='/images/icon/view.png'></image> <text class='post-link-text'>{{reading}}</text> </view> </view> </template>
wxssファイル
.post-container { display: flex; flex-direction: column; margin-top: 20rpx; margin-bottom: 40rpx; background-color: white; border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; padding-bottom: 5px; } .post-author-date { margin: 10rpx 0 20rpx 10rpx; } .post-author { width: 60rpx; height: 60rpx; vertical-align: middle; } .post-date { margin-left: 20rpx; vertical-align: middle; margin-bottom: 5px; font-size: 26rpx; } .post-title { font-size: 34rpx; font-weight: 600; color: #333; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; } .post-image { margin-left: 16px; width: 100%; height: 340rpx; margin: auto 0; margin-bottom: 15rpx; } .post-content { color: #666; font-size: 28rpx; margin-bottom: 20rpx; margin-left: 20rpx; margin-right: 20rpx; letter-spacing: 2rpx; line-height: 40rpx; } .post-like { font-size: 13px; flex-direction: row; line-height: 16px; margin-left: 16px; color: gray; } .post-like-image { height: 16px; width: 16px; margin-right: 8px; vertical-align: middle; } .post-link-text { vertical-align: middle; margin-right: 20px; }
テンプレートファイルの紹介
使用が付いているテンプレートファイルはテンプレート定義を使用する場合です。 name データはループ内のデータです。 「...」で表現すると、テンプレートに「item.xx」を記述する必要がなく、項目に属性を直接記述するだけで、アイテム内のデータをすべてフラット化できます。 テンプレート プログラムの wxml ファイル
<import src="post-item/post-item-template.wxml" /> <view> <block wx:for="{{postList}}" wx:for-item="item"> <template is="postItem" data="{{...item}}" /> </block> </view>
wxss ファイル
@import 'post-item/post-item-template.wxss';
を使用するには、上記の紹介を読んで方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
関連読書:
vueで親コンポーネントから子コンポーネントにパラメータを渡す方法。 js
以上がWeChatアプレットのテンプレートの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。