微信小程序模板、事件、引用

微信小程序视图层模板（template）

• 小程序框架允许在WXML文件中提供模板（template）
• 模板可以用于定义代码片段，然后在不同的页面被重复调用
• 每个都使用name属性自定义模板名称

<!--WXML-->
<template name="myTemp">
  <view>
    <text> Name: {
  
  {name}} </text>
    <text> Age: {
  
  {age}} </text>
  </view>
</template>

视图层模板（template）——定义模板

1. 新建一个templates文件夹用来管理项目中所有的模板
2. 创建“.wxml” 文件，在“.wxml”文件中使用“template”标签，在内定义代码片段
3. 一个.wxml文件中可以定义多个模板，只需要通过内name属性来区分不同代码块

视图层模板（template）——使用模板

• 在目标页面“**.wxml”文件中通过import引入模板文件，使用标签就可以引用模板内容了
• 引用的标签必须带有is属性，用于指定正确的模板name名称才能成功引用
• 使用data属性将模板所需要的数据值传入
• 1单独创建template目录，在template目录中创建管理模板文件
  2模板只有wxml、wxss文件
  3小程序开发工具不支持快速创建模板，需直接创建wxml、wxss文件
  4template的模板文件和样式文件只需要命名相同即可
  5如果模板较多，建议在template目录下再创建子目录，存放单独的模板

<!--WXML-->
<import src ="/templates/template.wxml"/>
<template is=“myTemp” data=“{
  
  {…student}}"/>

//JS
Page({
    data:{
        student: {
            name: '张三',
            age: 20
        }
    }
})

视图层模板（template）——模板样式

1. 在新建模板的时候同时新建一个**.wxss 的文件（文件名和.wxml相同），与CSS同样的写法控制样式
2. 在需要使用模板的页面 .wxss文件中import进来，或者直接在app.wxss中引入，这样只需要一次引入，其他文件就不用引入了

<!--WXSS-->
@import "../templates/ template.wxss";

自定义组件component及视图层模板templ