在一個項目中需要在多處頁面使用類似的模塊,就需要創建模板—-減少代碼量,同時代碼高度復用;
一、定義模板
1、新建一個template文件夾用來管理項目中所有的模板;
2、新建一個courseList.wxml文件來定義模板;
3、使用name屬性,作為模板的名字。然后在<template/>內定義代碼片段。
一個.wxml文件中可以定義多個模板,只需要通過name來區分;
模板中的數據都是展開之后的屬性。
<template name="courseLeft"> 這里面寫你要放入的模塊的代碼! </template>
二、使用模板
1、使用 is 屬性,聲明需要的使用的模板
2、將模板所需要的 data 傳入,一般我們都會使用列表渲染。
<template is="" data=""></template>
<template wx:if=" is="courseLeft" data=""></template>
<template wx:else is="courseRight" data="{{...item}}"></template>
data 是要模板渲染的數據,data="{{...item}}" 寫法是ES6的寫法,item是wx:for當前項,... 是展開運算符,在模板中不需要再{{item.courseName}} 而是直接{{courseName}} 。
三、模板樣式
1、在新建模板的時候同時新建一個courseList.wxss 的文件,與CSS同樣的寫法控制樣式。
2、在需要使用模板的頁面 .wxss文件中import進來;或者直接在app.wxss中引入,這樣只需要一次引入,其他文件就不用引入了。
@import "../template/courseList.wxss";