轉發：微信小程序-template模板使用

轉載於CSDN--【向朔1992】處。（部分內容根據實際情況有所修改）

小程序實現主頁面調用次級頁面的wxml頁面內容，如下圖：

 

 

根據上圖，我們可以將圖片和圖片信息作為一個goodsList.wxml 次頁面，然后整個頁面當做主頁面home.wxml頁；

模板

一、定義模板

1、新建一個template文件夾用來管理項目中所有的模板； 
2、新建一個courseList.wxml文件來定義模板； 
3、使用name屬性，作為模板的名字。然后在<template/>內定義代碼片段。

 下面是goodsList.wxml代碼：區分左右兩邊的數據的是下面第二行的三元運算符

<template name="goodsList">
    <view class="goods-item{{index % 2 == 0?' odd':''}}">
            <view class="goods">
                <view class="goods-tag ten" />
                <navigator url="../xiangqing/xiangqing">
                <image class="goods-image" src="{{goods.goods.imgUrl}}" />
                </navigator>
                <view class="desc-wrapper">
                    <view class="goods-desc">{{goods.goods.name}}</view>
                </view>
            </view>
            <view class="operating">
                <view class="tips">狀態<span>{{goods.takeRate * 100}}%</span></view>
                <view class="progress" style="width: calc(100% - 76px);"></view>
                <view class="progress-take" style="width: calc((100% - 76px) * {{goods.takeRate}} );"></view>
                <view class="btn">加入清單</view>
            </view>
        </view>
</template>

二、使用模板

1、使用 <import scr=" "> 標簽，在主頁面引入需要使用的次級模板wxml

2、將模板所需要的 data 傳入(這里的數據，我們在home.js文件中定義好)，一般我們都會使用列表渲染。

<import src="tpl/goodsList.wxml"/>
<block wx:for="{{goodsList}}">
        <template is="goodsList" data="{{index:index,goods:item}}"/>
</block>

解釋：1）首先引入次級模板文件，然后像普通的后台語言如php的模板引擎一樣，wx:for也可以看成是一個模板引擎，wx:for就是解析數組，循環打印變量。

        2）is作用就是確認引用模板，item就是數組的當前變量，index就是數組元素的下標。

        3）上面的wx:for="{{goodsList}}"，是js文件的多維數組數據，不是模板文件名，這里很重要。

        4）當然，你也可以這樣寫：

<import src="tpl/goodsList.wxml"/>
<block wx:for="{{goodsList}}">
        <template is="goodsList" data="{{...item}}"/>
</block>

data 是要模板渲染的數據，data="{{...item}}" 寫法是ES6的寫法，item是wx:for當前項，... 是展開運算符，在模板中不需要再{{item.goods}} 而是直接{{goods}} 。

三、模板樣式

1、在新建模板的時候同時新建一個courseList.wxss 的文件，與CSS同樣的寫法控制樣式。 
2、在需要使用模板的頁面 .wxss文件中import進來；或者直接在app.wxss中引入，這樣只需要一次引入，其他文件就不用引入了。

@import "../template/courseList.wxss";  

 

四、主頁面home.wxml示例：

...
<view class="sort-panel" style="position:{{sortPanelPos}};top:{{sortPanelTop}}px">
        <view class="sort-item  comb on">人氣</view>
        <view class="sort-item">最新</view>
        <view class="sort-item">進度</view>
        <view class="sort-item">
        </view>
    </view>
    <view class="goods-panel">
        <import src="tpl/goodsList.wxml"/>
        <block wx:for="{{goodsList}}">
        <template is="goodsList" data="{{index:index,goods:item}}"/>
        </block>
    </view>
...