微信小程序開發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版）課件全套 黃龍泉 項(xiàng)目1-10 初識(shí)微信小程序-新聞數(shù)據(jù)接口

項(xiàng)目一初識(shí)微信小程序任務(wù)一注冊小程序MiniProgram微信小程序簡稱小程序。張小龍于2017年1月9日在微信公開課上宣布其正式上線。小程序英文名是MiniProgram，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。小程序簡介項(xiàng)目一

初識(shí)微信小程序觸手可及應(yīng)用體積小無需安裝無需卸載特

點(diǎn)電商購物餐飲服務(wù)旅游出行金融服務(wù)教育培訓(xùn)生活服務(wù)

小程序在微信內(nèi)部承接了各類流量池的串聯(lián)，完成流量/內(nèi)容到交易的閉環(huán)職能。目前小程序打通了微信聊天、企業(yè)微信、公眾號(hào)、視頻號(hào)、朋友圈、搜一搜等多個(gè)流量池，引流渠道豐富多元的同時(shí)，小程序也承載著助力各模塊多元化運(yùn)營的使命。

項(xiàng)目一初識(shí)微信小程序小程序簡介小程序的開發(fā)過程小程序信息完善提交審核和發(fā)布開發(fā)小程序注冊小程序賬號(hào)01020304開發(fā)者可以打開微信公眾平臺(tái)網(wǎng)址:/

注冊小程序管理賬號(hào)，只有注冊了賬號(hào)，才能進(jìn)行后續(xù)的代碼開發(fā)與提交工作。注冊小程序Next》項(xiàng)目一初識(shí)微信小程序

進(jìn)入到小程序注冊填寫信息頁面，填寫的這個(gè)郵箱必須沒有綁定過個(gè)人微信，也沒有注冊過微信公眾平臺(tái)下的訂閱號(hào)或者服務(wù)號(hào)。碼開發(fā)與提交工作。項(xiàng)目一初識(shí)微信小程序Next》

微信小程序公眾號(hào)注冊完成后，進(jìn)入微信小程序管理后臺(tái)，后臺(tái)可以開發(fā)管理、用戶身份、數(shù)據(jù)分析、模板消息等功能。Next》項(xiàng)目一初識(shí)微信小程序

成功注冊好小程序開發(fā)者賬號(hào)之后，直拉進(jìn)行小程序后臺(tái)管理頁面或者登錄到微信公眾平臺(tái)(/)查看個(gè)人的AppID。在左側(cè)導(dǎo)航欄里選擇“開發(fā)”->“開發(fā)管理”界面，在“開發(fā)設(shè)置”選項(xiàng)卡里查看到個(gè)人的AppID，如圖所示。查看小程序的AppIDNext》項(xiàng)目一初識(shí)微信小程序感

謝

觀

看THANK項(xiàng)目一初識(shí)微信小程序任務(wù)二認(rèn)識(shí)小程序開發(fā)者工具M(jìn)iniProgram為了幫助開發(fā)者簡單和高效地開發(fā)和調(diào)試微信小程序，推出了微信開發(fā)者工具，該工具集成了公眾號(hào)網(wǎng)頁調(diào)試和小程序調(diào)試兩種開發(fā)模式。工具在官方網(wǎng)站/miniprogram/dev/devtools/devtools.html上下載。安裝微信開發(fā)工具Next》項(xiàng)目一初識(shí)微信小程序下載完成后，雙擊wechat_devtools_1.05.2111300_x64.exe文件進(jìn)行開發(fā)工具的安裝。安裝步驟如圖-圖所示。Next》項(xiàng)目一初識(shí)微信小程序項(xiàng)目一

初識(shí)微信小程序選擇安裝路徑Next》項(xiàng)目一初識(shí)微信小程序項(xiàng)目一初識(shí)微信小程序體驗(yàn)微信小程序成功登錄之后，雙擊微信開發(fā)者工具，在左側(cè)導(dǎo)航欄選擇“小程序”選項(xiàng)，單擊右側(cè)的“+”按鈕，進(jìn)入創(chuàng)建小程序界面。Next》項(xiàng)目一初識(shí)微信小程序Next》項(xiàng)目一初識(shí)微信小程序進(jìn)入“創(chuàng)建小程序”界面，依次填入“項(xiàng)目名稱”、“目錄”、“AppID”、“開發(fā)模式”、“后端服務(wù)”、“語言”以及“模板選擇”。為方便開發(fā)者開發(fā)和體驗(yàn)小程序、小游戲的各種能力，開發(fā)者可以申請小程序或小游戲的測試號(hào)。Next》項(xiàng)目一初識(shí)微信小程序Next》當(dāng)開發(fā)者創(chuàng)建項(xiàng)目之后，會(huì)進(jìn)入到微信開發(fā)者工具的界面。從圖中可以看出，微信開發(fā)者工具的主界面主要由菜單欄、工具欄、模擬器、資源區(qū)、編輯器、調(diào)試器組成。Next》項(xiàng)目一初識(shí)微信小程序菜單欄：通過菜單欄可以訪問微信開發(fā)者工具的大部分功能，常用的菜單如下：項(xiàng)目文件編輯工具轉(zhuǎn)到選擇視圖界面設(shè)置幫助微信開發(fā)者工具Next》項(xiàng)目一初識(shí)微信小程序工具欄：提供了一些常用功能的快捷按鈕，具體說明如下：Next》項(xiàng)目一初識(shí)微信小程序Next》模擬器：用于在計(jì)算機(jī)中模擬小程序在不同型號(hào)手機(jī)上的執(zhí)行效果，小程序的代碼通過編譯后可以在模擬器上直接運(yùn)行。開發(fā)者可以選擇不同的機(jī)型，以及顯示比例和字體大小。Next》項(xiàng)目一初識(shí)微信小程序Next》資源區(qū)：在資源管理區(qū)里，可以添加新的文件，文件類型包括WXML、JS、WXSS和JSON。在資源管理區(qū)還可以創(chuàng)建新的文件夾。Next》項(xiàng)目一初識(shí)微信小程序Next》編輯器：在代碼編輯區(qū)中可以打開多個(gè)頁面切換查看，在代碼編輯區(qū)域，小程序提供自動(dòng)聯(lián)想功能。Next》項(xiàng)目一初識(shí)微信小程序Next》調(diào)試器：調(diào)試工具主要包括Wxml、AppData、Console、Sources、Storage、Network、Memory、Security、Sensor、Mock、Audits、Trace和Vulnerability功能模塊。感

謝

觀

看THANK項(xiàng)目一初識(shí)微信小程序任務(wù)二認(rèn)識(shí)小程序開發(fā)者工具M(jìn)iniProgram為了幫助開發(fā)者簡單和高效地開發(fā)和調(diào)試微信小程序，推出了微信開發(fā)者工具，該工具集成了公眾號(hào)網(wǎng)頁調(diào)試和小程序調(diào)試兩種開發(fā)模式。工具在官方網(wǎng)站/miniprogram/dev/devtools/devtools.html上下載。安裝微信開發(fā)工具Next》項(xiàng)目一初識(shí)微信小程序下載完成后，雙擊wechat_devtools_1.05.2111300_x64.exe文件進(jìn)行開發(fā)工具的安裝。安裝步驟如圖-圖所示。Next》項(xiàng)目一初識(shí)微信小程序項(xiàng)目一

