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

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

初識微信小程序觸手可及應用體積小無需安裝無需卸載特

點電商購物餐飲服務旅游出行金融服務教育培訓生活服務

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

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

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

進入到小程序注冊填寫信息頁面，填寫的這個郵箱必須沒有綁定過個人微信，也沒有注冊過微信公眾平臺下的訂閱號或者服務號。碼開發(fā)與提交工作。項目一初識微信小程序Next》

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

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

謝

觀

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

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

謝

觀

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

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

謝

觀

看THANK項目二小程序編程基礎任務一小程序的執(zhí)行順序MiniProgram小程序包含哪些項目文件，每一個頁面包含哪些文件，把它寫在以下橫線里？想一想：Next》在app.js頁面，定義一個App()函數(shù)，還可用來注冊一個微信小程序。App()必須在app.js中調(diào)用，必須調(diào)用且只能調(diào)用一次。不然會出現(xiàn)無法預期的后果。App()函數(shù)里有一些生命周期函數(shù)。Next》小程序注冊函數(shù)App()屬性類型必填說明onLaunchfunction否生命周期回調(diào)——監(jiān)聽小程序初始化。onShowfunction否生命周期回調(diào)——監(jiān)聽小程序啟動或切前臺。onHidefunction否生命周期回調(diào)——監(jiān)聽小程序切后臺。onErrorfunction否錯誤監(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("啟動onLaunch")},onShow(options){console.log("啟動onShow")},onHide(){console.log("啟動onHide")},onError(msg){console.log(msg)},globalData:'Iamglobaldata'})小程序注冊函數(shù)App()執(zhí)行結(jié)果如下圖所示。Page(Objectobject)注冊小程序中的一個頁面。接受一個

Object

類型參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。頁面注冊函數(shù)Page()Next》屬性類型說明dataObject頁面的初始數(shù)據(jù)optionsObject頁面的組件選項，同中的options，需要基礎庫版本behaviorsStringArray類似于mixins和traits的組件間代碼復用機制，參見，需要基礎庫版本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)聽用戶下拉動作onReachBottomfunction頁面上拉觸底事件的處理函數(shù)onShareAppMessagefunction用戶點擊右上角轉(zhuǎn)發(fā)其他any開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到Object參數(shù)中，在頁面的函數(shù)中用this可以訪問。這部分屬性會在頁面實例創(chuàng)建時進行一次深拷貝。頁面注冊函數(shù)Page()Next》感

謝

觀

看THANK項目二小程序編程基礎項目二小程序編程基礎任務二構建頁面數(shù)據(jù)MiniProgram定義data數(shù)據(jù)：在頁面JS文件page函數(shù)中第一項為data屬性，在data中定義本頁面邏輯處理需要用到的數(shù)據(jù)，其中很大一部分數(shù)據(jù)將用WXML文件的數(shù)據(jù)渲染。因為小程序JS文件是基于JavaScript編寫的，所以在JS文件中可以定義字符串、數(shù)字、布爾值、對象和數(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中的動態(tài)數(shù)據(jù)均來自對應Page的data。數(shù)據(jù)綁定使用Mustache語法即{{}}語法將變量包起來。Next》數(shù)據(jù)綁定在index.wxml頁面數(shù)據(jù)綁定，示例代碼如下：<view>{{message}}</view>組件屬性：在小程序組件中,properties是組件的對外屬性,用來接收外界傳遞到組件中的數(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>關鍵字：true：boolean類型的true，代表真值。false：boolean類型的false，代表假值。Next》數(shù)據(jù)綁定在index.wxml頁面數(shù)據(jù)綁定，示例代碼如下：<checkboxchecked="{{false}}"></checkbox>特別注意：不要直接寫checked="false"，其計算結(jié)果是一個字符串，轉(zhuǎn)成boolean類型后代表真值。感

謝

觀

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

wx:for

控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復渲染該組件。默認數(shù)組的當前項的下標變量名默認為

index，數(shù)組當前項的變量名默認為

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

{message:'foo'},

{message:'bar'}

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

wx:for-item

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

wx:for-index

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

wx:for

用在<block/>標簽上，以渲染一個包含多節(jié)點的結(jié)構塊。Next》blockwx:for的使用<block

wx:for="{{[1,

2,

3]}}"

wx:key="*this">

<view>

{{index}}:

{{item}}

</view></block>將

wx:for

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

謝

觀

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

hidden="{{flag}}">

