《微信小程序開發(fā)入門與項目實戰(zhàn)》高職全套教學(xué)課件

項目1微信小程序入門.pptx項目2開發(fā)環(huán)境搭建及開發(fā)工具介紹.pptx項目3從“HelloWechat”開啟微信小程序之旅.pptx項目4新聞列表頁面設(shè)計.pptx項目5天氣預(yù)報查詢實現(xiàn).pptx項目6美好時光視頻相冊制作.pptx項目7小程序電子書架設(shè)計.pptx項目8學(xué)生學(xué)籍卡展示.pptx項目9會議邀請函設(shè)計.pptx項目10設(shè)計實現(xiàn)模擬時鐘.pptx項目11推箱子游戲設(shè)計.pptx項目12綜合項目——校園點餐小程序.pptx全套可編輯PPT課件項目1微信小程序入門知識目標(biāo)：

?了解什么是微信小程序以及其開發(fā)特點。

?掌握微信小程序開發(fā)前準(zhǔn)備工作。

?掌握開發(fā)微信小程序之前帳號注冊及項目管理方法。技能目標(biāo)：

?了解小程序的概念及發(fā)展前景。

?掌握開發(fā)者帳號的注冊、信息的完善以及成員管理。

?掌握小程序開發(fā)工具的使用。項目1微信小程序入門素質(zhì)目標(biāo)：

?樹立科技創(chuàng)新的典范,推動移動互聯(lián)網(wǎng)技術(shù)進步,增強國家競爭力。

?秉承開放合作理念,為創(chuàng)新創(chuàng)業(yè)提供廣闊舞臺。

?踐行綠色發(fā)展,節(jié)約資源,助力環(huán)保。

?致力于服務(wù)人民,提供便捷、創(chuàng)新的服務(wù)與產(chǎn)品,增強民眾福祉。1.1知識準(zhǔn)備1.2項目實施拓展訓(xùn)練1.1知識準(zhǔn)備全套可編輯PPT課件1.1.1微信小程序概述微信小程序的誕生

隨著微信小程序的迅速發(fā)展以及普及,外賣、點餐、團購等小程序越來越多地被使用,它不需要像App一樣功能復(fù)雜且強大全面,而是提供了便捷的購物服務(wù),用戶不需要下載App安裝到手機,即可直接使用,不占用手機的存儲空間。1.1.1微信小程序概述2.什么是微信小程序

微信小程序技術(shù)上借鑒ReactNative，定制微信組件實現(xiàn)跨平臺運行，理念上類似早期應(yīng)用寶和支付寶小服務(wù)。它輕量（≤2MB）、免安裝，與微信深度集成，支持掃碼、搜索獲取及微信登錄。微信小程序擴展了微信服務(wù)平臺功能，彌補服務(wù)號不足，依托微信龐大用戶基數(shù)，實現(xiàn)快速獲取與便捷推廣，是微信向服務(wù)平臺轉(zhuǎn)型的重要一環(huán)。1.1.1微信小程序概述小程序頁搜錯查找公眾號關(guān)聯(lián)掃碼消息通知小程序切換使用歷史列表3.小程序功能1.1.1微信小程序概述4.微信小程序的優(yōu)勢及發(fā)展前景

微信歷經(jīng)多年沉淀，已躍升為不可或缺的社交溝通平臺，其衍生的微信小程序亦日益普及，深入生活各層面。近日，廣發(fā)證券發(fā)布深度投資價值分析報告，對微信小程序進行全面評估，預(yù)測其公司整體估值高達6230億美元，其中商業(yè)服務(wù)類小程序更是獨攬超500億美元估值桂冠。作為微信內(nèi)部寄予厚望的旗艦項目，微信小程序憑借其獨特優(yōu)勢，正蓄勢待發(fā)，有望徹底革新人們的線上生活體驗，開啟數(shù)字服務(wù)新時代。1.1.2開發(fā)團隊管理微信小程序的開發(fā)支持團隊協(xié)作，管理員可通過小程序管理后臺靈活管理項目成員，并依據(jù)成員職責(zé)分配不同權(quán)限。成員角色與權(quán)限：開發(fā)者：擁有開發(fā)權(quán)限，能使用微信開發(fā)者工具進行編碼及預(yù)覽開發(fā)版小程序。體驗者：可在手機端預(yù)覽體驗版小程序，提供用戶視角的反饋。額外權(quán)限：包括無限制登錄管理后臺、數(shù)據(jù)分析、版本提交審核、發(fā)布控制、服務(wù)器配置調(diào)整及暫停服務(wù)等高級功能。成員數(shù)量限制：個人小程序：限制總成員數(shù)為15人，其中開發(fā)者5人，體驗者10人。組織類型小程序：根據(jù)認(rèn)證及發(fā)布狀態(tài)，成員上限分別為30人、60人或90人，滿足不同規(guī)模團隊的需求。成員變更靈活性：管理員可隨時調(diào)整項目成員及管理員角色，以適應(yīng)項目需求變化。同時，單個微信號可參與多達50個小程序的開發(fā)或管理，促進資源有效利用與人才共享。1.2項目實施任務(wù)1微信小程序開發(fā)前準(zhǔn)備微信公眾號主要用來管理和區(qū)分每個開發(fā)者并進行小程序的發(fā)布、審核以及上線管理。開發(fā)者在開發(fā)前首先需要在微信公眾平臺上注冊程序賬號，這樣才能進行后續(xù)的代碼開發(fā)工作。1）訪問微信公眾平臺官網(wǎng)（），單擊右上角“立即注冊”進入賬號選擇頁面。在當(dāng)前頁面中選擇注冊類型為“小程序”，即可進入到小程序的正式注冊頁面。任務(wù)1微信小程序開發(fā)前準(zhǔn)備2）小程序注冊頁面包括包含3個填寫內(nèi)容，包括賬號信息、郵箱激活以及信息登記，根據(jù)信息提示完成賬號注冊后就可以進入圖1-4所示頁面中。該頁面為小程序管理后臺，提供了針對小程序的開發(fā)、發(fā)布、管理以及統(tǒng)計等一系列的功能。

任務(wù)1微信小程序開發(fā)前準(zhǔn)備3）小程序的發(fā)布流程總共分為兩個步驟。第1步需要填寫小程序基本信息，包括小程序名稱、簡介以及小程序頭像等內(nèi)容；第2步，填寫完小程序信息后就可以下載配置開發(fā)環(huán)境、添加開發(fā)者、配置服務(wù)器進行小程序的開發(fā)工作，在開發(fā)完成后，提交代碼，等待審核，待審核通過即可將小程序進行發(fā)布。通過“開發(fā)”-“開發(fā)管理”-“開發(fā)設(shè)置”查看AppID。

任務(wù)1微信小程序開發(fā)前準(zhǔn)備任務(wù)2人員組織結(jié)構(gòu)分配1.人員組織結(jié)構(gòu)小程序開發(fā)團隊一般由1-20人構(gòu)成,項目管理人員統(tǒng)籌整個項目的進展和風(fēng)險，把控小程序?qū)ν獍l(fā)布的節(jié)奏，同時，小程序項目通過產(chǎn)品組、設(shè)計組、開發(fā)組、測試組之間的相互協(xié)調(diào)完成

任務(wù)2人員組織結(jié)構(gòu)分配開發(fā)小程序的一般工作流程中，產(chǎn)品組提出需求，設(shè)計人員根據(jù)產(chǎn)品需求做出設(shè)計方案供開發(fā)人員使用，開發(fā)組依據(jù)設(shè)計方案進行程序的編寫。代碼編譯完成后，測試組對項目進行測試用例編寫并對小程序進行辯解測試。