初識(shí)微信小程序選擇安裝路徑Next》項(xiàng)目一初識(shí)微信小程序項(xiàng)目一初識(shí)微信小程序體驗(yàn)微信小程序成功登錄之后，雙擊微信開發(fā)者工具，在左側(cè)導(dǎo)航欄選擇“小程序”選項(xiàng)，單擊右側(cè)的“+”按鈕，進(jìn)入創(chuàng)建小程序界面。Next》項(xiàng)目一初識(shí)微信小程序Next》項(xiàng)目一初識(shí)微信小程序進(jìn)入“創(chuàng)建小程序”界面，依次填入“項(xiàng)目名稱”、“目錄”、“AppID”、“開發(fā)模式”、“后端服務(wù)”、“語言”以及“模板選擇”。為方便開發(fā)者開發(fā)和體驗(yàn)小程序、小游戲的各種能力，開發(fā)者可以申請小程序或小游戲的測試號(hào)。Next》項(xiàng)目一初識(shí)微信小程序Next》當(dāng)開發(fā)者創(chuàng)建項(xiàng)目之后，會(huì)進(jìn)入到微信開發(fā)者工具的界面。從圖中可以看出，微信開發(fā)者工具的主界面主要由菜單欄、工具欄、模擬器、資源區(qū)、編輯器、調(diào)試器組成。Next》項(xiàng)目一初識(shí)微信小程序菜單欄：通過菜單欄可以訪問微信開發(fā)者工具的大部分功能，常用的菜單如下：項(xiàng)目文件編輯工具轉(zhuǎn)到選擇視圖界面設(shè)置視圖Next》項(xiàng)目一初識(shí)微信小程序工具欄：提供了一些常用功能的快捷按鈕，具體說明如下：Next》項(xiàng)目一初識(shí)微信小程序Next》模擬器：用于在計(jì)算機(jī)中模擬小程序在不同型號(hào)手機(jī)上的執(zhí)行效果，小程序的代碼通過編譯后可以在模擬器上直接運(yùn)行。開發(fā)者可以選擇不同的機(jī)型，以及顯示比例和字體大小。Next》項(xiàng)目一初識(shí)微信小程序Next》資源區(qū)：在資源管理區(qū)里，可以添加新的文件，文件類型包括WXML、JS、WXSS和JSON。在資源管理區(qū)還可以創(chuàng)建新的文件夾。Next》項(xiàng)目一初識(shí)微信小程序Next》編輯器：在代碼編輯區(qū)中可以打開多個(gè)頁面切換查看，在代碼編輯區(qū)域，小程序提供自動(dòng)聯(lián)想功能。Next》項(xiàng)目一初識(shí)微信小程序Next》調(diào)試器：調(diào)試工具主要包括Wxml、AppData、Console、Sources、Storage、Network、Memory、Security、Sensor、Mock、Audits、Trace和Vulnerability功能模塊。感

謝

觀

看THANK項(xiàng)目二小程序編程基礎(chǔ)任務(wù)一小程序的執(zhí)行順序MiniProgram小程序包含哪些項(xiàng)目文件，每一個(gè)頁面包含哪些文件，把它寫在以下橫線里？想一想：Next》在app.js頁面，定義一個(gè)App()函數(shù)，還可用來注冊一個(gè)微信小程序。App()必須在app.js中調(diào)用，必須調(diào)用且只能調(diào)用一次。不然會(huì)出現(xiàn)無法預(yù)期的后果。App()函數(shù)里有一些生命周期函數(shù)。Next》小程序注冊函數(shù)App()屬性類型必填說明onLaunchfunction否生命周期回調(diào)——監(jiān)聽小程序初始化。onShowfunction否生命周期回調(diào)——監(jiān)聽小程序啟動(dòng)或切前臺(tái)。onHidefunction否生命周期回調(diào)——監(jiān)聽小程序切后臺(tái)。onErrorfunction否錯(cuò)誤監(jiān)聽函數(shù)。onPageNotFoundfunction否頁面不存在監(jiān)聽函數(shù)。onUnhandledRejectionfunction否未處理的Promise拒絕事件監(jiān)聽函數(shù)。onThemeChangefunction否監(jiān)聽系統(tǒng)主題變化其他any否開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)變量到Object參數(shù)中，用this可以訪問小程序注冊函數(shù)App()App({ onLaunch(options){console.log("啟動(dòng)onLaunch")},onShow(options){console.log("啟動(dòng)onShow")},onHide(){console.log("啟動(dòng)onHide")},onError(msg){console.log(msg)},globalData:'Iamglobaldata'})小程序注冊函數(shù)App()執(zhí)行結(jié)果如下圖所示。Page(Objectobject)注冊小程序中的一個(gè)頁面。接受一個(gè)

Object

類型參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。頁面注冊函數(shù)Page()Next》屬性類型說明dataObject頁面的初始數(shù)據(jù)optionsObject頁面的組件選項(xiàng)，同中的options，需要基礎(chǔ)庫版本behaviorsStringArray類似于mixins和traits的組件間代碼復(fù)用機(jī)制，參見，需要基礎(chǔ)庫版本onLoadfunction生命周期回調(diào)—監(jiān)聽頁面加載onShowfunction生命周期回調(diào)—監(jiān)聽頁面顯示onReadyfunction生命周期回調(diào)—監(jiān)聽頁面初次渲染完成onHidefunction生命周期回調(diào)—監(jiān)聽頁面隱藏onUnloadfunction生命周期回調(diào)—監(jiān)聽頁面卸載onPullDownRefreshfunction監(jiān)聽用戶下拉動(dòng)作onReachBottomfunction頁面上拉觸底事件的處理函數(shù)onShareAppMessagefunction用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)其他any開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到Object參數(shù)中，在頁面的函數(shù)中用this可以訪問。這部分屬性會(huì)在頁面實(shí)例創(chuàng)建時(shí)進(jìn)行一次深拷貝。頁面注冊函數(shù)Page()Next》感

謝

觀

看THANK項(xiàng)目二小程序編程基礎(chǔ)項(xiàng)目二小程序編程基礎(chǔ)任務(wù)二構(gòu)建頁面數(shù)據(jù)MiniProgram定義data數(shù)據(jù)：在頁面JS文件page函數(shù)中第一項(xiàng)為data屬性，在data中定義本頁面邏輯處理需要用到的數(shù)據(jù)，其中很大一部分?jǐn)?shù)據(jù)將用WXML文件的數(shù)據(jù)渲染。因?yàn)樾〕绦騄S文件是基于JavaScript編寫的，所以在JS文件中可以定義字符串、數(shù)字、布爾值、對(duì)象和數(shù)組等類型的數(shù)據(jù)。Next》頁面數(shù)據(jù)Page({

data:

{

text:

"This

is

page

data.",

sliderOffset:

0,

state:{

genre:[],

genre_index:

0,

model:[],

model_index:

0,

terminalStatus:'',

}

},})獲取data數(shù)據(jù)：獲取data中的text和genre_index值需要使用this。Next》頁面數(shù)據(jù)

onLoad:function(options){

var

gener_index=this.data.state.genre_index

console.log(gener_index)

var

text=this.data.text

console.log(text)

}頁面數(shù)據(jù)執(zhí)行效果如下圖所示。內(nèi)容綁定：WXML中的動(dòng)態(tài)數(shù)據(jù)均來自對(duì)應(yīng)Page的data。數(shù)據(jù)綁定使用Mustache語法即{{}}語法將變量包起來。Next》數(shù)據(jù)綁定在index.wxml頁面數(shù)據(jù)綁定，示例代碼如下：<view>{{message}}</view>組件屬性：在小程序組件中,properties是組件的對(duì)外屬性,用來接收外界傳遞到組件中的數(shù)據(jù)。Next》數(shù)據(jù)綁定在index.wxml頁面數(shù)據(jù)綁定，示例代碼如下：<viewid="item-{{id}}"></view>控制屬性：在index.wxml頁面數(shù)據(jù)綁定，示例代碼如下Next》數(shù)據(jù)綁定<view

wx:if="{{condition}}">hello,world</view>關(guān)鍵字：true：boolean類型的true，代表真值。false：boolean類型的false，代表假值。Next》數(shù)據(jù)綁定在index.wxml頁面數(shù)據(jù)綁定，示例代碼如下：<checkboxchecked="{{false}}"></checkbox>特別注意：不要直接寫checked="false"，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成boolean類型后代表真值。感

謝

觀

看THANK項(xiàng)目二小程序編程基礎(chǔ)項(xiàng)目二小程序編程基礎(chǔ)任務(wù)三列表渲染MiniProgram在微信小程序中，列表渲染是一種常見的需求，它可以將一組數(shù)據(jù)以列表的形式呈現(xiàn)給用戶。列表渲染在小程序中的實(shí)現(xiàn)主要依賴于wx:for指令，它允許遍歷數(shù)組或?qū)ο螅?duì)每個(gè)元素進(jìn)行操作。Next》列表渲染簡介在組件上使用

wx:for

控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為

index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為

