var postsData = require('../../../data/posts-data.js')
var app = getApp();
Page({
data: {
//isPlayingMusic: flase
},
onLoad: function(option) {
var postId = option.id;
//url: "post-detail/post-detail?id=" + postId;?后面的id=option.id里的id
this.data.currentPostId = postId;
var postData = postsData.postList[postId];
// this.setData({
//postData: postData
//})
this.postData = postsData.postList[postId]
var postsCollected = wx.getStorageSync('posts_collected')
if (postsCollected) {
var postCollected = postsCollected[postId]
this.setData({
postData: postData//将data上的数据传送到页面
})
}
else {
var postsCollected = {};
postsCollected[postId] = false;
wx.setStorageSync('posts_collected', postsCollected);
}
if (app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId === postId) {
this.setData({
isplayingMusic:true
})
}
this.setMusicMonitor();
},
setMusicMonitor: function() {
//点击播放图标和总控开关都会触发这个函数
var that = this;
wx.onBackgroundAudioPlay(function(event) {
var pages = getCurrentPages();
var currentPage = pages[pages.length - 1];
if (currentPage.data.currentPostId === that.data.currentPostId) {
// 打开多个post-detail页面后,每个页面不会关闭,只会隐藏。通过页面栈拿到到
// 当前页面的postid,只处理当前页面的音乐播放。
if (app.globalData.g_currentMusicPostId == that.data.currentPostId) {
// 播放当前页面音乐才改变图标
that.setData({
isPlayingMusic: true
})
}
// if(app.globalData.g_currentMusicPostId == that.data.currentPostId )
// app.globalData.g_currentMusicPostId = that.data.currentPostId;
}
app.globalData.g_isPlayingMusic = true;
});
wx.onBackgroundAudioPause(function() {
var pages = getCurrentPages();
var currentPage = pages[pages.length - 1];
if (currentPage.data.currentPostId === that.data.currentPostId) {
if (app.globalData.g_currentMusicPostId == that.data.currentPostId) {
that.setData({
isPlayingMusic: false
})
}
}
app.globalData.g_isPlayingMusic = false;
// app.globalData.g_currentMusicPostId = null;
});
wx.onBackgroundAudioStop(function() {
that.setData({
isPlayingMusic: false
})
app.globalData.g_isPlayingMusic = false;
//app.globalData.g_currentMusicPostId = null;
});
},
onCollectionTap: function(event) {
this.getPostsCollectedAsy();
},
getPostsCollectedAsy: function() {
var that = this;
wx.getStorage({
key: "posts_collected",
success: function(res) {
var postsCollected = res.data;
var postCollected = postsCollected[that.data.currentPostId];
// 收藏变成未收藏,未收藏变成收藏
postCollected = !postCollected;
postsCollected[that.data.currentPostId] = postCollected;
that.showToast(postsCollected, postCollected);
}
})
},
getPostsCollectedSyc: function() {
var postsCollected = wx.getStorageSync('posts_collected');
var postCollected = postsCollected[this.data.currentPostId];
// 收藏变成未收藏,未收藏变成收藏
postCollected = !postCollected;
postsCollected[this.data.currentPostId] = postCollected;
this.showToast(postsCollected, postCollected);
},
showModal: function(postsCollected, postCollected) {
var that = this;
wx.showModal({
title: "收藏",
content: postCollected ? "收藏该文章?" : "取消收藏该文章?",
showCancel: "true",
cancelText: "取消",
cancelColor: "#333",
confirmText: "确认",
confirmColor: "#405f80",
success: function(res) {
if (res.confirm) {
wx.setStorageSync('posts_collected', postsCollected);
// 更新数据绑定变量,从而实现切换图片
that.setData({
collected: postCollected
})
}
}
})
},
showToast: function(postsCollected, postCollected) {
// 更新文章是否的缓存值
wx.setStorageSync('posts_collected', postsCollected);
// 更新数据绑定变量,从而实现切换图片
this.setData({
collected: postCollected
})
wx.showToast({
title: postCollected ? "收藏成功" : "取消成功",
duration: 1000,
icon: "success"
})
},
onShareTap: function(event) {
var itemList = [
"分享给微信好友",
"分享到朋友圈",
"分享到QQ",
"分享到微博"
];
wx.showActionSheet({
itemList: itemList,
itemColor: "#405f80",
success: function(res) {
// res.cancel 用户是不是点击了取消按钮
// res.tapIndex 数组元素的序号,从0开始
wx.showModal({
title: "用户 " + itemList[res.tapIndex],
content: "用户是否取消?" + res.cancel + "现在无法实现分享功能,什么时候能支持呢"
})
}
})
},
onMusicTap: function(event) {
var currentPostId = this.data.currentPostId;
var postData = postsData.postList[currentPostId];
var isPlayingMusic = this.data.isPlayingMusic;
if (isPlayingMusic) {
wx.pauseBackgroundAudio();
this.setData({
isPlayingMusic: false
})
// app.globalData.g_currentMusicPostId = null;
app.globalData.g_isPlayingMusic = false;
} else {
wx.playBackgroundAudio({
dataUrl: postData.music.url,
title: postData.music.title,
coverImgUrl: postData.music.coverImg,
})
this.setData({
isPlayingMusic: true
})
app.globalData.g_currentMusicPostId = this.data.currentPostId;
app.globalData.g_isPlayingMusic = true;
}
}
})
上面的这是post-detail.js里的代码。
<!--pages/posts/post-detail/post-detail.wxml-->
<view class="container">
<image class="head-image" src="{{isPlayingMusic?postData.music.coverImg:postData.headImgSrc}}"></image>
<image catchtap="onMusicTap" class="audio"
src="{{isPlayingMusic?'/images/music/music-stop.png': '/images/music/music-start.png'}}"></image>
<view class="author-date">
<image class="avatar" src="{{postData.avatar}}"></image>
<text class="author">{{postData.author}}</text>
<text class="const-text">发表于</text>
<text class="date">{{postData.dateTime}}</text>
</view>
<text class="title">{{postData.title}}</text>
<view class="tool">
<view class="circle-img">
<image wx:if="{{collected}}" catchtap="onCollectionTap"
src="/images/icon/collection.png"></image>
<image wx:else catchtap="onCollectionTap"
src="/images/icon/collection-anti.png"></image>
<image catchtap="onShareTap" class="share-img"
src="/images/icon/share.png"></image>
</view>
<view class="horizon"></view>
</view>
<text class="detail">{{postData.detail}}</text>
</view>
上面的这是post-detail.wxml里的代码。
麻烦各位大神了,微信小程序收藏功能,收藏然后出去后进来图标会自动重置,但数值正常,无报错。