任務(wù)2人員組織結(jié)構(gòu)分配2.權(quán)限管理通過“微信公眾平臺”——“管理”——“成員管理”設(shè)置，管理員可以便捷的分配權(quán)限給不同的項目成員，小程序的管理比傳統(tǒng)網(wǎng)頁開發(fā)和App應(yīng)用開發(fā)更加簡單便捷。3.小程序版本管理在小程序開發(fā)流程中，開發(fā)者先編寫代碼并進行α測試，穩(wěn)定后交產(chǎn)品經(jīng)理和測試人員β測試并修復(fù)Bug。小程序后臺分開發(fā)、審核中、線上等版本，支持協(xié)同開發(fā)，每個開發(fā)者有獨立的開發(fā)版本，方便真機體驗。4.提交審核并發(fā)布為確保小程序質(zhì)量與合規(guī)性，發(fā)布前需經(jīng)審核。開發(fā)者可上傳代碼至微信公眾平臺提交審核。審核通過后，管理員會收到通知，可在“版本管理”中查看并發(fā)布。拓展訓(xùn)練搭建環(huán)境創(chuàng)建項目【訓(xùn)練需求】使用微信開發(fā)者工具創(chuàng)建首個微信小程序demo1，并通過模擬器以及真機進行試運行。【訓(xùn)練步驟】按照本項目任務(wù)1所介紹方法與步驟，搭建微信小程序開發(fā)環(huán)境。參考本項目任務(wù)2所介紹方法與步驟在微信開發(fā)者工具中創(chuàng)建首個微信小程序demo1，使用模擬器以及真機進行調(diào)試測試，最終提交小程序項目到小程序管理后臺。項目小結(jié)本項目概述了微信開發(fā)者工具的安裝步驟與微信小程序開發(fā)環(huán)境的快速搭建方法。通過實踐官方提供的簡單模板案例，學(xué)員能熟悉微信開發(fā)工具的各項界面模塊、功能及其使用技巧。項目強調(diào)，微信小程序開發(fā)環(huán)境設(shè)置極為簡便，僅需安裝微信官方提供的開發(fā)者工具，凸顯了其高效與便捷性。項目2開發(fā)環(huán)境搭建及開發(fā)工具介紹知識目標(biāo)：

?學(xué)習(xí)合理使用微信小程序官方文檔。 ?掌握微信小程序開發(fā)工具的下載及安裝。?掌握小程序開發(fā)工具的布局模塊及其作用。?掌握使用小程序開發(fā)工具創(chuàng)建項目并提交審核發(fā)布的步驟。技能目標(biāo)：

?掌握小程序的開發(fā)環(huán)境的安裝和搭建。?熟練運用開發(fā)者工具創(chuàng)建簡單官方模板項目。?掌握開發(fā)者工具的相關(guān)界面、功能以及使用技巧。?掌握微信小程序的基本功能及目錄結(jié)構(gòu)。項目2開發(fā)環(huán)境搭建及開發(fā)工具介紹素質(zhì)目標(biāo)：

?科技創(chuàng)新:其開發(fā)環(huán)境及工具是科技前沿的產(chǎn)物,助力高效便捷地研發(fā),體驗技術(shù)之新。

?智能制造:小程序平臺彰顯智能制造思維,自動化與智能調(diào)試提升開發(fā)效率與跨平臺適應(yīng)性。

?服務(wù)人民:小程序作為服務(wù)新途徑,致力于優(yōu)化用戶體驗,持續(xù)滿足人民需求,堅守服務(wù)初心。2.1知識準(zhǔn)備2.2項目實施拓展訓(xùn)練2.1知識準(zhǔn)備2.1.1開發(fā)環(huán)境搭建

讀者登錄微信小程序官方文檔首頁，選擇菜單欄的“開發(fā)”選項，選擇“工具”欄目即可切換到小程序開發(fā)工具的下載頁面，也可以通過URL地址訪問下載頁面，URL下載地址為：/miniprogram/dev/devtools/download.html。2.1.2創(chuàng)建首歌微信小程序

首次打開微信開發(fā)者工具時，會出現(xiàn)登錄頁，在微信公眾平臺注冊好賬號后，使用微信掃碼登錄。登錄成功后會看到啟動頁，單擊啟動頁的“小程序”并點擊“+”，就可以創(chuàng)建一個新的小程序項目

AppID為微信管理平臺中注冊的微信小程序賬號，也可使用測試號，“項目名稱”可以隨意填寫

2.2項目實施任務(wù)1軟件安裝1.安裝任務(wù)1軟件安裝2.開發(fā)者工具的登錄首次打開微信開發(fā)者工具時，會出現(xiàn)登錄頁的二維碼掃描頁面，需使用微信掃碼登錄，或使用游客模式。登錄成功后，提示選擇開發(fā)模式以及項目信息。任務(wù)1軟件安裝

單擊“小程序項目”中的“小程序”，或點擊導(dǎo)航頁面中的“+”號后，根據(jù)頁面提示填入項目名稱、設(shè)置小程序存放的位置、填寫AppID、并選擇開發(fā)模式為“小程序”任務(wù)2微信開發(fā)者工具功能使用1.

IDE布局模塊介紹任務(wù)2微信開發(fā)者工具功能使用2.真機預(yù)覽和調(diào)試（1）真機預(yù)覽任務(wù)2微信開發(fā)者工具功能使用2.真機預(yù)覽和調(diào)試（2）真機調(diào)試任務(wù)2微信開發(fā)者工具功能使用3.提交審核與發(fā)布為了保證小程序的質(zhì)量并且符合相關(guān)政策法規(guī)，所有小程序的發(fā)布需要經(jīng)過審核。通過開發(fā)者工具上傳小程序代碼后，可以通過網(wǎng)頁登錄“小程序管理后臺”，在“版本管理”選項的開發(fā)版本欄找到提交上傳的版本。拓展訓(xùn)練搭建環(huán)境創(chuàng)建項目【訓(xùn)練需求】使用微信開發(fā)者工具創(chuàng)建首個微信小程序demo1，并通過模擬器以及真機進行試運行。【訓(xùn)練步驟】1. 按照本項目任務(wù)1所介紹方法與步驟，搭建微信小程序開發(fā)環(huán)境。2. 參考本項目任務(wù)2所介紹方法與步驟在微信開發(fā)者工具中創(chuàng)建首個微信小程序demo1，使用模擬器以及真機進行調(diào)試測試，最終提交小程序項目到小程序管理后臺項目小結(jié)本項目主要介紹了微信開發(fā)者工具的安裝以及微信小程序開發(fā)環(huán)境的搭建，通過創(chuàng)建官方提供的簡單模版案例學(xué)習(xí)微信開發(fā)工具的的界面模塊、功能以及相關(guān)的使用技巧。通過本項目的學(xué)習(xí)可以了解到，微信小程序開發(fā)幾乎不需要配置開發(fā)環(huán)境，僅需要安裝微信提供的微信開發(fā)者工具即可，十分便捷項目3從“HelloWechat”開啟微信小程序之旅知識目標(biāo)：

?掌握微信小程序項目結(jié)構(gòu)中各個部分的功能。 ?掌握頁面結(jié)構(gòu)Wxml中常用標(biāo)簽組件的使用。 ?了解微信小程序中的Flex布局。 ?掌握使用常用標(biāo)簽組件創(chuàng)建簡單的頁面樣式。 ?掌握微信小程序的全局樣式設(shè)計及屬性配置方式。技能目標(biāo)：

?掌握并認(rèn)識微信小程序的基本文件結(jié)構(gòu)。 ?掌握手動編寫一個微信小程序頁面。?掌握小程序頁面的元素以及樣式。?掌握小程序所支持的WXSS選擇器。項目3從“HelloWechat”開啟微信小程序之旅 ?掌握微信小程序頁面的Flex布局以及自適應(yīng)單位rpx。素質(zhì)目標(biāo)：

?創(chuàng)新引領(lǐng):以其輕量、快速特性為用戶帶來新體驗,彰顯創(chuàng)新發(fā)展的核心思想。 ?服務(wù)人民:設(shè)計追求用戶“無感知”體驗,具體踐行服務(wù)人民的宗旨。 ?實踐真知:通過實操掌握開發(fā)技能,貫徹“知行合一”的實踐精神。 ?技術(shù)與道德:在創(chuàng)新中注重用戶隱私保護,遵守法律,為用戶提供便捷、安全、高效服務(wù)。3.1知識準(zhǔn)備3.2項目實施拓展訓(xùn)練3.1知識準(zhǔn)備3.1.1小程序目錄結(jié)構(gòu)

在項目2中，我們使用了官方模版創(chuàng)建了官方示例項目MiniProgram-1，可以看出小程序的目錄結(jié)構(gòu)主要包括項目配置文件、主體文件、頁面文件和其他文件。項目配置文件project.config.json項目主體文件：app.jsonapp.jsapp.wxss頁面文件：小程序根目錄下的pages文件夾中內(nèi)容其他文件3.1.2頁面元素和樣式

1.頁面組件小程序中使用wxml（WeixinMarkupLanguage）來實現(xiàn)頁面結(jié)構(gòu)。常見頁面組件

組件功能組件功能view視圖容器checkbox復(fù)選框text文本域radio單選框input輸入框button按鈕image圖片icon圖標(biāo)文件form表單progress進度條3.1.2頁面元素和樣式

