<!--先静后动，先样式再数据--> <view> <image src="{{isPlayingMusic?postData.music.coverImg:postData.headImgSrc}}"></image> <image catchtap="onMusicTap" src="{{isPlayingMusic? '/images/music/music-stop.png': '/images/music/music-start.png'}}"></image> <view> <image src="https://www.jb51.net/{{postData.avatar}}"></image> <text>{{postData.author}}</text> <text>发表于</text> <text>{{postData.dateTime}}</text> </view> <text>{{postData.title}}</text> <view> <view> <image wx:if="{{collected}}" catchtap="onColletionTap" src="https://www.jb51.net/images/icon/collection.png"></image> <image wx:else catchtap="onColletionTap" src="https://www.jb51.net/images/icon/collection-anti.png"></image> <image catchtap="onShareTap" src="https://www.jb51.net/images/icon/share.png"></image> </view> <view></view> </view> <text>{{postData.detail}}</text> </view>
post-detail.wxss
.container { display: flex; flex-direction: column; } .head-image { width: 100%; height: 460rpx; } .hide{ opacity: 0; } .audio { width: 102rpx; height: 110rpx; position: absolute; left: 50%; margin-left: -51rpx; top: 180rpx; opacity: 0.6; } .author-date { flex-direction: row; margin-left: 30rpx; margin-top: 20rpx; } .avatar { height: 64rpx; width: 64rpx; vertical-align: middle; } .author { font-size: 30rpx; font-weight: 300; margin-left: 20rpx; vertical-align: middle; color: #666; } .const-text { font-size: 24rpx; color: #999; margin-left: 20rpx; } .date { font-size: 24rpx; margin-left: 30rpx; vertical-align: middle; color: #999; } .title { margin-left: 40rpx; font-size: 36rpx; font-weight: 700; margin-top: 30rpx; letter-spacing: 2px; color: #4b556c; } .tool { margin-top: 20rpx; } .circle-img { float: right; margin-right: 40rpx; vertical-align: middle; } .circle-img Image { width: 90rpx; height: 90rpx; } .share-img { margin-left: 30rpx; } .horizon { width: 660rpx; height: 1px; background-color: #e5e5e5; vertical-align: middle; position: relative; top: 46rpx; margin: 0 auto; z-index: -99; } .detail { color: #666; margin-left: 30rpx; margin-top: 20rpx; margin-right: 30rpx; line-height: 44rpx; letter-spacing: 2px; }
post-detail.js
var postsData = require('../../../data/posts-data.js') var app = getApp(); Page({ data: { isPlayingMusic: false }, onLoad: function (option) { var postId = option.id; this.data.currentPostId = postId; var postData = postsData.postList[postId]; this.setData({ postData: postData }) var postsCollected = wx.getStorageSync('posts_collected') if (postsCollected) { var postCollected = postsCollected[postId] if (postCollected){ this.setData({ collected: postCollected }) } } 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; }); }, onColletionTap: function (event) { // this.getPostsCollectedSyc(); 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; } }, /* * 定义页面分享函数 */ onShareAppMessage: function (event) { return { title: '离思五首·其四', desc: '曾经沧海难为水，除却巫山不是云', path: '/pages/posts/post-detail/post-detail?id=0' } } })
post-detail.json
{ "navigationBarTitleText":"阅读" }
贴一下模拟的新闻数据posts-data.js