《微信小程序开发 教案 3.12 教案-复杂模板的定义及应用.docx》由会员分享，可在线阅读，更多相关《微信小程序开发 教案 3.12 教案-复杂模板的定义及应用.docx（4页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第3章 微信小程序概述任务3.12复杂模板的定义及应用课时内容复杂模板的定义及应用课时2教学目标掌握复杂模板的定义及应用教学重点复杂模板的定义及应用教学难点复杂模板的定义及应用教学设计1 .教学思路：通过实训任务让学生掌握复杂模板的定义及应用2 .教学手段：多媒体+计算机3 .教学资料：教材、多媒体课件教学内容一、任务描述一段小程序布局代码需要在多个页面上使用，初学的时候就会把页面拷贝来拷贝去，如果需要 修改的地方就在多个页面上进行修改，这样的话势必对于一个项目的维护造成很大的障碍。此任务 将这一段重复的代码单独编写出一个模板，然后想要使用这段代码的地方进行直接引用，这个模板 就可以被使用啦；
2、如果模板中的某个地方需要被修改，直接在模板中去修改需要改变的地方就好， 这样对于一个项目的维护有很大的效率提升。二、导入知识点WXML提供模板（template）功能，可以把一些共用的、复用的代码，在模板中定义代码片段， 然后在不同的地方调用，以达到一次编写，多次直接使用的效果。1 .定义模板在（template/内定义代码片段，使用name属性，作为模板的名字，代码格式如下：template name=tplnameindex:megTi m e :time2 .引用模板在WXML文件里，使用js属性，声明需要使用的模板，然后将模板所需要的data传入，代码格 式如下：3.import 引用
3、import可以在该义件中使用模板文件定义的templateo假如在wxml文件中引用模板中wxml的内容，则使用假如在WXSS文件中引用模板中WXSS的内容，则使用import 路径/文件名.wxss三、实现效果根据任务描述可以做出如图3.19所示的效果。首先编辑好1个不调用的模板tabbar代码文件， 然后再利用模板分别使用import应用wxml和wxss模板，在界面上显示使用模板的多条信息的tabbar 文件，如图3.20所示。WeChatT1353Weucin 13:58Weixin我们一起唱歌吧！ 2021-1-30周杰伦我们一起打篮球吧！ 2020-1-30科比QQ图3.19不使
4、用模板的tabbar小程序效果13:59Weixin我们一起唱歌吧！ 2021-1-30周杰伦我们一起国簿吧！ 2021-2-17迪丽热巴我们一起玩游戏吧！ 2021-6-15真心话大哥哈.WChe1400100Weuin我们一起打篮球吧！ 2020-1-30科比我们一起游泳吧！ 2020-2-19两晶我们一起跑步吧！ 2020-9-14刘翔图3.20使用模板的tabbar小程序效果四、任务实现(1)首先创建两个新的页面。在pages下面点击“文件夹”名分别为qq和weixin目录，最后在qq 和 weixin 目录下“新建 Pages” 分别为 qq.wxml 和 weixin.wxmlo(
5、2)在app.json文件中配置一个tabBar,通过list数组去添加“QQ”和“微信”。(3)在qq.wxml中进行代码编写。(4)在qq.wxss中进行代码编写。(5)在“微信”页面中设置和“QQ”页面类似的效果，则在weixin.wxml和weixin.wxss中编写代码。(6)为了便于管理，我们将用到WXML模板，同时可应用模板进行优化。右击“新建文件夹”，创建一个目录名为“template”，在这个里面将存放所有的模板项目文件。在“template”文件 夹中再新建两个文件分别是template .wxml和template .wxsso(7)把已编辑好的qq.wxml剪切到tem
6、plate.wxml文件中，把该代码作为模板引用。但wxml模板不 能直接被引用，后面需要对template/template模板进行引用，所以先使用template/template 的标签把wxml文件包裹起来。(8 )同理，把已编辑好的qq.wxss剪切到template.wxss文件里，但wxss不需要被 template/template的标签包裹。template.wxss代码文件见附件；(9)通过import导入到qq.wxml文件中，注意相对路径的写法。相对路径/：表示回到上一级；相对路径/：表示到下一级。(10)通过import导入到qq.wxss文件中，qq.wxss文件：
7、(11)同理，把template模板中的.wxml和.wxss的文件内容分别应用到weixin.wxml和weixin.wxss 中。(12)因为模板中的template.wxml的数据的内容是固定不变的，如“我们一起来写首歌吧！”和“周 杰伦”，所以需要通过变量来进行对内容的改变。分别把内容设置为content和friend,可以通过 这种方式把变量动态的传递到wxml页面中。(13)分别在qq.wxml和weixin.wxml页面中传递content和friend这两个变量。(14)如果想在列表上添加一个time时间参数，则在模板template.wxml引用文件中添加上时间参 数text
8、 classutimeAHtimeHc/text这样一句话即可。同时,在qq.wxml和weixin.wxml中添加time参数,并给它赋值即可。最后的效果图如图3.23所示使用模板的tabbar小程序效果所示。从此任务来看，只要在模板 template.wxml或template.wxss进行了修改，那么其他页面都会生效，即一处修改，处处生效，这就 是模板的优点。WKhotV13:59100)Weiun,我们一起唱歌吧！ 2021-1-30周杰伦我们一起取儒吧！ 2021-2-17迪丽热巴我们T玩游戏吧！ 2021-6-15真心耐冒险WeCMtr14:00WFWMixin我们一起打篮球吧！ 2020-1-30科比我。尸起游泳吧！ 2020219版晶我们一起跑步吧！ 2020-9-14刘翔QQm8-图3.23使用模板的tabbar小程序效果练习