item。Next》wx:for和wx:key的使用Page({data:{array:[

{message:'foo'},

{message:'bar'}

]}})在index.wxml頁面實(shí)現(xiàn)列表渲染，示例代碼如下：<viewwx:for="{{array}}">{{index}}:{{item.message}}</view>wx:for和wx:key的使用示例代碼效果如下圖所示。使用

wx:for-item

可以指定數(shù)組當(dāng)前元素的變量名，使用

wx:for-index

可以指定數(shù)組當(dāng)前下標(biāo)的變量名。Next》wx:for和wx:key的使用<viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itemName">{{idx}}:{{itemName.message}}</view>將

wx:for

用在<block/>標(biāo)簽上，以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。Next》blockwx:for的使用<block

wx:for="{{[1,

2,

3]}}"

wx:key="*this">

<view>

{{index}}:

{{item}}

</view></block>將

wx:for

用在<block/>標(biāo)簽上，以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。Next》blockwx:for的使用<viewwx:for="array">{{item}}</view><viewwx:for="{{['a','r','r','a','y']}}">{{item}}</view>等同于blockwx:for的使用運(yùn)行結(jié)果如下所示?；ɡㄌ?hào)和引號(hào)之間如果有空格，將最終被解析成為字符串。Next》blockwx:for的使用<viewwx:for="{{[1,2,3]}}">{{item}}</view><viewwx:for="{{[1,2,3]+''}}">{{item}}</view>等同于blockwx:for的使用運(yùn)行結(jié)果如下所示。感

謝

觀

看THANK項(xiàng)目二小程序編程基礎(chǔ)項(xiàng)目二小程序編程基礎(chǔ)任務(wù)四條件渲染MiniProgram在微信小程序中，條件渲染是一種非常實(shí)用的技術(shù)，它允許我們根據(jù)條件來決定是否顯示某個(gè)組件或頁面。通過條件渲染，開發(fā)者可以動(dòng)態(tài)地呈現(xiàn)用戶界面，根據(jù)用戶的輸入、數(shù)據(jù)或其他條件來做出相應(yīng)的調(diào)整。Next》條件渲染簡介在框架中，使用wx:if=""來判斷是否需要渲染該代碼塊：Next》wx:if的使用<viewwx:if="{{condition}}">Helloworld</view>也可以用wx:elif和wx:else來添加一個(gè)else塊：<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>2}}">2</view><viewwx:else>3</view>wx:if的使用示例代碼效果如下圖所示。因?yàn)閣x:if是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上。如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用一個(gè)<block/>標(biāo)簽將多個(gè)組件包裝起來，并在上邊使用wx:if控制屬性。Next》blockwx:if的使用<block/>并不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會(huì)在頁面中做任何渲染，只接受控制屬性<blockwx:if="{{true}}"><view>view1</view><view>view2</view></block>blockwx:if的使用示例代碼效果如下圖所示。在框架中，使用wx:if=""來判斷是否需要渲染該代碼塊：Next》wx:if的使用<viewwx:if="{{condition}}">Helloworld</view>也可以用wx:elif和wx:else來添加一個(gè)else塊：<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>2}}">2</view><viewwx:else>3</view>hidden也可以用來控制元素的顯示與隱藏，與wx:if不同，當(dāng)wx:if的條件值切換時(shí)，框架有一個(gè)局部渲染的過程，因?yàn)樗鼤?huì)確保條件塊在切換時(shí)銷毀或重新渲染。同時(shí)wx:if也是惰性的，如果在初始渲染條件為false，框架什么也不做，在條件第一次變成真的時(shí)候才開始局部渲染。Next》hidden的使用<view

hidden="{{flag}}">

flag為true值時(shí)，隱藏評(píng)論</view>Page({

data:

{

flag:true

}})在JS中定義flag的值blockwx:for的使用運(yùn)行結(jié)果如下所示?；ɡㄌ?hào)和引號(hào)之間如果有空格，將最終被解析成為字符串。Next》blockwx:for的使用<viewwx:for="{{[1,2,3]}}">{{item}}</view><viewwx:for="{{[1,2,3]+''}}">{{item}}</view>等同于blockwx:for的使用運(yùn)行結(jié)果如下所示。感

謝

觀

看THANK項(xiàng)目二小程序編程基礎(chǔ)項(xiàng)目二小程序編程基礎(chǔ)任務(wù)五事件渲染MiniProgram事件是視圖層到邏輯層的通訊方式，可以將用戶的行為反饋到邏輯層進(jìn)行處理。事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。事件對(duì)象可以攜帶額外信息，如id,dataset,touches。小程序中綁定事件，通過bind關(guān)鍵字來實(shí)現(xiàn)。如bindinput，bindtap(綁定點(diǎn)擊事件)，bindchange等。Next》事件綁定簡介通過bind+“事件名稱”為組件綁定事件，如bindchange、bindtap等，當(dāng)用戶點(diǎn)擊該組件的時(shí)候會(huì)在該頁面對(duì)應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。在大多數(shù)組件和自定義組件中，

bind

后也可以緊跟一個(gè)冒號(hào)，其含義不變，如

bind:tap。Next》事件的使用方式（1）不帶參數(shù)的事件綁定在wxml中定義組件。Next》事件的使用方式在JS頁面定義事件處理函數(shù)。Page({data:{num:0},changeinput:function(e){console.log(this.setData({num:e.detail.value}));}})<inputtype="text"bindchange="changeinput"/>（2）帶參數(shù)的事件綁定在wxml中定義組件。Next》事件的使用方式在JS頁面定義事件處理函數(shù)。Page({

data:

{

},

tapEvent:function(e){

console.log(e)

//獲取事件詳情

console.log(e.currentTarget.dataset.hi)//獲取數(shù)據(jù)綁定data-的數(shù)據(jù)

console.log(e.currentTarget.dataset.id)

}})<view

data-hi="WeChat"

data-id="01"

bindtap="tapEvent"

>Click

me</view>事件分為冒泡事件和非冒泡事件：冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞。非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞。Next》事件分類運(yùn)行環(huán)境渲染層touchstart手指觸摸動(dòng)作開始touchmove手指觸摸后移動(dòng)touchcancel手指觸摸動(dòng)作被打斷，如來電提醒，彈窗touchend手指觸摸動(dòng)作結(jié)束tap手指觸摸后馬上離開longpress手指觸摸后，超過350ms再離開，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個(gè)事件，tap事件將不被觸發(fā)longtap手指觸摸后，超過350ms再離開（推薦使用longpress事件代替）transitionend會(huì)在WXSStransition或wx.createAnimation動(dòng)畫結(jié)束后觸發(fā)animationstart會(huì)在一個(gè)WXSSanimation動(dòng)畫開始時(shí)觸發(fā)animationiteration會(huì)在一個(gè)WXSSanimation一次迭代結(jié)束時(shí)觸發(fā)animationend會(huì)在一個(gè)WXSSanimation動(dòng)畫完成時(shí)觸發(fā)touchforcechange在支持3DTouch的iPhone設(shè)備，重按時(shí)會(huì)觸發(fā)WXML的冒泡事件列表：觸摸類事件支持捕獲階段。捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達(dá)節(jié)點(diǎn)的順序與冒泡階段恰好相反。需要在捕獲階段監(jiān)聽事件時(shí)，可以采用capture-bind、capture-catch關(guān)鍵字，后者將中斷捕獲階段和取消冒泡階段。Next》事件的捕獲階段(1)捕獲事件capture-bind開頭，點(diǎn)擊哪個(gè)事件，就觸發(fā)哪個(gè)和自己包裹的所有事件。<view

class="outer"

capture-bind:tap='handleTap1'>

outer

view

<view

class="middle"

capture-bind:tap='handleTap2'>

middle

view

<view

class="inner"

capture-bind:tap='handleTap3'>

inner

view

</view>

</view></view>觸摸類事件支持捕獲階段。捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達(dá)節(jié)點(diǎn)的順序與冒泡階段恰好相反。需要在捕獲階段監(jiān)聽事件時(shí)，可以采用capture-bind、capture-catch關(guān)鍵字，后者將中斷捕獲階段和取消冒泡階段。Next》事件的捕獲階段（2）取消冒泡、捕獲事件capture-catch開頭，不管怎么點(diǎn)擊，都只觸發(fā)最外層事件。<view

