[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
```
<!--pages/index/index-detail/index-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>
```
- 开发环境及接口
- 0.豆瓣接口
- 1.开发环境配置
- 2.一些相关文档
- 小程序实例效果
- 第0节、TodoList
- 第一节、豆瓣相关
- 1、tabBar的配置及导航加标题
- 2、数据加载及下拉加载
- 3、加载相关
- 4、轮播
- 5、星星评分
- 第二节、音乐播放相关
- 1.点击收藏分享
- 2.音乐播放
- 初始版
- 组件版
- 组件加强版
- 3.点赞
- 点赞初级版
- 点赞第二版
- 5.左右按钮
- 6.缓存
- 第三节、补充
- 地图
- 点击拍照换图
- 扫一扫
- 小程序语法
- 第一节 、HTTP的封装
- 0.http请求
- 1.function封装
- 2.class封装http
- 3.promise封装
- 4.config地址
- 第二节、组件
- 2.组件单独设置样式
- 3.一些有意义的标签
- 4.behavior
- 5.SLOT
- 6.左右按钮
- 5.点赞组件
- 6.用户授权
- 图片按钮 如分享
- 第三节、api
- 1.页面跳转
- 获取input里的值
- 1.添加评论
- 2.搜索框
- 3. 获取input里的值
- 2.设置缓存
- 3.模态框,弹出框
- 4.分享showActionSheet
- 5.定义全局的数据
- 2. 基础知识
- 1.setData
- 2.文件结构
- 3.wxml语法
- 第一节 数据绑定
- 第二节 列表渲染
- 第三节 条件渲染
- 第四节 模板
- 第五节 事件
- 第六节 引用
- 4.wxs
- 1.文本缩进问题
- 5.小程序中遇到的wxss 问题
- 1.width100%越界问题
- 废弃的文件
- 一个完整的小程序
- 1.启动页面
- 2.yuedu轮播+封装及数据调用
- yuedu的详情页
- 3.电影
- movie-more
- web-view