微信小程序开发(三)

实现文章详情页面,音乐播放,收藏,分享。

文章详情页面

news-details

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;
}
坚持原创技术分享,您的支持将鼓励我继续创作!