class="outer"

capture-catch:tap='handleTap1'>

outer

view

<view

class="middle"

capture-catch:tap='handleTap2'>

middle

view

<view

class="inner"

capture-catch:tap='handleTap3'>

inner

view

</view>

</view></view>感

謝

觀

看THANK項(xiàng)目二小程序編程基礎(chǔ)項(xiàng)目三小程序常用組件Flexelasticmodellayout任務(wù)一Flex彈性模型布局Flex布局是繼標(biāo)準(zhǔn)流布局、浮動(dòng)布局、定位布局后的第四種布局方式。這種方式可以非常優(yōu)雅的實(shí)現(xiàn)子元素居中或均勻分布，甚至可以隨著窗口縮放自動(dòng)適應(yīng)。Flex布局在瀏覽器中存在一定的兼容性，在小程序中，是完全兼容Flex布局的，并且微信官方也是推薦使用Flex布局的。下面就來詳細(xì)的講下Flex布局。項(xiàng)目三小程序常用組件任務(wù)描述Flex彈性模型布局彈性容器：包含著彈性項(xiàng)目的父元素。彈性項(xiàng)目(Flexitem)：彈性容器的每個(gè)子元素都稱為彈性項(xiàng)目。軸(Axis)：每個(gè)彈性框布局包含兩個(gè)軸。方向(Direction)：可以通過flex-direction來確定主軸和側(cè)軸的方向。Flex彈性模型布局傳統(tǒng)的布局解決方案Flex容器屬性Flex項(xiàng)目屬性小程序Flex布局Flex-directionFlex-wrapjustity-contentalign-contentflex-flowalign-itemsorderflex-growflex-shrinkflex-basisflexalign-selfFlex布局相關(guān)屬性

主軸排列：默認(rèn)情況下，容器在主軸的方向是從左到右。在主軸方向上，可以通過justify-content屬性來設(shè)置他們的排列方式。屬性說明flex-start項(xiàng)目靠近父盒子的左側(cè)。默認(rèn)采用的就是這種排列方式。flex-end項(xiàng)目靠近父盒子的右側(cè)。center所有項(xiàng)目會(huì)挨在一起在父盒子的中間位置。space-around項(xiàng)目沿主軸均勻分布，位于首尾兩端的子容器到父容器的距離是子容器間距的一半。space-between項(xiàng)目沿主軸均勻分布，位于首尾兩端的子容器與父容器緊緊挨著。space-evenly項(xiàng)目在主軸上均勻分布，收尾兩端的自容器到父容器的距離跟自容器間的間距是一樣的。圖主軸排列方式Flex布局相關(guān)屬性

側(cè)軸排列：默認(rèn)情況下，側(cè)軸的方向是從上到下。在側(cè)軸方向上，可以通過align-items屬性來設(shè)置他們的排列方式。圖側(cè)軸排列方式屬性說明flex-start起始端對(duì)齊。默認(rèn)就是這種對(duì)齊方式。flex-end末尾段對(duì)齊。center中間對(duì)齊。stretch如果項(xiàng)目沒有設(shè)置高度。那么子容器沿交叉軸方向的尺寸拉伸至與父容器一致。Flex布局相關(guān)屬性

主軸和側(cè)軸方向：主軸默認(rèn)的方向是從左到右，側(cè)軸的方向默認(rèn)是從上到下，當(dāng)然也可以進(jìn)行修改?？梢酝ㄟ^flex-direction進(jìn)行修改。圖主軸和側(cè)軸方向?qū)傩哉f明row默認(rèn)屬性。從左到右。row-reverse從右到左。column從上到下。column-reverse從下到上。Flex布局相關(guān)屬性

換行：默認(rèn)情況下，元素個(gè)數(shù)如果超過一定數(shù)量，那么在一行當(dāng)中就排列不下。此時(shí)flex默認(rèn)的處理方式是壓縮元素，使其能在一行中排列下來?？梢酝ㄟ^flex-wrap來改變排列的方式。圖換行屬性屬性說明nowrap不換行。默認(rèn)方式wrap換行wrap-reverse換行，但是第一行會(huì)在下面。Flex布局相關(guān)屬性

多行排列：在排列中，如果有多行，那么這個(gè)屬性是設(shè)置多行之間的排列方式。可以通過align-content屬性來確定排列的方式。圖多行排列方式屬性說明flex-start從上往下排列。flex-end末尾段對(duì)齊center中點(diǎn)對(duì)齊space-between與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布space-around每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。stretch默認(rèn)方式，如果沒有給元素設(shè)置高度，那么會(huì)占滿整個(gè)交叉軸。Flex項(xiàng)目布局屬性

如果我們想對(duì)某一項(xiàng)子級(jí)元素單獨(dú)設(shè)置屬性，這就要用到flex的項(xiàng)目屬性，設(shè)置在項(xiàng)目（子容器）上的6個(gè)屬性。圖flex項(xiàng)目布局屬性屬性說明order定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。flex-grow定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。flex-shrink定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。負(fù)值對(duì)該屬性無效。如果flex-shrink值為0，表示該項(xiàng)目不收縮。flex-basis定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（mainsize）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。flex是flex-grow,flex-shrink和flex-basis的簡寫，默認(rèn)值為01auto。后兩個(gè)屬性可選。align-self允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。Flex布局案例

設(shè)計(jì)一個(gè)小程序頁面，利用flex彈性盒模型布局實(shí)現(xiàn)九宮格效果，在此案例中需要用到Flex彈性模型布局display、更新主軸和側(cè)軸方向?qū)傩詅lex-direction、主軸排列屬性justify-content、側(cè)軸排列屬性align-items。感

謝

觀

看THANK項(xiàng)目三小程序常用組件"Punchineveryday"layoutdesign任務(wù)二“天天打卡”布局設(shè)計(jì)如果需要每天打卡，統(tǒng)計(jì)要卡數(shù)據(jù)，那么打卡小程序肯定是最佳選擇，本任務(wù)配套源代碼中提供了完整的天天打卡小程序案例。從圖來看，天天打卡小程序的頁面可以分成上下兩個(gè)區(qū)域，上面區(qū)域用于實(shí)現(xiàn)打卡信息的填寫，包括用戶昵稱、打卡名稱、打卡地點(diǎn)以及打卡時(shí)間。下面區(qū)域以標(biāo)簽的形式列出打卡記錄。方便用戶查看打卡記錄。項(xiàng)目三小程序常用組件任務(wù)描述頁面基本結(jié)構(gòu)

分析了天天打卡小程序并學(xué)習(xí)了Flex布局，接下來編寫天天打卡小程序的基礎(chǔ)頁面結(jié)構(gòu)和樣式，打開pages/card/card.wxml文件編寫頁面結(jié)構(gòu)代碼。<!--

昵稱、打卡名稱

--><view

class="card

mt20"></view><!--

打卡地點(diǎn)

--><view

class="card

mt20"></view>

<!--

打卡時(shí)間：時(shí)間選擇器、重復(fù)日期

--><view

class="card

mt20"></view><!--

新建按鈕

--><view

class="create"></view><!--

打卡標(biāo)簽

--><view

class="list">

</view>案例初始化

在chapter03項(xiàng)目中創(chuàng)建一個(gè)名為card的空白頁面，打開app.json文件，創(chuàng)建新頁面的代碼如下所示。{

"pages":[

"pages/card/card"]}

打開pages/card/card.json文件中編寫頁面配置代碼，設(shè)置具體如下。{

"navigationBarTitleText":

"天天打卡",

"navigationBarBackgroundColor":

"#15a8e2"}感

謝

觀

看THANK項(xiàng)目三小程序常用組件"Punchthecardeveryday"function任務(wù)三“天天打卡”功能實(shí)現(xiàn)如果需要每天打卡，統(tǒng)計(jì)要卡數(shù)據(jù)，那么打卡小程序肯定是最佳選擇，本任務(wù)配套源代碼中提供了完整的天天打卡小程序案例。從圖來看，天天打卡小程序的頁面可以分成上下兩個(gè)區(qū)域，上面區(qū)域用于實(shí)現(xiàn)打卡信息的填寫，包括用戶昵稱、打卡名稱、打卡地點(diǎn)以及打卡時(shí)間。下面區(qū)域以標(biāo)簽的形式列出打卡記錄。方便用戶查看打卡記錄。項(xiàng)目三小程序常用組件任務(wù)描述獲得個(gè)人信息-開放數(shù)據(jù)