2.頁面樣式WXSS

wxss文件全稱為WeixinStyleSheets（微信樣式表），是一種樣式語言，用于描述wxml中組件的樣式，例如尺寸、顏色、邊框效果等。為了適應(yīng)廣大的前端開發(fā)者，wxss具有css大部分特性，并且為了更適應(yīng)微信小程序，wxss在css的基礎(chǔ)上做了擴充及修改。

wxss支持使用選擇器來為某個元素設(shè)置樣式，常見選擇器如下：選擇器示例說明.class.container選擇所有class=”containner”的組件#id#id選擇id=”#id”的組件elementview選擇所有view組件element,elementview,input選擇所有view組件和所有input組件::afterview::after在view組件內(nèi)的后面插入內(nèi)容“”beforeview::before在view組件內(nèi)的前面插入內(nèi)容3.1.3Flex布局

為頁面設(shè)置樣式的時候經(jīng)常會為wxss文件中的.container選擇器使用display:flex的樣式。flex布局是W3C組織在2009年提出的一個新的布局方案，目的是使頁面樣式更加簡單更好的支持響應(yīng)式布局，本身是CSS語法的一部分。小程序能夠很好的支持flex布局，且作為官方推薦的布局方式flex布局提高頁面布局效率，是一種靈活的布局模型。3.1.3Flex布局

1.容器和項目flex也稱為“彈性布局”，主要作用在容器上。當(dāng)在wxss文件中為組件設(shè)置樣式的時候，我們使用display:flex將view組件變成彈性盒子。用flex-direction屬性來指定view組件中元素的排列方向。常見的屬性值有4個：rowcolumnrow-reversecolumn-reverse3.1.3Flex布局

2.坐標(biāo)軸 flex布局坐標(biāo)以容器左上角的點為原點，自原點向右、向下延伸兩條坐標(biāo)軸。在一個平面直角坐標(biāo)系里，根據(jù)軸的方向，分為水平方向和垂直方向。

一個彈性盒子，需要確定一個主軸，而主軸的方向是水平還是垂直則由flex-direction屬性的值來確定。

item1item2item3row（默認(rèn)）flex容器

item1item2item3row（默認(rèn)）flex容器3.1.3Flex布局

根據(jù)不同flex-direction的取值，主軸方向及子元素排列方向都不相同。

flex-dirction:row時，主軸水平，子元素排列方向為自左向右

flex-direction:row-reverse時，主軸水平，子元素排列方向為自右向左

flex-direction:column時，主軸垂直，子元素排列方向為自上而下

felx-direction:column-reverse時，主軸垂直，子元素排列方向自下而上item1item2item3column圖3-5flex-direction:column時主軸方向與子元素排列

item1item2item3column-reverse圖3-6flex-direction:column-reverse時主軸方向與子元素排列

felx-direction:column-reverse時，主軸垂直，子元素排列方向自下而上

item1item2item3columnflex容器flex-direction:column時主軸方向與子元素排列

item1item2item3column-reverseflex容器flex-direction:column-reverse時主軸方向與子元素排列

3.1.4自適應(yīng)尺寸單位

為了便于開發(fā)人員適配各種移動設(shè)備屏幕，微信小程序在wxss中加入了新的尺寸單位rpx（responsivepixel，響應(yīng)式像素），小程序開發(fā)中，長度單位及可以使用rpx，也可以使用px。區(qū)別是，使用rpx可以使組件自適應(yīng)屏幕的高度和寬度，使用px時不會。

為了便于換算，rpx單位規(guī)定了任何手機屏幕的寬度為750rpx（邏輯像素），微信小程序內(nèi)部處理流程負(fù)責(zé)將邏輯像素轉(zhuǎn)換為當(dāng)前手機的物理像素。不同設(shè)備的rpx和px換算item1item2item3column圖3-5flex-direction:column時主軸方向與子元素排列

item1item2item3column-reverse圖3-6flex-direction:column-reverse時主軸方向與子元素排列

felx-direction:column-reverse時，主軸垂直，子元素排列方向自下而上

設(shè)備屏幕寬度（px）rpx換算px（寬度750）px換算rpx（寬度750）iPhone53201rpx≈0.42px1px≈2.34rpxiPhone63751rpx=0.5px1px=2rpxiPhone6Plus4141rpx=0.552px1px≈1.81rpx3.2項目實施任務(wù)1手動編寫第一個小程序頁面-創(chuàng)建的小程序的方式創(chuàng)建小程序，命名為HelloWechat任務(wù)1手動編寫第一個小程序頁面-參考教材中步驟添加圖片資源以及頁面組件，效果如圖：任務(wù)2設(shè)計小程序頁面樣式微信小程使用wxss樣式語言對wxml頁面中的組件進行樣式設(shè)計，接下來我們?yōu)閕ndex.wxml頁面中的組件設(shè)置樣式。(1)打開pages/index/index.wxml輸入下列代碼：(2)接著打開pages/index/index.wxss文件編寫樣式:<viewclass="container"><imageclass="pic"src="../../images/pic_1.png"></image><textclass="txt">HelloWorld!</text><viewclass="journey-container"><textclass="journey">從HelloWorld開啟我們的小程序之旅吧！</text></view></view>任務(wù)2設(shè)計小程序頁面樣式.container{display:flex;flex-direction:column;align-items:center;}.pic{

width:200rpx;

height:200rpx;margin-top:150rpx;}.txt{margin-top:100rpx;font-size:30rpx;font-weight:bold;color:red;}.journey-container{margin-top:200rpx;

border:1pxsolidred;

width:300rpx;

height:100rpx;border-radius:6px;text-align:center;}.journey{font-size:20rpx;font-weight:bold;line-height:50rpx;color:brown;}任務(wù)2設(shè)計小程序頁面樣式編譯后，選擇模擬器機型為iPhone6，運行效果如圖:其中，wxss中代碼的作用：.container是所有組件的容器樣式。這里使用flex布局方式來控制子元素排列規(guī)則。使用flex-direction:column;屬性設(shè)置子元素按照垂直軸，子元素自上而下進行排列。.pic用來設(shè)置頭像圖片大小和位置。.txt用來設(shè)置“HelloWorld！”文本的樣式。.journey-container用來設(shè)置“從HelloWorld開啟我們的小程序之旅吧！”文本的外邊框，使用border-radius屬性設(shè)置外邊框為圓角矩形。.journey用來設(shè)置圓角矩形內(nèi)部的文本樣式。任務(wù)3全局樣式設(shè)計及項目配置1.

全局樣式中修改頁面text組件字體打開pages/index/index.wxss文件加入下列代碼：text{font-family:MicrosoftYaHei;}2.頁面根元素page首先我們嘗試在當(dāng)前頁面的最外層view中添加一個背景色，打開pages/index/index.wxss文件，找到該文件中的.container樣式，為這個樣式中新增屬性background-color:#eeeeee;/**index.wxss**/.container{display:flex;flex-direction:column;align-items:center;background-color:#eeeeee;}任務(wù)3全局樣式設(shè)計及項目配置打開pages/index/index.wxss文件，并在其尾部追加以下樣式代碼：page{background-color:#eeeeee;}page代表整個頁面的容器，設(shè)計小程序頁面時如果想要對當(dāng)前頁面整體做樣式或?qū)傩栽O(shè)置，可以考慮page這個頁面根元素。

任務(wù)3全局樣式設(shè)計及項目配置3.app.json中window配置項

window配置項中，通過設(shè)置屬性：navigationBarBackgroundColor可以更改導(dǎo)航欄顏色屬性，具體代碼如下所示，打開項目的app.json文件，找到window配置項，更改如下代碼：{"pages":["pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#eeeeee","navigationBarTextStyle":"black"},"style":"v2","sitemapLocation":"sitemap.json"}拓展訓(xùn)練首個微信小程序的HelloWorld【訓(xùn)練需求】使用微信開發(fā)者工具創(chuàng)建首個微信小程序HelloWorld，并通過模擬器以及真機進行試運行。【訓(xùn)練步驟】按照本項目所介紹方法與步驟，搭建微信小程序開發(fā)環(huán)境。參考本項目任務(wù)1～3所介紹方法與步驟在微信開發(fā)者工具中創(chuàng)建首個微信小程序HelloWorld，將導(dǎo)航欄標(biāo)題改為“HelloWorld”并用白色顯示，并設(shè)置背景色為灰色，字體樣式為黑體。添加圖片作為頭像，設(shè)置圖片大小為200rpx200rpx最后使用模擬器以及真機進行調(diào)試測試，最終提交小程序項目到小程序管理后臺。項目小結(jié)本項目從編寫一個簡單的HelloWechat的索引界面開始，逐步介紹了微信小程序的基本文件目錄結(jié)構(gòu)、wxml頁面文件設(shè)計、wxss頁面樣式使用及限制、自適應(yīng)單位rpx、全局樣式、全局配置、flex布局等小程序開發(fā)必備知識。通過本項目任務(wù)的學(xué)習(xí)，讀者對微信小程序開發(fā)的全貌有一個整體認(rèn)知，最后通過拓展訓(xùn)練使讀者獨立完成小程序的開發(fā)環(huán)境搭建以及首個小程序的創(chuàng)建。項目4新聞列表頁面設(shè)計知識目標(biāo)：

