文章详情页面
CODE
pages/home/home-detail/home-detail.wxml
<view class="home-detail">
<!--判断载入音乐背景图片
home_key是通过上个data传递过来的数据，在此处要调用必须加前缀home_key。
-->
<image class="home-detail-image" src="{{isPlayingMusic? home_key.Music.coverImg:home_key.tupian}}"></image>
<!--音乐播放、暂停图片，通过数据绑定判断真假-->
<image catchtap="onMusicTap" class="audio" src="{{isPlayingMusic? '/image/music/music-stop.png':'/image/music/music-start.png'}}"></image>
<view class="home-detail-user">
<image class="home-detail-user-tuoxiang" src="{{home_key.user_touxiang}}"></image>
<text class="user">{{home_key.author}}</text>
<text class="home-detail-text">发表于</text>
<text class="time-text">{{home_key.dateTiime}}</text>
</view>
<text class="title">{{home_key.biaoti}}</text>
<view class="home-detail-sc">
<view class="circle-img">
<image wx:if="{{collected}}" catchtap="onColletionTap" src="/image/icon/collection.png"></image>
<image wx:else catchtap="onColletionTap" src="/image/icon/collection-anti.png"></image>
<image catchtap="onShareTap" class="share-img" src="/image/icon/share.png"></image>
</view>
<view class="horizon"></view>
</view>
<view class="home-detail-text">
<text>{{home_key.detail}}</text>
</view>
</view>
pages/home/home-detail/home-detail.js
//模拟获取服务器数据信息，在后面会说说data的主要结构。
var postsData = require('../../../data/home_data.js')
//获取全局变量
var app = getApp();
Page({
data: {
isPlayingMusic: false
},
/**
* 生命周期函数--监听页面加载
* 页面初始化
*/
onLoad: function (option) {
//option为上页面传过来的数据
var homeId = option.id;
//console.log(homeId)
var homeData = postsData.postList[homeId];
// this.data.homeData = homeData;
//console.log(homeData)
//绑定数据home_key，homeId，给data。
this.setData({
home_key: homeData,
homeId: homeId,
});
//读取本地缓存值key。。。用于判断是否收藏
var postsCollected = wx.getStorageSync('posts_collected')
if (postsCollected) {
var postCollected = postsCollected[homeId];
this.setData({
collected: postCollected
})
}
else {
var postsCollected = {};
postsCollected[homeId] = false;
wx.setStorageSync(
'posts_collected', postsCollected
);
}
//判断第几个页面音乐正在播放
if (app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicHomeId === homeId) {
//this.data.isPlayingMusic = true;
this.setData({
isPlayingMusic: true
})
}
this.setMusicMonitor();
},
//音乐播放全局API,状态监听。
//播放状态
//暂停状态
//停止状态
setMusicMonitor: function () {
var that = this;
wx.onBackgroundAudioPlay(function () {
that.setData({
isPlayingMusic: true
})
app.globalData.g_isPlayingMusic = true;
app.globalData.g_currentMusicHomeId = that.data.homeId;
})
wx.onBackgroundAudioPause(function () {
that.setData({
isPlayingMusic: false
})
app.globalData.g_isPlayingMusic = false;
app.globalData.g_currentMusicHomeId = null;
})
wx.onBackgroundAudioStop(function () {
that.setData({
isPlayingMusic: false
})
app.globalData.g_isPlayingMusic = false;
app.globalData.g_currentMusicHomeId = null;
})
},
//点击事件
onColletionTap: function (event) {
//拿到缓存的所有值
var postsCollected = wx.getStorageSync('posts_collected');
//拿到事件ID值，确定谁触发
var postCollected = postsCollected[this.data.homeId];
//取反操作，收藏变未收藏。
postCollected = !postCollected;
postsCollected[this.data.homeId] = postCollected;
//重新赋值，更新文章是否收藏
wx.setStorageSync('posts_collected', postsCollected);
//更新数据绑定变量
this.setData({ collected: postCollected })
//显示是否收藏，消息提示框
wx.showToast({
title: postCollected ? '收藏成功' : '取消成功',
duration: 1000,
icon: 'success'
})
},
//点击事件，分享连接。
onShareTap: function (evet) {
var itemList = [
"分享到微信好友",
"分享到朋友圈",
"分享到微博",
]
wx.showActionSheet({
itemList: itemList,
success: function (res) {
//res.cancel用户是不是点击了取消按钮
//res.tapIndex数组元素序列号，从0开始
wx.showModal({
title: itemList[res.tapIndex],
content: '',
})
},
fail: function (res) {
console.log(res.errMsg)
}
})
},
//点击音乐播放
onMusicTap: function (evet) {
var homeId = this.data.homeId;
var isPlayingMusic = this.data.isPlayingMusic;
if (isPlayingMusic) {
wx.pauseBackgroundAudio();
this.setData({
isPlayingMusic: false
})
// this.data.isPlayingMusic = false;
}
else {
wx.playBackgroundAudio({
dataUrl: postsData.postList[homeId].Music.Urcl,
title: postsData.postList[homeId].Music.title,
coverImgUrl: postsData.postList[homeId].Music.coverImg
})
this.setData({
isPlayingMusic: true
})
}
},
)}
pages/home/home-detail/home-detail.josn
{
"navigationBarTitleText": "阅读"
}
pages/home/home-detail/home-detail.wxss
.home-detail {
display: flex;
flex-direction: column;
}
.audio{
width: 102rpx;
height: 110rpx;
position: absolute;
left: 50%;
margin-left: -51rpx;
top: 170rpx;
opacity: 0.6;
}
.home-detail-image {
width: 100%;
height: 450rpx;
}
.home-detail-user-tuoxiang {
margin: 20rpx 20rpx 20rpx 20rpx;
height: 60rpx;
width: 60rpx;
border-radius: 60rpx;
vertical-align: middle;
}
.user {
font-size: 30rpx;
font-weight: 300;
margin-left: 20rpx;
vertical-align: middle;
color: #666;
}
.home-detail-text {
font-size: 30rpx;
color: #999;
margin-left: 20rpx;
}
.time-text {
font-size: 24rpx;
color: #999;
margin-left: 30rpx;
vertical-align: middle;
}
.title{
margin-left: 40rpx;
font-size: 36rpx;
font-weight: 700;
margin-top:30rpx;
letter-spacing: 2px;
color: #4b556c;
}
.home-detail-sc{
margin: 2rpx;
}
.circle-img image{
width: 90rpx;
height: 90rpx;
}
.circle-img{
float: right;
margin-right: 40rpx;
vertical-align: middle;
}
.share-img{
margin-left: 30rpx;
}
.horizon{
width: 600rpx;
height: 2rpx;
background-color: #e5e5e5;
vertical-align: middle;
position: relative;
top:46rpx;
margin: 0 auto;
z-index: -99;
}
.home-detail-text{
color: #666;
margin-left: 30rpx;
margin-top: 20rpx;
margin-right: 30rpx;
line-height: 44rpx;
letter-spacing: 2px;
font-size: 24rpx;
}