微信小程序提供了open-data組件用于展示微信開放的數(shù)據(jù)?？梢灾苯荧@取頭像和昵稱，無需用戶授權(quán)。open-data組件屬性屬性類型說明typestring開放數(shù)據(jù)類型，groupName：拉取群名稱，userNickName用戶昵稱。userAvatarUrl用戶頭像。userGender用戶性別。userCity用戶所在城市。userProvince用戶所在省份。userCountry用戶所在國家。userLanguage用戶的語言。open-gidstring當(dāng)type="groupName"時(shí)生效,群iddefault-textstring數(shù)據(jù)為空時(shí)的默認(rèn)文案打卡名稱-輸入框組件

小程序中的部分組件是由客戶端創(chuàng)建的原生組件，其中包含input輸入框組件，input中的字體是系統(tǒng)字體，所以無法設(shè)置font-family。在案例中，為input組件綁定了bindinput事件，鍵盤輸入時(shí)觸發(fā)，處理函數(shù)可以直接return一個(gè)字符串，將替換輸入框的內(nèi)容。

//

設(shè)置任務(wù)名稱

bindKeyInput:

function

(e)

{

this.setData({

"cardName"

:

e.detail.value});

},打開pages/card/card.js文件，實(shí)現(xiàn)bindKeyInput事件，獲取e.detail.value獲取到輸入里的值，通過setData()函數(shù)將e.detail.value值賦給cardName。打卡地點(diǎn)-地理位置API

在微信小程序中，經(jīng)常需要使用到地理位置功能，可以通過API接口來獲取當(dāng)前的位置。小程序提供了wx.chooseLocation(Objectobject)API來獲取地理位置，直接調(diào)用微信的接口API，返回一個(gè)json數(shù)據(jù)。打卡地點(diǎn)-地理位置API[代碼略]"permission":

{

"scope.userLocation":

{

"desc":

"你的位置信息將用于小程序位置接口的效果展示"

}}}

打卡時(shí)間-picker組件

picker組件從底部彈起的滾動(dòng)選擇器。在官方文檔中，提供了五種類型的picker組件，如普通選擇器，多列選擇器，時(shí)間選擇器，日期選擇器和省市區(qū)選擇器，可以用mode屬性區(qū)分。圖picker組件屬性屬性類型說明header-textstring選擇器的標(biāo)題，僅安卓可用modestring選擇器類型，包括selector普通選擇器；multiSelector多列選擇器；time時(shí)間選擇器；date日期選擇器；region省市區(qū)選擇器。disabledboolean是否禁用bindcanceleventhandle取消選擇時(shí)觸發(fā)打卡時(shí)間-picker組件

時(shí)間選擇器bindchange代表當(dāng)用戶選擇了不同的選項(xiàng)時(shí)，會(huì)觸發(fā)相應(yīng)的函數(shù)?？梢允褂胋indchange修改js文件里面對(duì)應(yīng)的值。圖時(shí)間選擇器屬性屬性類型說明valuestring表示選中的時(shí)間，格式為"hh:mm"startstring表示有效時(shí)間范圍的開始，字符串格式為"hh:mm"endstring表示有效時(shí)間范圍的結(jié)束，字符串格式為"hh:mm"bindchangeeventhandlevalue改變時(shí)觸發(fā)change事件，event.detail={value}重復(fù)日期-條件運(yùn)算符

在小程序的開發(fā)中，有時(shí)候需要根據(jù)page的data中的數(shù)據(jù)來決定頁面中的某元素加不加載，或者一個(gè)元素有沒有某個(gè)屬性，這時(shí)候就可以用條件運(yùn)算符來實(shí)現(xiàn)。vara=10,b=20;console.log(20===(a>=10?a+10:b+10));感

謝

觀

看THANK項(xiàng)目四商城首頁模塊開發(fā)任務(wù)一商城項(xiàng)目需求分析Mallprojectdemandanalysis項(xiàng)目四商城首頁模塊開發(fā)任務(wù)描述嘗試創(chuàng)建一個(gè)小程序前端綜合設(shè)計(jì)實(shí)例。創(chuàng)建以“梅園”為主題的小程序?qū)嵗?，包括新聞和產(chǎn)品頁面的設(shè)計(jì)和數(shù)據(jù)請求實(shí)現(xiàn)。軟件開發(fā)步驟需求分析軟件設(shè)計(jì)軟件開發(fā)軟件測試可行性分析軟件實(shí)施如何做好軟件需求分析？目的是將用戶非形式的需求轉(zhuǎn)化為明確、完整的需求定義，確保系統(tǒng)滿足功能、性能和可靠性等具體要求。軟件需求分析是開發(fā)過程中的關(guān)鍵步驟，涉及對(duì)用戶和項(xiàng)目需求的深入調(diào)研與分析。如何做好軟件需求分析？需求分析內(nèi)容功能性分析必須實(shí)現(xiàn)哪些功能向用戶提供功能需求執(zhí)行的操作幫助用戶進(jìn)行充分描述外部行為形成軟件需求規(guī)格說明文檔設(shè)計(jì)約束進(jìn)行設(shè)計(jì)的約束說明非功能性需求軟件性能、可靠性、響應(yīng)時(shí)間運(yùn)行環(huán)境的要求相關(guān)標(biāo)準(zhǔn)、規(guī)范用戶界面具體細(xì)節(jié)未來可能的擴(kuò)充方案“梅園”功能需求分析首頁功能需求五個(gè)功能模塊：首頁功能、新聞功能、產(chǎn)品功能、購物車功能和個(gè)人中心功能。五個(gè)功能模塊都可以在tabBar中顯示，通過tabBar功能，實(shí)現(xiàn)頁面的自由切換。輪播圖效果，并且至少需要3幅圖片自動(dòng)播放功能。01圖標(biāo)導(dǎo)航、推薦產(chǎn)品滾動(dòng)區(qū)域功能。02最新產(chǎn)品展示功能。03首頁功能需求新聞頁功能需求新聞列表功能，并且實(shí)現(xiàn)下拉刷新、上拉觸底功能。01新聞詳情頁面需要顯示新聞標(biāo)題、圖片、正文和日期。02允許點(diǎn)擊按鈕將當(dāng)前閱讀的新聞添加到本地收藏中。03已經(jīng)收藏過的新聞也可以點(diǎn)擊按鈕取消收藏。04產(chǎn)品頁功能需求顯示產(chǎn)品分類，點(diǎn)擊商品分類，可以進(jìn)入到產(chǎn)品列表頁面。01點(diǎn)擊產(chǎn)品進(jìn)入到產(chǎn)品詳情頁，可以查看產(chǎn)品的詳情信息。02獲取產(chǎn)品的評(píng)論信息，并將產(chǎn)品添加到購物車功能。03購物車功能需求顯示購物產(chǎn)品列表。01計(jì)算出購物車?yán)锶慨a(chǎn)品的金額。02刪減購物車?yán)锂a(chǎn)品的數(shù)量，并重新計(jì)算金額。03個(gè)人中心頁功能需求未登錄狀態(tài)下顯示登錄按鈕，點(diǎn)擊后可以顯示微信頭像和昵稱。01使用模板功能完成個(gè)人信息列表。02使用Echart圖表進(jìn)行個(gè)人信息統(tǒng)計(jì)。03頁面功能實(shí)現(xiàn)方法或組件

表

更多功能模塊更多需求分析

查找微信開發(fā)者文檔，你還能提出哪些功能模塊？功能需求的作用明確用戶的需求和期望，確定項(xiàng)目的功能和特性。1預(yù)防需求不符，減少開發(fā)成本和時(shí)間。2確保軟件滿足用戶需求，提升質(zhì)量和滿意度。3建立軟件開發(fā)目標(biāo)，加強(qiáng)團(tuán)隊(duì)協(xié)作與溝通，提升效率和質(zhì)量。4感