?掌握swiper組件的基本屬性及使用方法。 ?掌握并熟練使用image組件的屬性及使用方法。 ?掌握頁面結(jié)構(gòu)中數(shù)據(jù)綁定及列表渲染的使用方法。 ?掌握組件中事件綁定的應(yīng)用。 ?掌握模塊化的使用。技能目標(biāo)：

?綜合運用基礎(chǔ)容器組件<view>。 ?掌握swiper組件構(gòu)建banner輪播圖的方式。 ?掌握swiper組件屬性。 ?掌握image組件的縮放模式及裁剪模式。 ?掌握小程序中的事件。素質(zhì)目標(biāo)：

?技術(shù)創(chuàng)新支撐國家發(fā)展,推動社會進步。微信小程序帶來便利與優(yōu)化,促進社會發(fā)展。 ?服務(wù)人民是科技初心,微信小程序以用戶需求為導(dǎo)向,提供智能化、個性化服務(wù),實現(xiàn)優(yōu)質(zhì)體驗。 ?科技創(chuàng)新與文化創(chuàng)新相輔相成,微信小程序新聞頁面注重文化內(nèi)涵,提供豐富閱讀體驗,激發(fā)文化自信。 ?良好信用與道德是科技保障,微信小程序新聞頁面設(shè)計需保護用戶隱私,遵守法律,培養(yǎng)網(wǎng)絡(luò)公民意識。項目4新聞列表頁面設(shè)計4.1知識準(zhǔn)備4.2項目實施拓展訓(xùn)練4.1知識準(zhǔn)備4.1.1swiper組件swiper組件的基本屬性swiper組件是滑塊視圖容器，經(jīng)常用于實現(xiàn)輪播圖。主要由多個swiper-item組成，可以定義多個swiper-item，同時需要注意，swiper組件的直接子元素只可以是swiper-item，如果放置其他組件，則會被自動刪除。但swiper-item下可以放置其他組件或元素。swiper-item元素僅僅是一個容器，需要內(nèi)容因此需要在swiper-item容器下添加元素。微信小程序沒有嚴(yán)格規(guī)定swiper-item中可以嵌套哪些組件，如果放入image組件，就實現(xiàn)輪播圖效果；如果放入一塊頁面內(nèi)容，就實現(xiàn)標(biāo)簽頁切換。

常見swiper組件屬性：4.1.1swiper組件屬性類型說明indicator-dotsBoolean是否顯示面板指示點，默認(rèn)值為falseindicator-colorColor指示點顏色，默認(rèn)值rgba(0,0,0,.3)indicator-active-colorColor當(dāng)前選中的指示點顏色，默認(rèn)值#000000autoplayBoolean是否自動切換，默認(rèn)值falsecurrentNumber當(dāng)前所在滑塊的索引，默認(rèn)值為0intervalNumber自動切換時間間隔（ms），默認(rèn)值5000durationNumber滑動動畫時常（ms），默認(rèn)值500circularBoolean是否采用銜接滑動，默認(rèn)值falseverticalBoolean滑動方向是否為縱向，默認(rèn)值falsebindchangeEventHandlecurrent改變時會觸發(fā)change事件，event.detail={current,source}4.1.1swiper組件2.

Boolean值陷阱vertical屬性在微信小程序中的swiper組件用于控制swiper-item的排布方向。當(dāng)vertical設(shè)置為任何非空字符串時，swiper-item會垂直排布，因為非空字符串在微信小程序中被視為真值。要使swiper-item水平排布，可將vertical設(shè)為空字符串、使用數(shù)據(jù)綁定設(shè)置為false，或不設(shè)置該屬性。注意避免“布爾陷阱”，即字符串"false"仍被視為真值。4.1.2image組件的縮放模式及裁剪模式微信小程序中提供了image組件來定義圖片，類似于HTML中的<img>標(biāo)簽。image組件除了用來顯示圖片，還支持對圖片進行裁剪或縮放，提供了4種縮放模式和9種裁剪模式。

常見image屬性如下所示：屬性類型說明srcString圖片資源地址modeString圖片裁剪、縮放模式，默認(rèn)值scaleToFilllazy-loadBoolean圖片是否懶加載，默認(rèn)flase，僅對page或scroll-view下image有效binderrorHandleEvent圖片發(fā)生錯誤時的事件bindloadHandleEvent圖片載入完成時的事件4.1.2image組件的縮放模式及裁剪模式想要更改圖片的默認(rèn)尺寸需要使用image組件提供的mode屬性進行圖片縮放設(shè)置或進行裁剪處理，image組件支持的4種縮放模式如下所示：縮放模式說明scaleToFill不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿image元素。適用于容器與圖片寬高比相同的情況，如果不同，圖片會變形。aspectFit保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來?？梢詫D片完整顯示出來。aspectFill保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來，長邊發(fā)生截取。適用于容器固定，圖片自動縮放的情況，例如縮略圖。widthFix寬度不變，高度自動變化，保持原圖寬高比不變。4.1.2image組件的縮放模式及裁剪模式image組件支持的9種裁剪模式如下所示：裁剪模式說明top不縮放圖片，只顯示圖片頂部區(qū)域bottom不縮放圖片，只顯示圖片底部區(qū)域center不縮放圖片，只顯示圖片中間區(qū)域left不縮放圖片，只顯示圖片左邊區(qū)域right不縮放圖片，只顯示圖片右邊區(qū)域topleft不縮放圖片，只顯示圖片左上邊區(qū)域topright不縮放圖片，只顯示圖片右上邊區(qū)域bottomleft不縮放圖片，只顯示圖片左下邊區(qū)域bottomright不縮放圖片，只顯示圖片右下邊區(qū)域4.1.3Page頁面的生命周期

頁面js文件中默認(rèn)包含了我們可能使用到的代碼結(jié)構(gòu)，整個頁面執(zhí)行Page({…..})方法，參數(shù)為Object對象，其中包含了指定頁面初始數(shù)據(jù)的data、事件處理函數(shù)以及MINA框架提供的5個生命周期函數(shù)。

