微信小程序 - 18.模板

跟着视频只是简单了解模板的使用 , 应该不是个用途相当广泛的东西 , 还得是自定义组件

一.页面定义使用模板

1. 定义模板

<template name="tmpTest">
  <view>这是一个定义的模板,在被使用前,不会被渲染出来,使用模板请使用js</view>
</template>

2. 使用模板 is

<template is="tmpTest">

3. 模板传值

<template name="tmpTest">
  <view class="testTmp">{{title}}</view>
</template>

<template is="tmpTest" data="{{title:'我是title'}}"></template>

二.引用模板

1. 封装模板template
   1. 新建文件夹templates
   2. 新建存放模板文件夹,名字自定义(如:tmpTest)
      模板右键没有新增template,只需自己新加tmpTest.wxml文件
      注:如需要样式,可新建tmpTest.wxss文件(.wxml文件和.wxss文件不会自动关联,需要再引用模板的wxss里加@import来手动引入模板样式文件)
2. 引入模板,关键字import

<import src="/templates/tmpTest/tmpTest.wxml" />

<template is="tmpTest" data="{{title:'我是tmp-title',content:'我是tmp-content',desc:'我是tmp-desc'}}" />
<template is="tmpTest"></template>

3. 使用模板.wxss样式
   模板 : tmpTest.wxss

.testTmp{
  border: 2px solid red;
}

引用模板页面 : demo.wxss

@import "/templates/tmpTest/tmpTest.wxss"