flag為true值時，隱藏評論</view>Page({

data:

{

flag:true

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

謝

觀

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

bind

后也可以緊跟一個冒號，其含義不變，如

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>事件分為冒泡事件和非冒泡事件：冒泡事件：當一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。非冒泡事件：當一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞。Next》事件分類運行環(huán)境渲染層touchstart手指觸摸動作開始touchmove手指觸摸后移動touchcancel手指觸摸動作被打斷，如來電提醒，彈窗touchend手指觸摸動作結(jié)束tap手指觸摸后馬上離開longpress手指觸摸后，超過350ms再離開，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個事件，tap事件將不被觸發(fā)longtap手指觸摸后，超過350ms再離開（推薦使用longpress事件代替）transitionend會在WXSStransition或wx.createAnimation動畫結(jié)束后觸發(fā)animationstart會在一個WXSSanimation動畫開始時觸發(fā)animationiteration會在一個WXSSanimation一次迭代結(jié)束時觸發(fā)animationend會在一個WXSSanimation動畫完成時觸發(fā)touchforcechange在支持3DTouch的iPhone設備，重按時會觸發(fā)WXML的冒泡事件列表：觸摸類事件支持捕獲階段。捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達節(jié)點的順序與冒泡階段恰好相反。需要在捕獲階段監(jiān)聽事件時，可以采用capture-bind、capture-catch關鍵字，后者將中斷捕獲階段和取消冒泡階段。Next》事件的捕獲階段(1)捕獲事件capture-bind開頭，點擊哪個事件，就觸發(fā)哪個和自己包裹的所有事件。<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>觸摸類事件支持捕獲階段。捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達節(jié)點的順序與冒泡階段恰好相反。需要在捕獲階段監(jiān)聽事件時，可以采用capture-bind、capture-catch關鍵字，后者將中斷捕獲階段和取消冒泡階段。Next》事件的捕獲階段（2）取消冒泡、捕獲事件capture-catch開頭，不管怎么點擊，都只觸發(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項目二小程序編程基礎項目三小程序常用組件Flexelasticmodellayout任務一Flex彈性模型布局Flex布局是繼標準流布局、浮動布局、定位布局后的第四種布局方式。這種方式可以非常優(yōu)雅的實現(xiàn)子元素居中或均勻分布，甚至可以隨著窗口縮放自動適應。Flex布局在瀏覽器中存在一定的兼容性，在小程序中，是完全兼容Flex布局的，并且微信官方也是推薦使用Flex布局的。下面就來詳細的講下Flex布局。項目三小程序常用組件任務描述Flex彈性模型布局彈性容器：包含著彈性項目的父元素。彈性項目(Flexitem)：彈性容器的每個子元素都稱為彈性項目。軸(Axis)：每個彈性框布局包含兩個軸。方向(Direction)：可以通過flex-direction來確定主軸和側(cè)軸的方向。Flex彈性模型布局傳統(tǒng)的布局解決方案Flex容器屬性Flex項目屬性小程序Flex布局Flex-directionFlex-wrapjustity-contentalign-contentflex-flowalign-itemsorderflex-growflex-shrinkflex-basisflexalign-selfFlex布局相關屬性

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

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

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

換行：默認情況下，元素個數(shù)如果超過一定數(shù)量，那么在一行當中就排列不下。此時flex默認的處理方式是壓縮元素，使其能在一行中排列下來。可以通過flex-wrap來改變排列的方式。圖換行屬性屬性說明nowrap不換行。默認方式wrap換行wrap-reverse換行，但是第一行會在下面。Flex布局相關屬性

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

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

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

謝

觀

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

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

昵稱、打卡名稱

--><view

class="card

mt20"></view><!--

打卡地點

--><view

class="card

mt20"></view>

<!--

打卡時間：時間選擇器、重復日期

--><view

class="card

mt20"></view><!--

新建按鈕

--><view

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

打卡標簽

--><view

class="list">

</view>案例初始化

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

"pages":[

"pages/card/card"]}

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

"navigationBarTitleText":

"天天打卡",

"navigationBarBackgroundColor":

"#15a8e2"}感

謝

觀

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

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

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

//

設置任務名稱

bindKeyInput:

function

(e)

{

this.setData({

"cardName"

:

e.detail.value});

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

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

{

"scope.userLocation":

{

"desc":

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

}}}

打卡時間-picker組件

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

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

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

謝

觀

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

表

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

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

謝

觀

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

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

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

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

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

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

頁面配置選項導航欄設計{

"pages":

[代碼略],

"window":

{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":

"#e60",

"navigationBarTitleText":

"梅園",

"navigationBarTextStyle":"white"}}導航欄設計【示例4-2】修改“梅園”小程序項目配置app.json方件，效果所下圖所示。感

謝

觀

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

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

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

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

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

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

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

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

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

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

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

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

否設置豎向滾動條位置scroll-leftnumber/string

否設置橫向滾動條位置scroll-into-viewstring

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

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

.divide{

margin-top:20rpx;

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

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

class="divide"></view>感

謝

觀

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

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

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

animation

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

wx.createAnimation接口屬性Animation動畫實例表

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

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

this.animate接口屬性關鍵幀動畫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))關鍵幀動畫核心功能：商品展示是電子商城吸引用戶的關鍵。購物體驗：提供類似現(xiàn)實超市的商品瀏覽體驗。視覺美化：通過商品展示增加商品的吸引力。技術實現(xiàn)：采用彈性布局展示最新產(chǎn)品。圖4-18最新產(chǎn)品效果圖實現(xiàn)商品動畫效感

謝

觀

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

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

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

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

謝

觀

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

Mock數(shù)據(jù)是指在軟件開發(fā)過程中使用的一種模擬數(shù)據(jù)，它用于模擬真實數(shù)據(jù)源的數(shù)據(jù)，具有相似的數(shù)據(jù)結(jié)構和字段。這種數(shù)據(jù)通常在真實數(shù)據(jù)不可用或無法獲取時使用，以便在開發(fā)、測試和演示過程中提供可用的虛擬數(shù)據(jù)。模擬數(shù)據(jù)的定義其中，id表示每條數(shù)據(jù)的編號，title表示新聞的標題，cate_id表示新聞分類編號，poster表示卡片新聞的貼圖，desc表示卡片新聞的摘要，content表示新聞內(nèi)容詳情，views表示瀏覽數(shù)量，favorites表示收藏數(shù)量，addtime表示新聞添加時間，添加時間引入了小程序默認的util文件中定義的時間格式，使用Date()函數(shù)獲取當前系統(tǒng)時間。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ù)開放兩個多月...',

views:'1250',

//瀏覽數(shù)量

favorites:

'63',

//收藏數(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