謝

觀

看THANK項(xiàng)目四商城首頁模塊開發(fā)任務(wù)二商城項(xiàng)目創(chuàng)建Mallprojectcreation原生開發(fā)是指使用微信官方提供的開發(fā)工具和API來進(jìn)行開發(fā)，包括小程序前端開發(fā)和后端接口開發(fā)。原生開發(fā)開源小程序框架是一種基于微信官方框架的再封裝和拓展，通過提供一些常用的開發(fā)模塊和組件，簡化開發(fā)流程。開源小程序框架低代碼開發(fā)平臺(tái)是一種以可視化方式進(jìn)行開發(fā)的工具，可以幫助開發(fā)者快速搭建原型并生成代碼。

低代碼開發(fā)平臺(tái)在市場上有很多專業(yè)的小程序開發(fā)團(tuán)隊(duì)或者個(gè)人開發(fā)者可以提供開發(fā)服務(wù)。外包或代開發(fā)小程序開發(fā)方式微信云開發(fā)微信云開發(fā)由微信團(tuán)隊(duì)和騰訊云聯(lián)合推出。01提供專業(yè)的小程序、小游戲、公眾號(hào)網(wǎng)頁開發(fā)服務(wù)。02支持快速開發(fā)，與微信開放能力無縫對(duì)接。03開發(fā)者無需自建服務(wù)器，可直接使用平臺(tái)API。04云數(shù)據(jù)庫CloudBase提供的核心功能之一，提供基礎(chǔ)讀寫、聚合搜索、數(shù)據(jù)庫事務(wù)、實(shí)時(shí)推送等功能。云存儲(chǔ)CloudBase云存儲(chǔ)提供穩(wěn)定、安全、低成本、簡單易用的云端存儲(chǔ)服務(wù)，支持任意數(shù)量和形式的非結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)，例如圖片、文檔、音頻、視頻、文件等。

云函數(shù)使用CloudBase的云函數(shù)，可以以函數(shù)的形式運(yùn)行后端代碼，響應(yīng)SDK的調(diào)用或者HTTP請求。123微信云開發(fā)小程序技術(shù)架構(gòu)小程序前端開發(fā)使用HTML、CSS、JavaScript。利用WXML和WXSS構(gòu)建頁面結(jié)構(gòu)和樣式。調(diào)試和性能優(yōu)化小程序框架和運(yùn)行時(shí)組件庫和開發(fā)工具前端技術(shù)棧小程序技術(shù)架構(gòu)調(diào)試和性能優(yōu)化調(diào)試工具和日志輸出性能優(yōu)化小程序框架和運(yùn)行時(shí)基于JavaScript的框架一系列的

解析和執(zhí)行小程序的代碼API和組件組件庫和開發(fā)工具快速搭建界面集成開發(fā)環(huán)境（IDE）前端技術(shù)棧小程序后端開發(fā)主要使用服務(wù)器端語言和框架，如Node.js、Java、PHP等，通過接口和數(shù)據(jù)庫來實(shí)現(xiàn)數(shù)據(jù)的交互和存儲(chǔ)。小程序技術(shù)架構(gòu)安全和權(quán)限管理數(shù)據(jù)和用戶隱私的安全措施功能和資源進(jìn)行權(quán)限控制數(shù)據(jù)庫和緩存存儲(chǔ)和管理小程序的數(shù)據(jù)緩存技術(shù)數(shù)據(jù)接口和服務(wù)端開發(fā)數(shù)據(jù)接口后端服務(wù)端開發(fā)新建頁面文件本項(xiàng)目所有圖片素材放置在images文件夾下，并在images下面按圖片功能進(jìn)分文件夾放置，例如tabs文件，放置的是導(dǎo)航欄里的icon圖標(biāo)。新建6個(gè)頁面，分別是news新聞列表頁，newsDetail新聞詳情頁、goods產(chǎn)品頁、goodsDetail產(chǎn)品詳情頁、cart購物車頁面和profile個(gè)人信息頁。

小程序默認(rèn)導(dǎo)航欄是黑底白字的效果，可以通過app.json中的window屬性進(jìn)行重新配置來定義導(dǎo)航欄效果。屬性類型默認(rèn)值描述backgroundTextStylestringdark下拉loading的樣式，僅支持dark/lightnavigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色，如#000000navigationBarTitleTextstring

導(dǎo)航欄標(biāo)題文字內(nèi)容navigationBarTextStylestringwhite導(dǎo)航欄標(biāo)題顏色，僅支持black/white表

頁面配置選項(xiàng)導(dǎo)航欄設(shè)計(jì){

"pages":

[代碼略],

"window":

{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":

"#e60",

"navigationBarTitleText":

"梅園",

"navigationBarTextStyle":"white"}}導(dǎo)航欄設(shè)計(jì)【示例4-2】修改“梅園”小程序項(xiàng)目配置app.json方件，效果所下圖所示。感

謝

觀

看THANK項(xiàng)目四商城首頁模塊開發(fā)任務(wù)三商城首頁視圖設(shè)計(jì)Mallhomepageviewdesign任務(wù)描述項(xiàng)目四商城首頁模塊開發(fā)在確定好項(xiàng)目功能之后，接下來創(chuàng)建新的項(xiàng)目。并在新的項(xiàng)目下創(chuàng)建所需要的頁面文件。首頁效果圖如右所示：屬性類型默認(rèn)值描述pagePathstring是頁面路徑，必須在pages中先定義textstring是tab上按鈕文字iconPathstring否圖片路徑，icon大小限制為40kb，建議尺寸為81px*81px，不支持網(wǎng)絡(luò)圖片。當(dāng)position為top時(shí)，不顯示icon。selectedIconPathstring否選中時(shí)的圖片路徑，icon大小限制為40kb，建議尺寸為81px*81px，不支持網(wǎng)絡(luò)圖片。當(dāng)position為top時(shí)，不顯示icon。表

對(duì)象屬性值tabBar組件的設(shè)計(jì)如果小程序是一個(gè)多tab應(yīng)用（客戶端窗口的底部或頂部有tab欄可以切換頁面），可以通過tabBar配置項(xiàng)指定tab欄的表現(xiàn)，以及tab切換時(shí)顯示的對(duì)應(yīng)頁面。其中l(wèi)ist接受一個(gè)數(shù)組，只能配置最少2個(gè)、最多5個(gè)tab?！臼纠?-3】使用tabBar組件，完成“梅園”小程序底部導(dǎo)航，

實(shí)現(xiàn)頁面切換效果。效果所下圖所示。tabBar組件的設(shè)計(jì)swiper組件的設(shè)計(jì)swiper組件為滑塊視圖容器。通常用于圖片之間的切換播放，被形象地稱為輪播圖。swiper組件分成兩個(gè)部分：是外部的swiper組件；嵌套在swiper內(nèi)的swiper-item組件，并且也只能嵌套swiper-item組件。圖

輪播圖效果圖【示例4-4】“梅園”小程序首頁的輪播圖功能表

swiper組件屬性屬性類型默認(rèn)值必填描述indicator-dotsbooleanfalse否是否顯示面板指示點(diǎn)indicator-colorcolorrgba(0,0,0,.3)否指示點(diǎn)顏色indicator-active-colorcolor#000000否當(dāng)前選中的指示點(diǎn)顏色autoplaybooleanfalse否是否自動(dòng)切換currentnumber0否當(dāng)前所在滑塊的indexintervalnumber5000否自動(dòng)切換時(shí)間間隔durationnumber500否滑動(dòng)動(dòng)畫時(shí)長swiper組件的設(shè)計(jì)swiper組件可以設(shè)置的部分屬性如下表所示。作用：在WXML頁面中跳轉(zhuǎn)的導(dǎo)航。navigator組件的設(shè)計(jì)類型一：保留當(dāng)前跳轉(zhuǎn)，跳轉(zhuǎn)后可以返回當(dāng)前頁，它與wx.navigateTo跳轉(zhuǎn)效果是一樣的；

navigator組件類型二：關(guān)閉當(dāng)前頁跳轉(zhuǎn)，是無法返回當(dāng)前頁，它與wx.redirrectTo跳轉(zhuǎn)效果是一樣的；

