1、第3章 微信小程序概述任務3.18旅游攻略課時內容旅游攻略課時2教學目標掌握template標簽的使用方法 掌握import標簽的使用方法教學重點template標簽的使用方法 import標簽的使用方法教學難點import標簽的使用方法教學設計.教學思路：通過實訓任務旅游攻略的制作來讓學生掌握template標簽、import標簽 的使用方法.教學手段：多媒體+計算機.教學資料：教材、多媒體課件教學內容一 任務描述設計一個旅游攻略小程序，根據(jù)在任務項目要求，利用import進行固定樣式的導入和旅游攻略 新聞信息內容的動態(tài)導入。import更適合于統(tǒng)一樣式但內容需要動態(tài)變化的情況。二.導入知識

2、點小程序可以使用template標簽在目標文件中事先定義好模板，然后在當前頁面使用（import 標簽引用template中的內容。在template.wxml文件中使用template定義了一個名稱為myTemp的模板代碼塊。text然后在首頁index.wxml中使用（import引用了 tmpl.wxml,就可以使用myTemp模板。import src= 路徑/template.wxml”/template is=myTemp” data=text: hello”/此時等同于在index.wxml中顯示了，如圖3.42所示。helloWeChat WeChat 令WeChat 令14:

3、55100%WeChat 令14:55100%hello圖3.42使用template模板標簽前面學習了 include引入標簽，它更適合于無需改動目標文件的情況；而import標簽更適合于統(tǒng)一樣式但內容需要動態(tài)變化的情況。統(tǒng)一樣式但內容需要動態(tài)變化的情況。三、實現(xiàn)效果本任務利用import進行旅游攻略的設計與制作。首先編寫模板文件news.wxml和news.wxss, 然后在 index.wxml 和 index.css 文件中利用 import 引用 news.wxml 和 news.wxss,并編寫 index.js 中的 data數(shù)據(jù)進行內容動態(tài)的引用。如圖3.43所示。 wcze1

4、4 59Wein旅游攻略峨唐山是中國佛教名山，世界文化與自然加阱四川省成都市8月24日HHFkTSi黃山是世界地質公園，中華十大名山 之一，被譽為天下第一奇山 安截省黃山市9月2(普陀山是風景名勝區(qū)，素有海天佛 國、南海圣境之稱統(tǒng)一樣式但內容需要動態(tài)變化的情況。三、實現(xiàn)效果本任務利用import進行旅游攻略的設計與制作。首先編寫模板文件news.wxml和news.wxss, 然后在 index.wxml 統(tǒng)一樣式但內容需要動態(tài)變化的情況。三、實現(xiàn)效果本任務利用import進行旅游攻略的設計與制作。首先編寫模板文件news.wxml和news.wxss, 然后在 index.wxml 和 in

5、dex.css 文件中利用 import 引用 news.wxml 和 news.wxss,并編寫 index.js 中的 data數(shù)據(jù)進行內容動態(tài)的引用。如圖3.43所示。 wcze14 59Wein旅游攻略峨唐山是中國佛教名山，世界文化與自然加阱四川省成都市8月24日HHFkTSi黃山是世界地質公園，中華十大名山 之一，被譽為天下第一奇山 安截省黃山市9月2(普陀山是風景名勝區(qū)，素有海天佛 國、南海圣境之稱WeCh-iT14 57Wetxin旅游攻略岷固山是中國佛校名山，世界文化與 自然雙遺產(chǎn)(a) 一個模板靜態(tài)引用(b)多個模板動態(tài)引用3.43使用模板編寫旅游攻略四、任務實現(xiàn)(1)首先，

6、需要把news.wxml微信頁面和news.wxss微信樣式做成模板，在css文件夾中新家一個 template目錄，在template目錄下再新建一個news,在news下新建兩個文件，分別為news.wxml 和 news.wxss o(2)編寫 newswxml 文件。在 news.wxml 中,編寫模板文件template name=news./template。(3)編寫news.wxss文件的代碼。根據(jù)模板文件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文件中的標題信息、地址、時間和圖