項(xiàng)目五新聞頁(yè)面模塊開(kāi)發(fā)任務(wù)三新聞詳情頁(yè)面的實(shí)現(xiàn)Newsdetailspageimplementation新聞詳情頁(yè)面pages/newsDetail/newsDetail.wxml，詳情頁(yè)面包含了收藏、分享、背景音樂(lè)等功能?？梢詫⒃斍轫?yè)分為四個(gè)部分：標(biāo)題區(qū)域、摘要區(qū)域、圖片區(qū)域和內(nèi)容區(qū)域。標(biāo)題區(qū)域包含新聞標(biāo)題、時(shí)間、收藏和背景音樂(lè)；內(nèi)容區(qū)域包括新聞內(nèi)容和轉(zhuǎn)發(fā)按鈕。項(xiàng)目五新聞頁(yè)面模塊開(kāi)發(fā)任務(wù)描述新聞詳情頁(yè)面的設(shè)計(jì)

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

Page({ data:{

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

letid=options.id

letresult=common.getNewsDetail(id)

this.setData({

newsDetail:result

})

}

})

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

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

用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)：監(jiān)聽(tīng)用戶點(diǎn)擊頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕或右上角菜單“轉(zhuǎn)發(fā)”按鈕的行為，并自定義轉(zhuǎn)發(fā)內(nèi)容。只有定義了onShareAppMessage事件處理函數(shù)，右上角菜單才會(huì)顯示“轉(zhuǎn)發(fā)”按鈕。轉(zhuǎn)發(fā)分享功能的實(shí)現(xiàn)屬性說(shuō)明默認(rèn)值title自定義標(biāo)題，即朋友圈列表頁(yè)上顯示的標(biāo)題當(dāng)前小程序名稱query自定義頁(yè)面路徑中攜帶的參數(shù)，如path?a=1&b=2的“?”后面部分當(dāng)前頁(yè)面路徑攜帶的參數(shù)imageUrl自定義圖片路徑，可以是本地文件或者網(wǎng)絡(luò)圖片。支持PNG及JPG，顯示圖片長(zhǎng)寬比是1:1。默認(rèn)使用小程序Logo表onShareTimeline函數(shù)參數(shù)

轉(zhuǎn)發(fā)到朋友圈：onShareTimeline()監(jiān)聽(tīng)右上角菜單“分享到朋友圈”按鈕的行為，并自定義分享內(nèi)容。只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示“分享到朋友圈”按鈕。事件處理函數(shù)返回一個(gè)Object，用于自定義分享內(nèi)容，不支持自定義頁(yè)面路徑。wx.getBackgroundAudioManager函數(shù)可以獲取全局唯一的背景音頻管理器。小程序切入后臺(tái)，如果音頻處于播放狀態(tài)，可以繼續(xù)播放。但是后臺(tái)狀態(tài)不能通過(guò)調(diào)用API操縱音頻的播放狀態(tài)。若需要在小程序切后臺(tái)后繼續(xù)播放音頻，需要在app.json中配置requiredBackgroundModes屬性。開(kāi)發(fā)版和體驗(yàn)版上可以直接生效，正式版還需通過(guò)審核。背景音樂(lè)的實(shí)現(xiàn)本項(xiàng)目案例講解了新聞列表頁(yè)、詳情頁(yè)面創(chuàng)建，列表頁(yè)與詳情頁(yè)的數(shù)據(jù)對(duì)接。新聞列表頁(yè)嵌入了列表