什么是頁面的生命周期呢？如同人的成長需要經(jīng)歷出生到老年一樣，微信小程序頁面從創(chuàng)建到卸載同樣需要經(jīng)歷生命周期的不同狀態(tài)。為此，MINA框架分別提供了5個生命周期函數(shù)用來監(jiān)聽小程序頁面5個特定的生命周期，以便開發(fā)者在特定時刻執(zhí)行自己的代碼邏輯。通過代碼可以了解到這5個生命周期的函數(shù)分別為：onLoad 監(jiān)聽頁面加載，一個頁面僅調(diào)用一次；onShow 監(jiān)聽頁面顯示，每次頁面被打開時都會被調(diào)用；onReady 監(jiān)聽頁面初次渲染完成，一個頁面只會調(diào)用一次，表示該頁面準(zhǔn)備完畢渲染完成，可以進行與視圖層的交互工作；onHide 監(jiān)聽頁面隱藏；onUnload 監(jiān)聽頁面卸載。onLoad、onShow和onReady確實按照前面講的執(zhí)行順序運行；onLoad和onReady在頁面運行生命周期中僅執(zhí)行一次，除非頁面運行的onUnload進行了卸載；onHide與OnShow在頁面生命周期內(nèi)可以多次執(zhí)行；除了FirstRender首次渲染完畢調(diào)用onReady函數(shù)監(jiān)聽外，后續(xù)頁面多次執(zhí)行Rerender再次渲染，此時并沒有提供相應(yīng)監(jiān)聽函數(shù)。因此，在頁面生命周期函數(shù)中onReady只進行“第一次渲染”完成的監(jiān)聽工作。4.1.3Page頁面的生命周期小程序中實現(xiàn)頁面結(jié)構(gòu)的wxml具有數(shù)據(jù)綁定的功能。1.簡單綁定可以在wxml頁面中使用{{變量名}}的形式表示動態(tài)數(shù)據(jù)。例如我們在pages/test2/test2.wxml頁面中原有代碼下方編寫如下代碼：<view>{{msg}}</view>此時，msg這個詞不會直接顯示在wxml頁面中，而是會顯示msg這個變量所對應(yīng)的值，通過在頁面js文件中的data屬性中創(chuàng)建同名變量來添加動態(tài)數(shù)據(jù)值。打開該項目對應(yīng)的test2.js文件，編寫代碼如下所示：Page({data:{msg:'Hellowelecome！'

}})保存編譯以后，可以觀察到上述代碼將“Hellowelecome！”渲染到index.wxml頁面中{{msg}}的位置。4.1.4數(shù)據(jù)綁定2.組件屬性綁定組件中諸如id、class等也可以使用動態(tài)數(shù)據(jù)進行展示。在項目3的pages/chapter4/test4.wxml頁面中繼續(xù)進行舉例，代碼如下：<viewid="{{id}}">測試1</view>在對應(yīng)的test2.js文件原有代碼中添加一行內(nèi)容，如下所示：Page({data:{msg:'Hellowelecome',id:'myView'}})4.1.4數(shù)據(jù)綁定3.控件屬性綁定控件屬性也可以在引號內(nèi)使用動態(tài)數(shù)據(jù)，test2.wxml中使用方法如下：<viewwx:if="{{condition}}">測試2</view>test2.js文件中相關(guān)代碼如下：Page({data:{condition:false

}})上述代碼中，變量值condition取值為false時，測試組件不被顯示。4.1.4數(shù)據(jù)綁定4.關(guān)鍵字綁定也可以直接在test2.wxml頁面文件的組件中直接在引號內(nèi)寫布爾值。布爾值必須使用雙花括號括起來，例如：<viewwx:if="{{false}}">測試3</view><viewwx:if="{{true}}">測試4</view>編譯后可以看到測試4組件可以展示在頁面上。需要注意的是，控件屬性不可以去掉雙花括號直接寫成wx:if="false"，否則false會被認(rèn)為是字符串從而使得該等式值為true。

4.1.4數(shù)據(jù)綁定5.運算綁定雙花括號中還以進行簡單的運算，所支持的運算包括算術(shù)運算、邏輯判斷運算、字符串運算、三元運算以及數(shù)據(jù)路徑運算。算術(shù)運算示例代碼如下：<!--wxml頁面--><view>{{a+b}}+{{c+d}}+test</view>

//js頁面代碼Page({data:{a:1,b:2,c:3,d:4

}})保存編譯后可以看到顯示結(jié)果為：3+7+test。也就是說雙花括號中會進行算術(shù)運算，括號外的符號以及字符會直接顯示在頁面中。其余運算可以參考教材具體內(nèi)容。4.1.4數(shù)據(jù)綁定6.組合綁定除了上述數(shù)據(jù)綁定方式之外，雙花括號中還可以進行復(fù)雜數(shù)據(jù)的綁定。在雙花括號內(nèi)直接進行變量和值的組合，構(gòu)成新的對象或數(shù)組的形式進行綁定。數(shù)組組合的示例代碼如下所示：<!--wxml頁面--><viewwx:for="{{[x,1,2,3]}}">{{item}}</view>

//js頁面代碼Page({data:{x:0}})保存編譯后，test2.wxml頁面中view組件中的x會被替換成數(shù)字0，從而形成新的數(shù)組并通過for循環(huán)將數(shù)組中的數(shù)字展示在頁面中。對象組合具體參考教材內(nèi)容。4.1.4數(shù)據(jù)綁定小程序組件中可以通過使用wx:for屬性實現(xiàn)列表渲染，也就是同一個組件批量出現(xiàn)多次而展示內(nèi)容不同。使用wx:for綁定一個數(shù)組，讓其自動使用數(shù)組中的每一個元素依次渲染該組件，形成批量展示的效果。

如果想要避免列表亂序或減少提示信息，可以使用wx:key屬性來指定列表中項目的唯一標(biāo)識符。提供形式有以下兩種：字符串：表示wx:for循環(huán)數(shù)組中的一個項目屬性，該屬性值為列表中唯一的字符串或數(shù)字，且不能動態(tài)改變。保留關(guān)鍵字this：表示wx:for循環(huán)本身，需要項目本身是唯一字符串或數(shù)字。4.1.5列表渲染組件等事件處理函數(shù)用于為組件綁定事件，是視圖層與邏輯層的通信方式，具有以下幾個特點：反饋用戶行為，并在邏輯層進行處理；綁定組件，在觸發(fā)組件事件時執(zhí)行對應(yīng)邏輯層中的事件處理函數(shù)；為對象攜帶額外信息。例如id、dataset等。

1.使用方式首先在視圖層的pages/test3/test3.wxml頁面為指定組件綁定一個事件處理函數(shù)，示例代碼如下：<!--wxml頁面--><buttonid="btn1"bindtap="tap1">按鈕組件1</button>觸屏手機中，tap事件在用戶手指觸摸組件時出發(fā)，在微信開發(fā)者工具的模擬器中，tap事件在鼠標(biāo)單擊時觸發(fā)。

4.1.6事件2.常用事件微信小程序的官方文檔中提供了視圖層中組件可以綁定的多種事件，常用冒泡事件如下所示。4.1.6事件事件類型觸發(fā)條件ouchstart手指觸摸動作開始touchmove手指觸摸后移動touchcancel手指觸摸動作被打斷，如來電提醒，彈窗touchend手指觸摸動作結(jié)束tap手指觸摸后馬上離開longpress手指觸摸后，超過350ms再離開，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個事件，tap事件將不被觸發(fā)3.事件綁定和冒泡小程序中為組件綁定事件時，常用的兩種方式分別為：“bind事件類型”以及“catch事件類型”。

前面案例中的bindtap就是bind方式，它的特點是不會阻止冒泡事件向上冒泡也就是由子元素向父元素節(jié)點傳遞，而catch類型則可以阻止冒泡事件向上冒泡。4.1.6事件在代碼管理早期是通過文件拆分進行的，但是這種物理上的拆分沒有真正實現(xiàn)作用域的隔離，由于不知道其他文件內(nèi)已存在的變量名而造成全局沖突問題，這是我們需要一種新的組織方式，于是誕生了模塊化：模塊化其實是一段JavaScript代碼，具有統(tǒng)一的基本書寫格式；模塊之間通過基本交互規(guī)則，能彼此引用，協(xié)同工作。目前模塊化規(guī)范不統(tǒng)一，大致分為CommonJS和ES6兩種類型，而小程序模塊化機制比較接近CommonJS。4.1.7模塊化借助Method的思想，我們在編碼過程中會將公共的、常用的業(yè)務(wù)邏輯進行提取封裝成公共方法以便隨時調(diào)用。編程世界中的絕大多數(shù)問題可以通過封裝的思想來解決，基本上你能看到的代碼，就是封裝過的代碼。小程序中也提供了類似封裝的技術(shù)，這就是模板技術(shù)，用來支持wxml組件的封裝，但是這種封裝僅僅只是wxml的代碼片段而已，無法將業(yè)務(wù)邏輯也封裝起來，因此作用有限。小程序也提供了兩種引入模版的方法：include和import，使用上的區(qū)別如下：import需要先引入模板，然后再使用；但是include不需要與先引入，直接在需要的地方引入模版即可。include模式非常簡單，就是簡單的代碼替換，不存在作用域，也不能像import一樣使用data傳遞數(shù)據(jù)。

4.1.8模塊化應(yīng)用項目初始化1.1.1微信小程序概述領(lǐng)袖粉絲—關(guān)鍵意見領(lǐng)袖來源：公關(guān)資源需求：品牌認(rèn)可、有趣內(nèi)容作用：意見領(lǐng)袖，增加傳播穿透力對策：及時關(guān)懷、充分尊重、引導(dǎo)

分享品牌粉絲—粉絲兼用戶來源：會員積累需求：客戶服務(wù)、有趣內(nèi)容、優(yōu)惠作用：消費者樣本，品牌調(diào)研對象對策：及時客服、調(diào)查研究、熱情

互動圍觀粉絲—數(shù)量最多來源：微博活動

需求：禮品抽獎、有趣內(nèi)容作用：聚集人氣的作用，傳播的

