微信小程序開發(fā)項目實戰(zhàn)（微課版）課件 項目5 新聞頁面模塊開發(fā)

項目五新聞頁面模塊開發(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ā)者工具打開該頁面，查看項目的運行結果，如圖所示。新聞列表頁面設計卡片式新聞篩選區(qū)域新聞列表頁面分成篩選區(qū)域和卡片式新聞區(qū)域兩部分。篩選區(qū)域主要用于新聞分類篩選和時間排序功能，卡片式新聞區(qū)域用于顯示新聞列表。本項目配套源代碼提供了新聞頁面，讀者可以使用微信開發(fā)者工具打開該頁面，查看項目的運行結果，如圖所示。新聞列表頁面設計<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>新聞列表頁面設計

在分析了頁面結構之后，下面開始編寫新聞列表頁面結構和樣式，首先在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ù)結構和字段。這種數(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:[] }, onLoad:function(options){

letnewsList=common.getNewsList()

this.setData({

newsList:newsList

}) }, })

首先通過加載/utils/common.js里的模擬數(shù)組news里的數(shù)據(jù)來顯示新聞列表。打開pages/news/news.js頁面，使用require()方法將/utils/common.js文件引入。篩選功能的設計圖

篩選效果圖

新聞分類列表圖

按時間分類

篩選功能可以對新聞數(shù)據(jù)分類，以便更容易地理解和管理，并從中抽取出有用的信息，本案例分成兩種方式篩選，一種是按新聞分類，另外一種按照時間排序，效果如下圖所示。篩選功能的實現(xiàn)

<viewclass="filter"> <viewclass="filter-tab"></view> <viewclass="filter-content"></view> <viewclass="filter-shadow"></view>

</view>

打開pages/news/news.wxml，篩選功能是在新聞列表的上部，所以需要將代碼放置在頁面的上部，將篩選功能分成三個容器，class為filter-tab表示篩選條件，class為filter-content表示篩選區(qū)域，class為filter-shadow篩選下面的陰影部分。下拉刷新示例

啟用下拉刷新有兩種方式，一種是全局開啟下拉刷新，在app.json的window節(jié)點中，將enablePullDownRefresh設置為true，開啟之后小程序所有的頁面的具有下拉刷新的功能。一種是局部開啟下拉刷新，在單個頁面的.json配置文件中，將enablePullDownRefresh設置為true，則單個頁面具有下拉刷新的作用。backgroundColor配置下拉刷新窗口的背景顏色，僅支持16進制的顏色值。backgroundTextStyle配置下拉刷新loading的樣式，僅支持dark和light。上拉觸底示例data:

{

pagenum:

1,

//初始頁默認值為1

[代碼略]}

在小程序的開發(fā)過程中，上拉加載是一種十分常見的加載效果，常用于上拉下一頁數(shù)據(jù)。上拉加載的本質(zhì)是頁面觸底，或者快要觸底時的動作。在微信小程序中，通過函數(shù)onReachBottom:function(){}實現(xiàn)上拉加載。上拉觸底示例

onReachBottom()

{

var

that=this;

var

pagenum

=

that.data.pagenum

+

1;

//獲取當前頁數(shù)并加1

let

newsdata

=

common.getNewsList()

that.setData({

pagenum:

pagenum,

//更新當前頁數(shù)

newsList:

[...this.data.newsList,

...newsdata

]

})

},

編寫pages/news/news.js文件代碼。onReachBottom()函數(shù)可以監(jiān)聽用戶上拉觸底事件，Javascript中“...”是擴展運算符(...)可在函數(shù)調(diào)用/數(shù)組構造時,將數(shù)組表達式或者string在語法層面展開；還可以在構造對象時,將對象表達式按key-value的方式展開。例如在本案例中：頁面跳轉API屬性類型必填說明urlstring是需要跳轉的應用內(nèi)非tabBar的頁面的路徑(代碼包路徑)eventsObject否頁面間通信接口，用于監(jiān)聽被打開頁面發(fā)送到當前頁面的數(shù)據(jù)。successfunction否接口調(diào)用成功的回調(diào)函數(shù)failfunction否接口調(diào)用失敗的回調(diào)函數(shù)completefunction否接口調(diào)用結束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）表wx.navigateTo參數(shù)列表

