yuedu的詳情頁 · 小程序

[TOC] # 總結 > 1.` wx.navigateTo` 跳轉事件，通過`id`將頁面從從yuedu跳轉到yuedu-detail > 2. 獲取數據 const local = require("../../../data/local"); > 3. 音樂播放的監聽可將監聽變量存入app全局中，（頁面有周期性，每次加載頁面將重新運行周期） # yuedu-detail ## yuedu-detail.js ``` //獲取data里的數據 const local = require("../../../data/local"); //獲取app里的data 即globalData const app = getApp(); Page({ /** - 頁面的初始數據 */ data: { // 音樂的播放初始狀態 isPlay: false }, /** - 生命周期函數--監聽頁面加載 */ onLoad: function (options) { var id = options.id; var data = local.postList[options.id]; this.setData({ data, postId: id, music: local.postList[options.id].music }); this.onMusic(); // 進入頁面退出頁面音樂播放按鈕一致 //判斷g_isPlay是否為真 g_isPlay的Boolean值由音樂監聽判斷，當前id與頁面id是否一致，當id一致時即進入的是相同的頁面，音樂顯示為播放，當不一致時顯示為停止 if (app.globalData.g_isPlay && app.globalData.g_currentId == id) { this.setData({ isPlay: true }); } }, // 監聽音樂播放 onMusic() { var self = this; //監聽音樂播放 wx.onBackgroundAudioPlay((result) => { self.setData({ isPlay: true }); //當頁面監聽到音樂播放時定義監聽變量值 app.globalData.g_isPlay = true; app.globalData.g_currentId = self.data.postId; }); //監聽音樂暫停。 wx.onBackgroundAudioPause((result) => { self.setData({ isPlay: false }); app.globalData.g_isPlay = false; app.globalData.g_currentId = null; }); //監聽音樂停止 wx.onBackgroundAudioStop((result)=>{ self.setData({ isPlay:false }); }); }, // 點擊音樂播放 playMusic() { var self = this; if (this.data.isPlay) { //停止播放音樂。如果音樂正在播放停止播放 wx.stopBackgroundAudio(); this.setData({ isPlay: false }); } else { // 使用后臺播放器播放音樂 wx.playBackgroundAudio({ // 對音樂url title coverImgUrl 從新定義 dataUrl: self.data.music.url, title: self.data.music.title, coverImgUrl: self.data.music.coverImgUrl }); this.setData({ isPlay: true }); } } }) ``` ### 完成這個頁面app.js里應增加的內容存放音樂監聽的變量值 > 在app.js里的存放是全局的變量，音樂播放對全局有效，所有要將音樂播放里的監聽變量放入app.js，如果全局里沒有定義，從詳情頁跳出后音樂會停止播放 ``` //app.js App({ globalData:{ g_isPlay:false, g_currentId:null } }) ``` ## yuedu-detail.json ``` { "navigationBarTitleText": "閱讀" /* "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "小程序", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh": false } } */ window是對app.json設置的要對單個頁面進行設置不用加window，直接設置如上 ``` ## yuedu-detail.wxml ```  <view class='indexDetail'> <view class='top'> <image src='{{isPlay?music.coverImg:data.imgSrc}}'></image> <image src="{{isPlay?'/images/music/music-start.png':'/images/music/music-stop.png'}}" class='music' bindtap="playMusic" ></image> </view> <view class='content'> <view class='evaluate'> <image src='{{data.avatar}}' class='avatar'></image> <text>{{data.author}}</text> 發表與 <text>{{data.dateTime}}</text> </view> <text class='title'>{{data.title}}</text> <view class='sc row'> <view class='line'></view> <image src='/images/icon/share.png'></image> <image src='/images/icon/collection.png'></image> </view> <view class='c-content'> {{data.detail}} </view> </view> </view> ``` ### 1. 三目運算變換圖片 ``` <image src="{{isPlay?'/images/music/music-start.png':'/images/music/music-stop.png'}}" class='music' bindtap="playMusic" ></image> ``` * 判斷isPlay是否為真，不同情況下訪問路徑不同 ## index-detail.wxss ``` /* pages/index/index-detail/index-detail.wxss */ .top .music{ width: 150rpx; height: 150rpx; position: absolute; top: 0; right: 0; z-index: 10; left: 0; bottom: 0; margin: auto; opacity: 0.5; } .top{ position: relative; } .top image{ width: 100%; } .content{ display: flex; flex-direction: column; padding: 0 15rpx; font-size: 24rpx; } .avatar{ width: 80rpx; height: 80rpx; vertical-align: bottom; position: relative; top: 20rpx; } .title{ margin: 25rpx 0 20rpx; font-size: 40rpx; font-weight: bold; } .sc{ position: relative; width: 100%; } .sc .line{ width: 100%; height: 4rpx; background: #999; position: absolute; top: 50rpx; z-index: -10; } .sc image{ width: 100rpx; height: 100rpx; vertical-align: bottom; float: right; margin-left: 15rpx; } .row::after{ display: block; content: ""; clear: both; } .c-content{ text-indent: 20rpx; padding: 25rpx 0; } ``` # 完成這個頁面 yuedu 應增加的內容 ## yuedu.wxml > 獲取點擊事件的 id 將 id 傳入相應頁面里相應頁面通過id 獲取數據， > wx.navigateTo 跳轉事件可返回 > '路徑?+id=' + id //第二個加是連接符 ``` handleClick(event){ // console.log(event.currentTarget.dataset) var id = event.currentTarget.dataset.id; wx.navigateTo({ url: 'yuedu-detail/yuedu-detail?id='+ id, }) } ``` ## yuedu.wxml ``` <block wx:for="{{postList}}" wx:key="index"> <view catchtap="handleClick" data-id='{{item.postId}}'> //對template設置點擊事件無效，template 不占位，頁面也不顯示，因此加一個view設置事件 <template is="yueduList" data="{{...item}}" ></template> </view> </block> ```