基礎(chǔ)粉絲對策：創(chuàng)意活動、利益驅(qū)使賬號建立粉絲規(guī)劃管理內(nèi)容發(fā)布規(guī)劃微信互動微博微信聯(lián)動微信工具使用賬號推廣方法創(chuàng)意營銷4.2項目實施任務(wù)1新聞列表頁面元素分析及準(zhǔn)備工作參考手機應(yīng)用商店中各類新聞應(yīng)用界面的風(fēng)格，本項目新聞頁面主體部分由兩部分組成，上半部分為廣告輪播圖，下半部分為新聞列表。新聞頁面的下半部分為新聞列表展示，一篇新聞一般包括標(biāo)題、新聞配圖、新聞概要、評論、點贊以及閱讀數(shù)。在微信小程序中我們可以使用準(zhǔn)備知識中介紹的組件：view、image和text實現(xiàn)。在當(dāng)前小程序中創(chuàng)建images目錄并在內(nèi)部創(chuàng)建子目錄news，將新聞頁面中的圖片素材拷貝到該子目錄中。接下來我們先來創(chuàng)建小程序項目以及新聞頁面相關(guān)文件。

任務(wù)2實現(xiàn)新聞輪播展示效果

通過使用前面學(xué)習(xí)的微信小程序提供的滑動視圖容器swiper組件來實現(xiàn)新聞頁面上半部分的輪播圖且每隔5秒鐘自動更換下一張，展示效果如右圖。同時swiper組件下方出現(xiàn)3個小圓點用來指示當(dāng)前圖片。任務(wù)3新聞列表骨架及樣式構(gòu)建構(gòu)建新聞列表我們需要的組件有：view、text以及image。構(gòu)建完成后編輯添加頁面樣式

。項目編譯預(yù)覽時會發(fā)現(xiàn)，除了專門設(shè)置的新聞標(biāo)題和新聞內(nèi)容的字體樣式以外，日期、以及點贊評論等展示的數(shù)字大小統(tǒng)一，因此需要在樣式文件中為這類文本設(shè)置統(tǒng)一樣式。由于整個項目中有很多類似文本需要進行格式統(tǒng)一，因此需要在整個項目的app.wxss全局樣式文件中進行默認(rèn)字體樣式設(shè)置

。編輯后效果如右圖。任務(wù)4靜態(tài)展示新聞列表通過任務(wù)3，我們初步實現(xiàn)了新聞頁面的新聞?wù)故?，但是目前文章列表中僅僅展示了一篇新聞，還不能被稱之為列表。為了多展示一些新聞內(nèi)容，我們將pages/index/index.wxml文件中注釋為“新聞列表”部分的代碼復(fù)制多份，依次加入到當(dāng)前結(jié)構(gòu)界面中形成新聞列表形式。任務(wù)5新聞數(shù)據(jù)綁定在實際項目中，業(yè)務(wù)數(shù)據(jù)一般存放在自己的數(shù)據(jù)服務(wù)器中，項目通過HTTP請求來訪問服務(wù)器提供的RESTFULAPI接口獲取數(shù)據(jù)。在上一個任務(wù)中展現(xiàn)的新聞列表數(shù)據(jù)全部是直接編碼在index.wxml中的數(shù)據(jù)，屬于“硬編碼”，數(shù)據(jù)不能隨時更新，屬于靜態(tài)數(shù)據(jù)展示。1.簡單數(shù)據(jù)綁定在本任務(wù)中，我們將嘗試使用數(shù)據(jù)綁定的方式，將wxml中的靜態(tài)數(shù)據(jù)移植到index.js中，首先在pages/index/index.js頁面中添加臨時變量newsData用來模擬新聞數(shù)據(jù)

。2.綁定數(shù)據(jù)更改在index.js文件中除了上面講的通過為data對象定義屬性的形式以外，還可以通過setData函數(shù)進行數(shù)據(jù)綁定，可以理解為“設(shè)置數(shù)據(jù)”或“更改數(shù)據(jù)”

。

3.列表渲染任務(wù)6導(dǎo)航欄設(shè)置及頁面跳轉(zhuǎn)設(shè)置1.導(dǎo)航欄設(shè)置我們可以根據(jù)自己的喜好對我們的項目進行導(dǎo)航欄配色設(shè)置，而不是使用默認(rèn)的系統(tǒng)色。打開本項目的app.json文件進行全局導(dǎo)航欄顏色設(shè)置，打開文件后修改下列項目代碼："window":

{

"navigationBarBackgroundColor":

"#fffeed"}更改顏色值后可以看到導(dǎo)航欄顏色和背景色相同。2.引導(dǎo)頁自動跳轉(zhuǎn)到新聞頁面現(xiàn)在我們已經(jīng)完成最主要的新聞列表展示界面，但是真實項目中一般會有一個引導(dǎo)界面自動跳轉(zhuǎn)到新聞頁面，接下來我們首先在小程序中創(chuàng)建一個引導(dǎo)頁面

任務(wù)6導(dǎo)航欄設(shè)置及頁面跳轉(zhuǎn)設(shè)置任務(wù)7數(shù)據(jù)與業(yè)務(wù)分離并引用模塊1.分離數(shù)據(jù)現(xiàn)在，所有的新聞數(shù)據(jù)都寫在index.js中，沒有與我們的業(yè)務(wù)邏輯分開，我們嘗試將數(shù)據(jù)分割封裝到單獨的js文件中。在項目NewsDemo項目的根目錄中創(chuàng)建新文件夾命名為data，在data目錄下新建文件data.js。然后將項目中index.js中的數(shù)組數(shù)據(jù)newsList剪切到data.js中，并將原先數(shù)組中的date、viewNumber以及commentNumber數(shù)據(jù)項改為最簡單的字符串。

2.模塊運用當(dāng)前提取出來的新聞數(shù)據(jù)列表newsList可以被看成小程序的獨立模塊，但是現(xiàn)在我們還不能訪問。因此需要使用module.exports向外暴露一個接口。

任務(wù)8業(yè)務(wù)邏輯模塊化并引入樣式模塊我們將新聞列表樣式封裝成模板。首先在項目的pages/index目錄下新建目錄news-item作為模板文件目錄，接著在這個目錄下新建2個文件news-item-tpl.wxml以及news-item-tpl.wxss用來封裝wxml片段和公共樣式。需要在index.wxss中應(yīng)用模板樣式。在index.wxss開頭或結(jié)尾部分添加如下代碼：@import"news-item/news-item-tpl.wxss"引入wxss樣式模板后保存編譯，可以看到新聞列表頁面正常顯示。拓展訓(xùn)練仿微信“發(fā)現(xiàn)”頁小程序設(shè)計【訓(xùn)練需求】綜合運用所學(xué)習(xí)的組件、事件等知識內(nèi)容，仿照微信“發(fā)現(xiàn)”頁面創(chuàng)建列表布局小程序，熟練運用數(shù)據(jù)綁定、列表渲染以及數(shù)據(jù)模塊化的知識進行小程序項目的優(yōu)化。【訓(xùn)練步驟】1.創(chuàng)建項目，完成項目文件配置，包括創(chuàng)建素材文件夾、全局樣式設(shè)置等操作；2.導(dǎo)入素材文件，進行導(dǎo)航欄、頁面布局及樣式設(shè)計；3.邏輯設(shè)計并使用動態(tài)數(shù)據(jù)展示列表。項目小結(jié)本項目中我們通過新聞列表展示了banner輪播圖與一組新聞數(shù)據(jù)。本項目任務(wù)實施之前我們學(xué)習(xí)了swiper組件構(gòu)建banner輪播圖以及swiper組件的其他屬性，詳細(xì)介紹了image組件的4種縮放模式和9中建材模式，了解了小程序Page頁面的生命周期。除此之外還介紹了小程序中數(shù)據(jù)綁定的基本概念，也是區(qū)別于傳動web網(wǎng)頁編程的最大不同。最后講解并使用的小程序中的事件，并通過任務(wù)實施學(xué)會解決開發(fā)過程中的常見問題。項目5天氣預(yù)報查詢知識目標(biāo)：

?了解使用Node.js搭建本地服務(wù)器的方法。

?簡單了解使用js訪問Node.js服務(wù)器并實現(xiàn)數(shù)據(jù)交互的方式。

?掌握微信小程序提供的網(wǎng)絡(luò)訪問API的調(diào)用方法。

?掌握使用網(wǎng)絡(luò)服務(wù)API訪問第三方提供的服務(wù)器接口獲取數(shù)據(jù)的方法。 ?了解在微信公眾平臺的小程序開發(fā)管理中配置第三方服務(wù)器域名的方式。技能目標(biāo)：