類型三：跳轉(zhuǎn)底部標(biāo)簽導(dǎo)航指定的頁面，它與wx.switchTab跳轉(zhuǎn)效果是一樣的。

屬性類型默認(rèn)值描述targetstringself在哪個(gè)目標(biāo)上發(fā)生跳轉(zhuǎn)，默認(rèn)當(dāng)前小程序。Self：當(dāng)前小程序；miniProgram：其它小程序urlstring

當(dāng)前小程序內(nèi)的跳轉(zhuǎn)鏈接open-typestringnavigate跳轉(zhuǎn)方式。屬性值包括navigate、redirect、switchTab、reLaunch、navigateBack、exittargetstringself在哪個(gè)目標(biāo)上發(fā)生跳轉(zhuǎn)，默認(rèn)當(dāng)前小程序。Self：當(dāng)前小程序；miniProgram：其它小程序表

對(duì)象屬性值navigator組件的設(shè)計(jì)navigator組件【示例4-5】利用Flex彈性盒模型實(shí)現(xiàn)“梅園”小程序圖片導(dǎo)航功能。完成效果如下圖所示。圖

圖片導(dǎo)航效果彈性布局設(shè)計(jì)頁面scroll-view組件的設(shè)計(jì)view組件用來對(duì)頁面的結(jié)構(gòu)進(jìn)行布局，如果要在頁面中某一區(qū)域?qū)崿F(xiàn)滾動(dòng)效果，可以使用scroll-view組件。使用豎向滾動(dòng)時(shí)，需要給scroll-view一個(gè)固定高度，通過WXSS設(shè)置height。表

頁面配置選項(xiàng)屬性類型默認(rèn)值必填描述scroll-xbooleanfalse否允許橫向滾動(dòng)scroll-ybooleanfalse否允許縱向滾動(dòng)upper-thresholdnumber/string50否距頂部/左邊多遠(yuǎn)時(shí)，觸發(fā)scrolltoupper事件lower-thresholdnumber/string50否距底部/右邊多遠(yuǎn)時(shí)，觸發(fā)scrolltolower事件scroll-topnumber/string

否設(shè)置豎向滾動(dòng)條位置scroll-leftnumber/string

否設(shè)置橫向滾動(dòng)條位置scroll-into-viewstring

否值應(yīng)為某子元素id（id不能以數(shù)字開頭）。設(shè)置哪個(gè)方向可滾動(dòng)，則在哪個(gè)方向滾動(dòng)到該元素scroll-with-animationbooleanfalse否在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫過渡scroll-view組件的設(shè)計(jì)圖

“推薦美景”功能scroll-view組件的設(shè)計(jì)【示例4-6】利用scroll-view組件實(shí)現(xiàn)“梅園”小程序“推薦美景”功能，實(shí)現(xiàn)圖片橫向滾動(dòng)。完成效果如下圖所示。圖4-15公共樣式公共樣式的設(shè)計(jì)app.wxss是整個(gè)小程序的公共樣式表?？梢栽陧撁娼M件的class屬性上直接使用app.wxss中聲明的樣式規(guī)則。如果頁面有自己的樣式表，則會(huì)覆蓋公共樣式表用法跟標(biāo)準(zhǔn)css文件無異，支持.class、#id。公共樣式的設(shè)計(jì)【示例4-7】在“wintersweet”項(xiàng)目中，定義一個(gè)全局樣式，實(shí)現(xiàn)功能之間的灰色間隔。

.divide{

margin-top:20rpx;

}01打開app.wxss頁面，定義一個(gè)公共的樣式，實(shí)現(xiàn)頁面功能之間的間隔，在前面的例題中，頁面的顏色已經(jīng)設(shè)置為灰色，在這一步里只需要設(shè)置上邊距為20rpx即可。公共樣式的設(shè)計(jì)【示例4-7】在“wintersweet”項(xiàng)目中，定義一個(gè)全局樣式，實(shí)現(xiàn)功能之間的灰色間隔。

02步驟2：打開index.wxml頁面，在圖片導(dǎo)航和推薦美圖之間，實(shí)現(xiàn)app.wxss里定義的樣式。<view

class="divide"></view>感

謝

觀

看THANK項(xiàng)目四商城首頁模塊開發(fā)任務(wù)四商城首頁動(dòng)畫的實(shí)現(xiàn)Implementationofthemallhomepageanimation項(xiàng)目四商城首頁模塊開發(fā)任務(wù)描述在小程序中，通?？梢允褂肅SS漸變和CSS動(dòng)畫來創(chuàng)建簡易的界面動(dòng)畫。同時(shí)，還可以使用wx.createAnimation接口來動(dòng)態(tài)創(chuàng)建簡易的動(dòng)畫效果。

簡單來說，整個(gè)動(dòng)畫實(shí)現(xiàn)過程需要以下三步：（1）創(chuàng)建一個(gè)動(dòng)畫實(shí)例

animation。（2）調(diào)用實(shí)例的方法來描述動(dòng)畫。（3）最后通過動(dòng)畫實(shí)例的export方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的

animation

屬性。屬性類型默認(rèn)值描述durationnumber400動(dòng)畫持續(xù)時(shí)間，單位mstimingFunctionstringlinear動(dòng)畫的效果delaynumber0動(dòng)畫延遲時(shí)間，單位mstransformOriginstring'50%50%0'允許改變被轉(zhuǎn)換元素的位置表

wx.createAnimation接口屬性Animation動(dòng)畫實(shí)例表

wx.createAnimation接口屬性屬性類型默認(rèn)值描述durationnumber400動(dòng)畫持續(xù)時(shí)間，單位mstimingFunctionstringlinear動(dòng)畫的效果delaynumber0動(dòng)畫延遲時(shí)間，單位mstransformOriginstring'50%50%0'允許改變被轉(zhuǎn)換元素的位置Animation動(dòng)畫實(shí)例Animation動(dòng)畫實(shí)例動(dòng)畫從頭到尾的速度是相同的linear動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢ease動(dòng)畫以低速開始ease-in動(dòng)畫以低速開始和結(jié)束ease-in-out動(dòng)畫一直保持開始狀態(tài)，最后一幀跳到結(jié)束狀態(tài)step-end動(dòng)畫以低速結(jié)束ease-out動(dòng)畫第一幀就跳至結(jié)束狀態(tài)直到結(jié)束step-start

timingFunction從小程序基礎(chǔ)庫2.9.0開始支持一種更友好的動(dòng)畫創(chuàng)建方式，用于代替舊的wx.createAnimation。它具有更好的性能和更可控的接口。在頁面或自定義組件中，當(dāng)需要進(jìn)行關(guān)鍵幀動(dòng)畫時(shí)，可以使用this.animate接口：this.animate(selector,keyframes,duration,callback)屬性類型必填描述selectorString是選擇器（同SelectorQuery.select的選擇器格式）keyframesArray是關(guān)鍵幀信息durationNumber是動(dòng)畫持續(xù)時(shí)長（毫秒為單位）callbackfunction否動(dòng)畫完成后的回調(diào)函數(shù)表

this.animate接口屬性關(guān)鍵幀動(dòng)畫this.animate('#container',[{opacity:1.0,rotate:0,backgroundColor:'#FF0000'},{opacity:0.5,rotate:45,backgroundColor:'#00FF00'},{opacity:0.0,rotate:90,backgroundColor:'#FF0000'},],5000,function(){this.clearAnimation('#container',{opacity:true,rotate:true},function(){console.log("清除了#container上的opacity和rotate屬性")})}.bind(this))關(guān)鍵幀動(dòng)畫核心功能：商品展示是電子商城吸引用戶的關(guān)鍵。購物體驗(yàn)：提供類似現(xiàn)實(shí)超市的商品瀏覽體驗(yàn)。視覺美化：通過商品展示增加商品的吸引力。技術(shù)實(shí)現(xiàn)：采用彈性布局展示最新產(chǎn)品。圖4-18最新產(chǎn)品效果圖實(shí)現(xiàn)商品動(dòng)畫效感

謝

觀

