首先簡單的看一下文件結構：

?第一步：新建一個template文件夾，里面新建一個template.wxml和template.wxss；

template.wxml：

<template name="postItem"><view class="current">{{item.name}}, {{item.value}}</view> </template>

template.wxss：

.current{display: flex;justify-content: center;background: rgb(16,109,156);font-size: 50rpx;color: #fff; }

??第二步：編寫index.wxml；

<import src="../template/template.wxml" /><block wx:for="{{postData}}" wx:key="item"><!-- is表示定義的模板名稱 data為數據集合的item,微信小程序默認一條數據為 item --><template is="postItem" data="{{item}}"></template></block>

注意：使用? <import src="../template/template.wxml" />引入template.wxml模板，并且is="postItem"與template.wxml中的name名字要一致，這樣才能找到對應的模板；

第三步：編寫idnex.wxss

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

注意：只需要引入模板的css樣式即可使用該樣式。

第四步：編寫idnex.js

Page({data: {postData: [{ name: 'USA', value: '美國' },{ name: 'CHN', value: '中國'},{ name: 'BRA', value: '巴西' },{ name: 'JPN', value: '日本' },{ name: 'ENG', value: '英國' },{ name: 'TUR', value: '法國' },]}})

?顯示效果如下：

http://qushen.top/idea.html

總結

以上是生活随笔為你收集整理的微信小程序使用template模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。