?掌握服務(wù)器域名配置及本地服務(wù)器搭建。

?掌握小程序網(wǎng)絡(luò)API提供的wx.request接口用法。素質(zhì)目標(biāo)：

?緊扣網(wǎng)絡(luò)時代的發(fā)展需求,建設(shè)網(wǎng)絡(luò)強國。課程培養(yǎng)學(xué)生具備網(wǎng)絡(luò)時代所需能力,并應(yīng)用于實踐。 ?學(xué)生通過學(xué)習(xí)微信小程序開發(fā),掌握使用網(wǎng)絡(luò)技術(shù)提高工作效率的方法。

?學(xué)生學(xué)習(xí)微信小程序開發(fā),培養(yǎng)使用網(wǎng)絡(luò)技術(shù)提升創(chuàng)新能力,創(chuàng)新個人應(yīng)用。項目5天氣預(yù)報查詢5.1知識準(zhǔn)備5.2項目實施拓展訓(xùn)練5.1知識準(zhǔn)備5.1.1服務(wù)器數(shù)據(jù)交互

由于微信小程序項目體積大小限制的因素，項目中的圖片、圖標(biāo)、背景音樂等素材不可能全部打包在項目中，因此可以將體積較大的素材放在服務(wù)器上，通過使用微信小程序中的網(wǎng)絡(luò)APIwx.request()來實現(xiàn)與服務(wù)器數(shù)據(jù)交互。正式上線的項目，小程序要求服務(wù)器域名必須在小程序管理后臺中添加，且域名需要通過ICP備案，且只支持HTTP和WSS協(xié)議。

為了方便初學(xué)者學(xué)習(xí)，可以在微信開發(fā)者工具中關(guān)閉校驗和驗證域名功能，從而使用本地搭建的服務(wù)器測試網(wǎng)絡(luò)功能。5.1.1服務(wù)器數(shù)據(jù)交互搭建本地服務(wù)器

本書的本地HTTP服務(wù)器選用Node.js進行搭建。Node.js是一個開源和跨平臺的JavaScript運行時環(huán)境，簡單的說Node.js就是運行在服務(wù)端的JavaScript。Node的常用命令npm以其簡單的結(jié)構(gòu)幫助Node.js生態(tài)系統(tǒng)蓬勃發(fā)展，現(xiàn)在npm倉庫托管超過1000000個開源包，可供開發(fā)者使用。（開源包倉庫/）打開命令提示符切換到該目錄，執(zhí)行如下命令。（1）初始化項目，自動創(chuàng)建package.jsonnpminit-y運行結(jié)束后可以在data_server目錄看到自動生成了package.json文件。（2）安裝express框架用于快速搭建Http服務(wù)器npminstallexpress–save（3）安裝nodemon用于監(jiān)控文件代碼修改狀況npminstallnodemon-g5.1.1服務(wù)器數(shù)據(jù)交互運行data_server目錄的創(chuàng)建index.js文件接下來在命令提示符中繼續(xù)執(zhí)行下列指令，啟動服務(wù)器。nodemonindex.js啟動成功后可以在瀏覽器中輸入:3000進行訪問即可

5.1.1服務(wù)器數(shù)據(jù)交互2.訪問服務(wù)器上的數(shù)據(jù)

現(xiàn)在我們搭建了本地服務(wù)器，那么就可以通過在服務(wù)器端項目index.js文件的app.listen()前面增加代碼，將從小程序項目頁面js中初步分離出來放在data中的數(shù)據(jù)放入服務(wù)器端，通過使用wx.request請求將data中的數(shù)據(jù)返回給小程序。打開之前編輯的服務(wù)器端文件/data_server/index.js，在指定位置模擬一部分data中的數(shù)據(jù)

：……//將data中的數(shù)據(jù)放入服務(wù)端，再由服務(wù)端返回小程序var

data={

name:'張三',

gender:[{name:'男',value:'0',checked:true},{name:'女',value:'1',checked:false}],

skills:[{name:'HTML5',value:'html',checked:true},{name:'Java程序設(shè)計',value:'java',checked:true},{name:'JavaScript',value:'js',checked:false},{name:'C++程序設(shè)計',value:'c++',checked:false}],

opinion:'TEST'}//接上文，實現(xiàn)get請求，data數(shù)據(jù)以json格式返回

app.get('/',(req,res)=>{

res.json(data)})……上述代碼用于實現(xiàn)GET請求方式，并且數(shù)據(jù)以json形式返回。

5.1.1服務(wù)器數(shù)據(jù)交互

完成服務(wù)器端代碼后，參考教材中實例代碼，修改頁面展示代碼。修改結(jié)束后，頁面打開時自動向服務(wù)器發(fā)送請求獲取數(shù)據(jù)并填充到頁面綁定數(shù)據(jù)部分，運行結(jié)果如下圖所示。

5.1.2API密鑰申請本項目主要選擇了可以提供全球氣象數(shù)據(jù)服務(wù)接口的和風(fēng)天氣API，官方網(wǎng)址為：。用戶可以使用郵箱進行注冊并激活后可以獲取三天內(nèi)全球各地區(qū)的實時天氣，支持的免費接口調(diào)用流量基本上可以滿足我們這次學(xué)習(xí)開發(fā)的需求。

官網(wǎng)注冊完畢后，通過訪問/#/console來查看賬號信息，開發(fā)者登錄到控制臺后，在左側(cè)導(dǎo)航中，選擇項目管理并選擇“創(chuàng)建項目”。創(chuàng)建項目時，需要同時選擇訂閱模式。例如：免費訂閱、標(biāo)準(zhǔn)訂閱或高級訂閱。

5.1.2API密鑰申請

此時可以獲取本項目的認(rèn)證key，該信息在小程序發(fā)出網(wǎng)絡(luò)請求時會作為身份識別的唯一標(biāo)識發(fā)送給和風(fēng)天氣第三方服務(wù)器。

5.1.3API調(diào)用方法和風(fēng)天氣提供許多服務(wù)接口，本項目當(dāng)前創(chuàng)建項目為免費訂閱的用戶可以通過調(diào)用開發(fā)版API接口：/v7進行數(shù)據(jù)請求。通常來講，一個完整的API請求URL由scheme，host，port，path和queryparameters組成。scheme:httpshost:（付費訂閱）/port:443（在和風(fēng)天氣開發(fā)服務(wù)中，所有端口均為443）path:/v7/weather/7d?queryparameters:location=xxx&key=xxx（在和風(fēng)天氣開發(fā)服務(wù)中，多個參數(shù)使用&分割）本項目將選用城市天氣中的實時天氣數(shù)據(jù)API來獲取實時天氣狀況。獲取實時天氣的請求屬于GET請求其URL為：/v7/weather/now?[請求參數(shù)]5.1.3API調(diào)用方法請求參數(shù)包括了必選和可選參數(shù)，內(nèi)容如下表所示：

參數(shù)名稱參數(shù)類型說明key必選需要填入項目的認(rèn)證key字符串。接口通過本數(shù)據(jù)判斷是否為授權(quán)用戶或是否為付費用戶。例如：key=123456789ABClocation必選需要查詢地區(qū)的LocationID或以英文逗號分隔的經(jīng)度,緯度坐標(biāo)（十進制，最多支持小數(shù)點后兩位），LocationID可通過城市搜索服務(wù)獲取。例如：location=101010100或location=116.41,39.92lang可選指定數(shù)據(jù)的語言版本，不添加本參數(shù)默認(rèn)為中文unit可選單位，默認(rèn)為公制單位5.1.3API調(diào)用方法

實時天氣可以獲取當(dāng)前時間點指定地點的詳細(xì)天氣狀況，包括溫度、濕度、風(fēng)向、風(fēng)力、風(fēng)速等信息。根據(jù)上述內(nèi)容，添加對應(yīng)參數(shù)后，想要獲取西安市新城區(qū)的實時天氣狀況的請求URL為：/v7/weather/now?location=101110108&key=123456789aassdff注意，實際開發(fā)中地址中的key值需要替換成用戶個人項目認(rèn)證key，否則無法獲取數(shù)據(jù)。5.1.4服務(wù)器域名配置我們使用微信小程序讀取指定城市的實時天氣狀態(tài)信息時，需要訪問“和風(fēng)天氣”服務(wù)器，因此需要在小程序的管理員后臺進行服務(wù)器域名配置

