項目五新聞頁面模塊開發任務三新聞詳情頁面的實現Newsdetailspageimplementation新聞詳情頁面pages/newsDetail/newsDetail.wxml，詳情頁面包含了收藏、分享、背景音樂等功能。可以將詳情頁分為四個部分：標題區域、摘要區域、圖片區域和內容區域。標題區域包含新聞標題、時間、收藏和背景音樂；內容區域包括新聞內容和轉發按鈕。項目五新聞頁面模塊開發任務描述新聞詳情頁面的設計

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

Page({ data:{

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

letid=options.id

letresult=common.getNewsDetail(id)

this.setData({

newsDetail:result

})

}

})

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

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

用戶點擊右上角轉發：監聽用戶點擊頁面內轉發按鈕或右上角菜單“轉發”按鈕的行為，并自定義轉發內容。只有定義了onShareAppMessage事件處理函數，右上角菜單才會顯示“轉發”按鈕。轉發分享功能的實現屬性說明默認值title自定義標題，即朋友圈列表頁上顯示的標題當前小程序名稱query自定義頁面路徑中攜帶的參數，如path?a=1&b=2的“?”后面部分當前頁面路徑攜帶的參數imageUrl自定義圖片路徑，可以是本地文件或者網絡圖片。支持PNG及JPG，顯示圖片長寬比是1:1。默認使用小程序Logo表onShareTimeline函數參數

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