頁面之間的跳轉有多種方式，其中wx.navigateTo(Objectobject)可以跳轉之后，保留當前頁面，跳轉到應用內(nèi)的某個頁面。但是不能跳到tabbar頁面。使用wx.navigateBack可以返回到原頁面，小程序中頁面棧最多十層。頁面跳轉API<textclass='card-read'bindtap='handleDetail'data-id='{{news.id}}'>查看詳情</text>

handleDetail:function(e){

let

id=e.currentTarget.dataset.id;

wx.navigateTo({

url:'../newsDetail/newsDetail?id='+id

})

}

在新聞列表頁面pages/news/news.wxml頁面，點擊“查看詳情”進入到在pages/news/news.wxml文件中為“查看詳情”添加事件綁定，具體代碼如下。

在pages/newsDetail/newsDetail.js文件中添加getnewsdetail事件處理函數(shù)，具體代碼如下：感

謝

觀

看THANK項目五新聞頁面模塊開發(fā)任務三新聞詳情頁面的實現(xiàn)Newsdetailspageimplementation新聞詳情頁面pages/newsDetail/newsDetail.wxml，詳情頁面包含了收藏、分享、背景音樂等功能?？梢詫⒃斍轫摲譃樗膫€部分：標題區(qū)域、摘要區(qū)域、圖片區(qū)域和內(nèi)容區(qū)域。標題區(qū)域包含新聞標題、時間、收藏和背景音樂；內(nèi)容區(qū)域包括新聞內(nèi)容和轉發(fā)按鈕。項目五新聞頁面模塊開發(fā)任務描述新聞詳情頁面的設計

打開pages/newsDetail/newsDetail.wxml文件中編寫代碼，在時間一欄里放置三個圖片作為按鈕，其中收藏和取消收藏功能需要兩張圖片的切換，實現(xiàn)新聞詳情頁面的布局。獲取對應的詳情數(shù)據(jù) varcommon=require('../../utils/common.js')

Page({ data:{

newsDetail:{} }, onLoad:function(options){

letid=options.id

letresult=common.getNewsDetail(id)

this.setData({

newsDetail:result

})

}

})

在前面實現(xiàn)了新聞列表與新聞詳情頁的跳轉，在跳轉的同時，傳遞了新聞ID數(shù)據(jù)，代碼在pages/news/news.wxml中已經(jīng)定義data-id='{{news.id}}'。但是仍需在newsDetail頁面根據(jù)傳遞過來的參數(shù)，獲取具體對應的新聞詳情。實現(xiàn)新聞詳情頁面的收藏和取消收藏功能。打開pages/newsDetail/newsDetail.wxml文件，為收藏圖片添加條件渲染，根據(jù)isCollected的值判斷是否有收藏。分別為兩張圖片綁定取消收藏和添加收藏事件。收藏功能的實現(xiàn)<imagewx:if="{{isCollected}}"bindtap="cancelCollected"src="/images/collection.png"></image><imagewx:elsebindtap="addCollected"src="/images/collection-anti.png"></image>轉發(fā)分享功能的實現(xiàn)

按鈕轉發(fā)功能：通過為button組件設置屬性open-type="share"，可以在?戶點擊按鈕后觸發(fā)用戶轉發(fā)事件。pages/newsDetail/newsDetail.wxml頁面，在轉發(fā)按鈕上添加open-type屬性。轉發(fā)分享功能的實現(xiàn)表onShareAppMessage參數(shù)列表屬性類型說明fromString轉發(fā)事件來源。button：頁面內(nèi)轉發(fā)按鈕；menu：右上角轉發(fā)菜單targetObject如果from值是button，則target是觸發(fā)這次轉發(fā)事件的button，否則為undefinedwebViewUrlString