看THANK項(xiàng)目五新聞頁面模塊開發(fā)任務(wù)一新聞頁面視圖層設(shè)計(jì)Newspageviewlayerdesign在小程序開發(fā)中，經(jīng)常會(huì)遇到新聞模塊需求，包括新聞列表、新聞詳情、新聞評(píng)價(jià)等，小程序?yàn)樾侣勀K提供了各類API和組件。掌握了這些API和組件的使用，即可完成新聞模塊功能的開發(fā)。本項(xiàng)目將通過“新聞列表、新聞詳情頁面”，講解公共數(shù)據(jù)的定義、詳情數(shù)據(jù)的獲取、收藏功能、背景音樂API、分享API等功能的實(shí)現(xiàn)。項(xiàng)目五新聞頁面模塊開發(fā)任務(wù)描述新聞功能開發(fā)流程01021.需求分析

在開發(fā)新聞?lì)^條小程序之前，我們需要對(duì)目標(biāo)用戶的需求進(jìn)行深入分析：新聞內(nèi)容、快速閱讀、個(gè)性化推薦和互動(dòng)需求等。0304052.功能設(shè)計(jì)基于以上需求分析，我們可以進(jìn)行界面設(shè)計(jì)、功能設(shè)計(jì)、數(shù)據(jù)庫設(shè)計(jì)3.功能開發(fā)在開發(fā)環(huán)節(jié)，需要使用微信小程序開發(fā)工具和相關(guān)技術(shù)，后端開發(fā)、前端開發(fā)、接口對(duì)接。4.測試與優(yōu)化完成開發(fā)后，需要進(jìn)行嚴(yán)格的測試，包括單元測試、集成測試和性能測試等。5.上線與推廣經(jīng)過測試和優(yōu)化后，可以將新聞小程序上線到微信開放平臺(tái)。新聞列表頁面分成篩選區(qū)域和卡片式新聞區(qū)域兩部分。篩選區(qū)域主要用于新聞分類篩選和時(shí)間排序功能，卡片式新聞區(qū)域用于顯示新聞列表。本項(xiàng)目配套源代碼提供了新聞頁面，讀者可以使用微信開發(fā)者工具打開該頁面，查看項(xiàng)目的運(yùn)行結(jié)果，如圖所示。新聞列表頁面設(shè)計(jì)卡片式新聞篩選區(qū)域新聞列表頁面分成篩選區(qū)域和卡片式新聞區(qū)域兩部分。篩選區(qū)域主要用于新聞分類篩選和時(shí)間排序功能，卡片式新聞區(qū)域用于顯示新聞列表。本項(xiàng)目配套源代碼提供了新聞頁面，讀者可以使用微信開發(fā)者工具打開該頁面，查看項(xiàng)目的運(yùn)行結(jié)果，如圖所示。新聞列表頁面設(shè)計(jì)<viewclass="card"

><viewclass="card-top"></view>

<imageclass="cardimg"src='/images/news1.jpg'mode='aspectFill'></image><textclass='card-desc'>“蘿崗香雪”曾是羊城八景之一</text><viewclass="card-detail"><textclass='card-read'bindtap='handleDetail'data-id=''>查看詳情</text></view></view>新聞列表頁面設(shè)計(jì)

在分析了頁面結(jié)構(gòu)之后，下面開始編寫新聞列表頁面結(jié)構(gòu)和樣式，首先在pages/news/news.wxml文件中編寫頁面布局代碼，框架代碼如下：課后練習(xí)

練一練：畫出圖中新聞列表頁面的設(shè)計(jì)圖，使用小程序常用的Flex布局方式實(shí)現(xiàn)該頁面。感

謝

觀

看THANK項(xiàng)目五新聞頁面模塊開發(fā)任務(wù)二新聞列表頁面的實(shí)現(xiàn)Newslistpageimplementation通過前面的學(xué)習(xí)，讀者已經(jīng)知道數(shù)據(jù)可以定義在JS文件的data對(duì)象中。當(dāng)數(shù)據(jù)較多時(shí)，或者當(dāng)沒有條件提供數(shù)據(jù)接口時(shí)，可以采用模擬數(shù)據(jù)進(jìn)行代替。例如，可以將數(shù)據(jù)定義在utils/common.js文件中。項(xiàng)目五新聞頁面模塊開發(fā)任務(wù)描述MOCK數(shù)據(jù)使用Mock數(shù)據(jù)可以保護(hù)真實(shí)數(shù)據(jù)源中的敏感信息，避免因?yàn)殚_發(fā)和測試而導(dǎo)致真實(shí)數(shù)據(jù)泄露的風(fēng)險(xiǎn)。真實(shí)數(shù)據(jù)的保護(hù)Mock數(shù)據(jù)能夠提供可用的虛擬數(shù)據(jù)，使得開發(fā)人員和測試人員能夠在沒有完整的系統(tǒng)和真實(shí)數(shù)據(jù)的情況下進(jìn)行工作?？焖匍_發(fā)和測試Mock數(shù)據(jù)允許前后端團(tuán)隊(duì)并行開發(fā)，以提高整個(gè)開發(fā)過程的效率。獨(dú)立開發(fā)和測試0201Mock數(shù)據(jù)優(yōu)點(diǎn)03

Mock數(shù)據(jù)是指在軟件開發(fā)過程中使用的一種模擬數(shù)據(jù)，它用于模擬真實(shí)數(shù)據(jù)源的數(shù)據(jù)，具有相似的數(shù)據(jù)結(jié)構(gòu)和字段。這種數(shù)據(jù)通常在真實(shí)數(shù)據(jù)不可用或無法獲取時(shí)使用，以便在開發(fā)、測試和演示過程中提供可用的虛擬數(shù)據(jù)。模擬數(shù)據(jù)的定義其中，id表示每條數(shù)據(jù)的編號(hào)，title表示新聞的標(biāo)題，cate_id表示新聞分類編號(hào)，poster表示卡片新聞的貼圖，desc表示卡片新聞的摘要，content表示新聞內(nèi)容詳情，views表示瀏覽數(shù)量，favorites表示收藏?cái)?shù)量，addtime表示新聞添加時(shí)間，添加時(shí)間引入了小程序默認(rèn)的util文件中定義的時(shí)間格式，使用Date()函數(shù)獲取當(dāng)前系統(tǒng)時(shí)間。bgmusic表示背景音樂，包括了音樂地址和音樂名稱。

下面提供了1條新聞列表數(shù)據(jù)作為示例。讀者可以根據(jù)視圖界面的功能，自行添加或修改新聞內(nèi)容。模擬數(shù)據(jù)的定義

import

util

from

'../utils/util'const

news=[

{

id:'01',

title:'最美梅花園',

cate_id:'1',

poster:'/images/news/news1.jpg',

desc:'“蘿崗香雪”曾是羊城八景之一',

content:

'不同種類的梅花將陸陸續(xù)續(xù)開放兩個(gè)多月...',

views:'1250',

//瀏覽數(shù)量

favorites:

'63',

//收藏?cái)?shù)量

addtime:util.formatTime(new

Date()),

bgmusic:{

url:'/music/4.mp3',title:'四季歌'}}]模擬數(shù)據(jù)的定義

constnews=[代碼略] exports.getNewsList=()=>{ letnewslist=[] for(vari=0;i<news.length;i++){ letobj={} obj.id=news[i].id obj.title=news[i].title obj.poster=news[i].poster obj.desc=news[i].desc obj.views=news[i].views obj.favorites=news[i].favorites obj.content=news[i].content obj.addtime=news[i].addtime obj.bgmusic=news[i].bgmusic newslist.push(obj) } returnnewslist; }

getNewsList()函數(shù)將前面所定義好的news數(shù)據(jù)使用for循環(huán)的方式讀取，調(diào)用push()方法寫到newslist數(shù)組里，最后返回newslist數(shù)組。模擬數(shù)據(jù)的定義

exports.getNewsDetail=(newsid)=>{ letnewsDetail={}; for(vari=0;i<news.length;i++){ if(newsid==news[i].id){ newsDetail=news[i]; break; } } returnnewsDetail; }

在utils/common.js文件中定義getNewsDetail()函數(shù)通過傳入的參數(shù)newsid來獲取需要讀取的新聞詳情。新聞列表頁面數(shù)據(jù)綁定

varcommon=require('../../utils/common.js') Page({ data:{

newsList:[] }, on