微信小程序开发 教案 3.11 教案-简单模板的定义及应用.docx

第3章 微信小程序概述任务3.11简单模板的定义及应用课时内容简单模板的定义及应用课时1教学目标掌握简单模板的定义及应用教学重点简单模板的定义及应用教学难点简单模板的定义及应用教学设计1 .教学思路：通过实训任务来让学生掌握简单模板的定义及应用2 .教学手段：多媒体+计算机3 .教学资料：教材、多媒体课件教学内容一、任务描述编写一个小程序，首先定义1个模板，其中包含1个学生的姓名、年龄和性别等信息，然后使 用该模板创建多名学生信息。二、导入知识点小程序框架允许在WXML文件中提供模板(template)o模板可以用于定义代码片段，然后在不 同的页面被重复调用。代码语法：<template></template>L定义模板小程序使用(template在WXML文件中定义代码片段作为模板使用，每个template都使用name 属性自定义模板名称。<!-WXML-><template name="myTemp"><view><text> Name: name </text><text> Age: age </text></view></template>2 .使用模板在新的WXML页面继续使用template标签就可以引用模板内容了，引用的template标签必须 带有is属性，该属性值用于指定正确的模板name名称才能成功引用，然后使用data属性将模板所 需要的数据值传入，如定义姓名为“张三”，年龄是20。<!-WXML-><import src='./template/template.wxmr /><template is="myTemp" data:”.student“/JSPage(data:student: name:'张三age: 20）模板拥有自己的作用域，只能使用data传入的数据。上述代码表示引用name为myTemp的模板, 并且姓名和年龄分别更新“张三”和“20”。WXML提供模板（template）,可以在模板中定义代码片段，然后在不同的地方调用。定义模板 时要使用name属性作为模板的名字，使用模板时要使用is属性来声明需要使用的模板，然后将模 板所需要的数据通过data属性传入。is属性可以使用Mustache语法，来动态决定具体需要渲染哪个 模板。模板拥有自己的作用域，只能使用data传入的数据以及模板定义文件中定义的wxs/模块。利用import可以引用目标文件中定义的template。import有作用域的概念，即只会import目标 文件中定义的template,而不会import目标文件import的template,如：C import B,B import A,在C中 可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。三、实现效果根据任务描述可以做出如图3.17所示的效果。首先编辑好1个模板信息如图（a）所示，然后利 用模板在界面上显示创建了多名学生的信息如图（b）所示。 WeChatT13:45100% -Weixin简单模板的应用姓名:谢秋桦年龄：18性别:女 WeCbatT13:46100%Wecxin®简单模板的应用姓名:谢秋桦年龄：18性别女姓名:黄贵洲年龄：19 性别:男 姓名:李沁轩 年龄：20 性女 姓名:刘婷婷 年龄：19 性别女（a）显示一名学生信息（b）使用模板创建多名学生信息图3.17利用简单模板定义及应用的运行效果四、任务实现.编写template.wxml文件代码首先新建一个template文件夹，然后再新建一个template.wxml模板文件，在添加template.wxml 文件中编写代码。项目pages文件夹中添加template.wxml文件，并在其中创建一个名为student的模板 namestudenf,模板中包含学生姓名、年龄和性别内容。1 .编写index.wxml文件代码在在文件中首先利用import标签的src属性引用student模板所在的文件template.wxml然后通过 template标签的is属性引用模板，通过data属性传入模板数据。对象数据的传入可以通过“对象 名”，也可以通过对象“属性名1:属性值L属性名2:属性值2,”传入数据。2 .编写index.js文件代码在该文件的data对象中需要初始化index.wxml文件中绑定的对象数据stuOl和stu02o练习