微信小程序开发教案 3.18 教案-旅游攻略.docx

会员专享推荐 · 你可能也用得上更多

开通会员，畅读全站文档

本篇文档已为你保留

本篇文档价值 ~~¥35.00~~会员免费解锁

全文不限次阅读，剩余内容即刻解锁
高速下载通道，免排队、无等待
专属客服 1 对 1 答疑，优先响应
每日赠送下载券，本篇文档免费送

有 86 篇商业计划书正在上传

下载原文档

第3章微信小程序概述任务3.18旅游攻略课时内容旅游攻略课时2教学目标掌握template标签的使用方法掌握import标签的使用方法教学重点template标签的使用方法import标签的使用方法教学难点import标签的使用方法教学设计1.教学思路：通过实训任务旅游攻略的制作来让学生掌握template标签、import标签的使用方法2.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件教学内容一■任务描述设计一个旅游攻略小程序，根据在任务项目要求，利用import进行固定样式的导入和旅游攻略新闻信息内容的动态导入。import更适合于统一样式但内容需要动态变化的情况。二.导入知识点小程序可以使用〈template〉标签在目标文件中事先定义好模板，然后在当前页面使用（import〉标签引用〈template〉中的内容。在template.wxml文件中使用〈template〉定义了一个名称为myTemp的模板代码块。<template name=,,myTemp"><text>{{text}}</text></template>然后在首页index.wxml中使用（import〉引用了tmpl.wxml,就可以使用myTemp模板。<import src="路径/template.wxml”/〉<template is="myTemp”data="{{text:’hello’}}”/〉此时等同于在index.wxml中显示了，如图3.42所示。<text>hello</text>WeChat令WeChat令14:55 100%Weixin hello图3.42使用〈template〉模板标签前面学习了include引入标签，它更适合于无需改动目标文件的情况；而import标签更适合于统一样式但内容需要动态变化的情况。三、实现效果本任务利用import进行旅游攻略的设计与制作。首先编写模板文件news.wxml和news.wxss,然后在index.wxml和index.css文件中利用import引用news.wxml和news.wxss,并编写index.js中的data数据进行内容动态的引用。如图3.43所示。•••••wcze14 59 Wei»n©旅游攻略峨唐山是中国佛教名山，世界文化与»自然加阱四川省成都市8月24日HHFkTSi黄山是世界地质公园，中华十大名山之一，被誉为天下第一奇山安截省黄山市9月2(普陀山是风景名胜区，素有海天佛国、南海圣境之称统一样式但内容需要动态变化的情况。三、实现效果本任务利用import进行旅游攻略的设计与制作。首先编写模板文件news.wxml和news.wxss,然后在index.wxml和index.css文件中利用import引用news.wxml和news.wxss,并编写index.js中的data数据进行内容动态的引用。如图3.43所示。•••••wcze14 59 Wei»n©旅游攻略峨唐山是中国佛教名山，世界文化与»自然加阱四川省成都市8月24日HHFkTSi黄山是世界地质公园，中华十大名山之一，被誉为天下第一奇山安截省黄山市9月2(普陀山是风景名胜区，素有海天佛国、南海圣境之称WeCh-i^T 14 57 Wetxin旅游攻略岷固山是中国佛校名山，世界文化与自然双遗产泰山是国家5MR旅游景区，是五岳独尊、天下第一山(a)一个模板静态引用(b)多个模板动态引用3.43使用模板编写旅游攻略四、任务实现(1)首先，需要把news.wxml微信页面和news.wxss微信样式做成模板，在css文件夹中新家一个template目录，在template目录下再新建一个news,在news下新建两个文件，分别为news.wxml和news.wxss o(2)编写news・wxml文件。在news.wxml中,编写模板文件〈template name=’news’>・・.〈/template〉。(3)编写news.wxss文件的代码。根据模板文件news.wxml来对.newGroup组样式、.newGroup.infoGroup信息样式、.newGroup.infoGroup.title标题样式、.newGroup.infoGroup.address地址样式、.newGroup.infoGroup.time时间样式和.thumbGroup.thumb缩略图进行编写。(4)在index.wxml,利用import导入news.wxml页面模板。(5)在index.wxml页面中，利用@import导入news.wxss样式模板。(6)利用import导入模板，需要把模板news.wxml文件中的标题信息、地址、时间和图片改为{{title}}、{{address}}、{{time}}和{{imgSrc}}动态变量。(7)同时，编写index.js中的data数据，实现动态新闻组。(8)编写index.wxml文件，把数据data动态地渲染到视图界面上。练习。