微信小程序使用template模板

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

 第一步：新建一個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