小程序——wxml模板和引用

模板

早期，微信小程序不支持组件化开发
为了复用代码，提出了“概念”
现在组件用的比较多，模板比较少
模板的功能：只会渲染的组件（没有自己的业务逻辑，没有事件监听）

1、定义和使用
模板要先定义，定义好模板的name，然后用is来使用把模板（定义部分是不会显示的，只有使用了才会渲染在页面上）
wxml文件

<text>wxml——模板的使用</text>
<!-- 模板的定义 -->
<template name="testTemplate">
  <view class="test">
    <view>title</view>
    <view>neirong</view>
    <text>jiashao</text>
  </view>
</template>
<!-- 模板的使用 -->
<template is="testTemplate"></template>
<template is="testTemplate"></template>

wxss文件

.test{
  border: 1px solid red;
  padding: 5px;
}

2、数据传递
在使用的时候设置data={{}}（数据可以从js文件的data中拿），然后在定义的时候用{{}}绑定
绑定的事件直接写在js文件里

<text>wxml——模板的使用</text>
<!-- 模板的定义 -->
<template name="testTemplate">
  <view class="test">
    <view>{{title}}</view>
    <view>{{context}}</view>
    <text bind:tap="_handerTap">{{introduce}}</text>
  </view>
</template>
<!-- 模板的使用 -->
<template is="testTemplate" data="{{title:'测试标题1',context:'测试内容1',introduce:'模板介绍1'}}"></template>
<template is="testTemplate" data="{{title:'测试标题2',context:'测试内容2',introduce:'模板介绍2'}}"></template>

3、集中管理模板并在不同的页面引入模板
另开一个目录，创建wxml文件和wxss文件，写好模板。
因为模板只能渲染，所以绑定事件在模板绑定，事件只能在引入页面的js文件写

引入模板wxml文件<import src="/templates/testTemplate/testTemplate.wxml"/>

<text>wxml——模板的使用</text>
<!-- 引入模板 -->
<import src="/templates/testTemplate/testTemplate.wxml"/>
<!-- 模板的使用 -->
<template is="testTemplate" data="{{title:'测试标题1',context:'测试内容1',introduce:'模板介绍1'}}"></template>
<template is="testTemplate" data="{{title:'测试标题2',context:'测试内容2',introduce:'模板介绍2'}}"></template>

引入样式wxss文件

@import "/templates/testTemplate/testTemplate.wxss"

引用

import
引入wxml：<import src="/templates/testTemplate/testTemplate.wxml"/>
引入wxss：@import "/templates/testTemplate/testTemplate.wxss"

include
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

<include src="html/header.wxml" />
<view>中间的内容</view>
<include src="html/footer.wxml" />

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>