。登錄微信公眾平臺后進入小程序開發(fā)管理，選擇左側(cè)開發(fā)——開發(fā)管理——開發(fā)設(shè)置，在“服務(wù)器域名”中添加或修改需要使用的網(wǎng)絡(luò)通信服務(wù)器域名地址即可

5.2項目實施任務(wù)1構(gòu)建項目首先，創(chuàng)建小程序WeatherToday，后端服務(wù)選擇“不使用云服務(wù)”模式，模版選擇部分選取“不使用模版”，選擇自己的AppID后，單擊“確定”創(chuàng)建空白項目。接下來在項目中導(dǎo)入本次需要使用的圖片資源。天氣圖片資源選用和風(fēng)天氣官方網(wǎng)站提供的圖標(biāo)素材QWeather-Icons-1.2.0版本，圖標(biāo)的名稱與圖標(biāo)所代表的天氣狀況代碼一致，方便用戶在獲取請求數(shù)據(jù)后快速對應(yīng)圖片數(shù)據(jù)。圖標(biāo)命名中有些帶了fill表示夜間模式。在項目根目錄中創(chuàng)建images文件夾，接著在這個文件夾中創(chuàng)建二級目錄weather_icon，并將下載的圖標(biāo)全部復(fù)制進去。

任務(wù)2頁面結(jié)構(gòu)及樣式設(shè)計1.導(dǎo)航欄設(shè)計新建項目的默認(rèn)導(dǎo)航欄為白底黑字，如果想要更改這個默認(rèn)設(shè)置需要在項目的app.json中進行自定義導(dǎo)航欄標(biāo)題以及背景顏色等內(nèi)容，但是導(dǎo)航欄的navigationBarBackgroundColor屬性只能設(shè)置純色，不能支持rgb或rgba色號，因此如果我們想要一個透明的導(dǎo)航欄時原有屬性不能滿足要求。2.頁面結(jié)構(gòu)wxml設(shè)計頁面結(jié)構(gòu)部分主要分為4個區(qū)域：xx省xx市xx區(qū)天氣圖標(biāo)

溫度濕度

氣壓

能見度

風(fēng)向

體感溫度

降水強度任務(wù)2頁面結(jié)構(gòu)及樣式設(shè)計3.頁面樣式wxss設(shè)計參考教材代碼，效果如右圖所示：任務(wù)2頁面結(jié)構(gòu)及樣式設(shè)計1.更新省市區(qū)信息修改<picker>組件中的“陜西省“為{{region}}并添加bindchange事件用于監(jiān)聽選項變化。在pages/index/index.wxml文件的區(qū)域1部分修改代碼如下所示：<view

class="container"><!--區(qū)域1地區(qū)選擇-->

<picker

mode="region"bindchange="reginChange"><view>{{region}}</view>

</picker>……微信小程序中提供的地區(qū)選擇返回結(jié)果是數(shù)組形式，因此在對應(yīng)的index.js文件中的初始數(shù)據(jù)data中定義的region為數(shù)組對象且包含3個初始數(shù)組元素

。任務(wù)3邏輯實現(xiàn)2.獲取實時天氣數(shù)據(jù)

省市區(qū)信息能夠選擇顯示后，我們需要完成實時天氣獲取的邏輯步驟。和風(fēng)天氣中規(guī)定每個省只有直轄市才能查到區(qū)域的信息，因此我們查詢實時天氣狀況以市作為查詢依據(jù)。且實時天氣API中的參數(shù)location僅支持通過和風(fēng)天氣GeoAPI搜索出來的經(jīng)緯度或LocationID因此，我們還需要在index.js中首先創(chuàng)建查詢城市LocationID的函數(shù)getLocation()獲取選擇器選擇的城市的LocationID，然后將其作為參數(shù)傳入到獲取實時天氣的函數(shù)中

。

在聯(lián)網(wǎng)狀態(tài)下可以在控制臺獲取到和風(fēng)天氣服務(wù)器返回到j(luò)son數(shù)據(jù)

:任務(wù)3邏輯實現(xiàn)3.頁面更新天氣信息

上述邏輯操作完成后，我們現(xiàn)在將之前index.wxml中設(shè)置的臨時數(shù)據(jù)替換成獲取到的數(shù)據(jù)，也就是在指定位置使用{{now.patameters}}進行數(shù)據(jù)綁定。

需要注意的是，由于網(wǎng)絡(luò)狀況原因，請求會有延遲情況，讀者也可以根據(jù)情況在index.js文件的data中為now設(shè)置初始數(shù)據(jù)，在獲取真實數(shù)據(jù)之前先顯示初始數(shù)據(jù)，也可以不設(shè)置。保存編譯后，天氣預(yù)報小程序運行結(jié)果如圖所示。

任務(wù)3邏輯實現(xiàn)拓展訓(xùn)練自制格點天氣預(yù)測小程序【訓(xùn)練需求】通過仿照手機端天氣預(yù)報app，選用第三方服務(wù)器或以及本地服務(wù)器獲取數(shù)據(jù)的方式自制一個格點天氣預(yù)測小程序，使初學(xué)者加強小程序網(wǎng)絡(luò)API接口的熟練應(yīng)用能力?！居?xùn)練步驟】1.構(gòu)建新項目，設(shè)計項目頁面結(jié)構(gòu)以及樣式；2.微信小程序大小限制為2MB，搭建本地服務(wù)器，將過大的資源文件，如圖片或圖標(biāo)等內(nèi)容存放在本地服務(wù)器中，小程序通過網(wǎng)絡(luò)API接口進行獲取；3.使用第三方服務(wù)器獲取天氣信息資源，可以參考本案例使用和風(fēng)天氣，也可以使用百度天氣等資源服務(wù)器獲取數(shù)據(jù)，在微信管理平臺中添加服務(wù)器域名配置；4.接著，在頁面的onLoad函數(shù)中調(diào)用微信的網(wǎng)絡(luò)請求接口（wx.request）來請求格點天氣預(yù)報接口。接口需要使用獲取到的地理位置信息作為參數(shù)。將獲取到的天氣預(yù)報數(shù)據(jù)存儲到頁面的data對象中，供頁面渲染使用。使用小程序的模板語言在wxml文件中編寫界面布局，并使用data對象中的天氣預(yù)報數(shù)據(jù)來展示天氣預(yù)報信息。在頁面的js文件中編寫邏輯，如刷新、切換城市等功能。項目小結(jié)本項目在知識準(zhǔn)備階段通過本地服務(wù)器搭建的知識，介紹了小程序網(wǎng)絡(luò)APIwx.request接口的用法以及與服務(wù)器數(shù)據(jù)交互的方式。接著引入了小程序在使用第三方服務(wù)器時該如何進行數(shù)據(jù)獲取和解析顯示的方法，也介紹了在使用第三方服務(wù)器時該如何在微信公眾平臺管理端配置服務(wù)器域名以及部署臨時服務(wù)器。最后通過天氣預(yù)報查詢功能的實現(xiàn)，具體展示了小程序網(wǎng)絡(luò)API的相關(guān)應(yīng)用。

項目6美好時光視頻相冊制作知識目標(biāo)：

?了解在微信小程序中播放網(wǎng)絡(luò)視頻的方法。

?掌握小程序提供的video組件的基本屬性及用法。 ?了解微信視頻插件的應(yīng)用方法及限制。技能目標(biāo)：

?掌握視頻列表的切換方法。

?掌握視頻自動播放方法。

?掌握視頻隨機顏色彈幕效果。

?掌握微信小程序媒體API基礎(chǔ)使用方式。素質(zhì)目標(biāo)：

?堅持正確輿論,提升文化素養(yǎng)與思想道德。 ?遵循網(wǎng)絡(luò)規(guī)定,維護網(wǎng)絡(luò)秩序與安全。

?弘揚傳統(tǒng)文化,培育優(yōu)秀網(wǎng)民素質(zhì)。

?倡導(dǎo)網(wǎng)絡(luò)文明,提高網(wǎng)絡(luò)素養(yǎng)。 ?負(fù)責(zé)任使用網(wǎng)絡(luò)環(huán)境,共筑網(wǎng)絡(luò)空間安全。項目6美好時光視頻相冊制作6.1知識準(zhǔn)備6.2項目實施拓展訓(xùn)練6.1知識準(zhǔn)備

在本項目中將會完成一個美好時光視頻相冊頁面的開發(fā)，該頁面采用視頻的方式來記錄旅行中的難忘時光。在本小程序中播放視頻的方式有兩種，一種使用video組件，一種使用騰訊視頻插件，在知識準(zhǔn)備階段先對這兩種方式進行講解。

美好時光視頻相冊