神奇cpp

这个屌丝很懒，什么也没留下！

热门标签

微信小程序——豆瓣电影（二）_微信小程序电影播放功能实现代码

作者：神奇cpp | 2024-06-29 17:08:21

踩

微信小程序电影播放功能实现代码

9.收藏功能

（1）代码

已收藏和为收藏的图标不相同，需要分别设定，同时跳出对应的提示
对于每篇评论用户是否收藏，将用户是否收藏设一个标记进行判断，利用数组下标将之状态存储在本地缓存中。
只有对同一页面进行操作时才会覆盖原操作，否则只会更改对应页面的状态

wxml

<view class="collection_share">
      <image catchtap="handleCollection" wx:if="{{!isCollected}}" src="/images/icon/collection-anti.png"></image>
      <image catchtap="handleCollection" wx:if="{{isCollected}}" src="/images/icon/collection.png"></image>
</view>
1
2
3
4

Page({
  data:{
    index:null,
    isCollected:false
  }, 
  onLoad(options) {
    this.setData({
      detailObj:datas.list_data[index], 
      index
    })

    //根据本地缓存的数据判断用户是否收藏当前评论
    let detailStorage=wx.getStorageSync('isCollected')
    if(!detailStorage){
      //在缓存中初始化空对象
        wx.setStorageSync('isCollected', {})
    }
    //判断用户是否收藏
    if(detailStorage[index]){//收藏过
      this.setData({
        isCollected:true
      })
    }
  },
  //点击收藏与取消收藏
  handleCollection(){
    let isCollected=!this.data.isCollected;
    //更新状态
    this.setData({
      isCollected
    });
    //提示用户
    let title=isCollected?'收藏成功':'取消收藏';
    wx.showToast({
      title,
      icon:'success'
    });
    //缓存数据到本地
    let{index}=this.data;
    wx.getStorage({
      key:'isCollected',
      success:(datas)=>{
        let obj=datas.data;
        obj[index]=isCollected;
        wx.setStorage({
          key:'isCollected',
          data:obj,
          success:()=>{
            console.log("缓存成功");
          }
        });
      }
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

（2）成果展示

10.分享功能

简单的分享功能（由于未设置用户功能，此功能不能实现）

（1）代码

wxml

<image catchtap="handleShare" src="/images/icon/share.png"></image>
<button open-type="share">转发此文章</button>
1
2

//点击分享功能
  handleShare(){
    wx.showActionSheet({
      itemList: [
      '分享到微信','分享到QQ','分享到微博'
      ],
    })
  }
1
2
3
4
5
6
7
8

（2）成果展示

11.音乐播放功能

两个图标的设定能够进行与暂停两种情况
能够从后台获取正确的music数据
通过点击图标控制音乐的播放，同时能进行图片的切换
通过对音乐播放器的操作能反过来控制图标
在进入不同页面时能够播放相应电影的音乐，并且显示当前页面音乐的状态

（1）代码

部分数据

music: {
      dataUrl: 'http://music.163.com/song/media/outer/url?id=419485661.mp3', // 音乐链接
      title: '英雄的黎明',   // 音乐标题
      coverImgUrl: 'https://tigimg-1252093452.image.myqcloud.com/2020/09/15/r5fbLvuwgEO8IfQGDvyr.jpg',
    },
1
2
3
4
5

wxml

<!--pages/datail/detail.wxml-->
  <image class="headImg" src="{{isMusicPlay?detailObj.music.coverImgUrl:detailObj.detail_img}}"></image>
  <image catchtap="handleMusicPlay" class="musicImg" src='{{isMusicPlay?"/images/icon/music_start.png":"/images/icon/music_stop.png"}}'></image>
1
2
3

// app.js
App({
  data:{
    isPlay:false,
    pageIndex:null
  }
})

//pages/datail/detail.js
let appDatas =getApp();

Page({
  data:{
    isMusicPlay:false
  }, 

  onLoad(options) {
    //监听音乐播放
    wx.onBackgroundAudioPlay(() => {
      //修改isMusicPlay的状态值
      this.setData({
        isMusicPlay:true
      })
      //修改appDatas中的数据
      appDatas.data. isPaly=true;
      appDatas.data.pageIndex=index;
    })
    //判断音乐是否在播放
    if(appDatas.data.isPaly&&appDatas.data.pageIndex==index){
      //修改isMusicPlay的状态值
      this.setData({
        isMusicPlay:true
      })
    }
    //监听音乐暂停
    wx.onBackgroundAudioPause(() => {
      //修改isMusicPlay的状态值
      this.setData({
        isMusicPlay:false
      })
      //修改appDatas中的数据
      appDatas.data. isPaly=false;
      appDatas.data.pageIndex=index;
    })
  }, 
  handleMusicPlay(){
    //处理音乐播放 
    let isMusicPlay=!this.data.isMusicPlay;
    this.setData({
      isMusicPlay
    });
    //控制音乐播放
     if(isMusicPlay){
       //播放音乐
       let{dataUrl,title}=this.data.detailObj.music;
       wx.playBackgroundAudio({
         dataUrl,title
       })
     }else{
       //暂停音乐
       wx.pauseBackgroundAudio()
      }
  }
}) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

（2）成果展示

12.tab切换

在底部设置两个不同版块的选项
在图标上能够显示选中与未选中的区别

（1）代码

"tabBar": {
    "list":[
      {
        "pagePath": "pages/list/list",
        "text": "优质影评",
        "iconPath": "/images/icon/ping1.png",
        "selectedIconPath": "/images/icon/ping2.png"
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "电影频道",
        "iconPath": "/images/icon/moive1.png",
        "selectedIconPath": "/images/icon/moive2.png"
      }
    ]
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

（2）成果展示

13.设置电影列表

设计页面布局
发送请求通过接口实现数据交互，获取到豆瓣网中的数据
将获取的数据通过数组存储，遍历数组，利用下标将之按序的排列到主页上

（1）代码

wxml

<!--pages/movies/movies.wxml-->
<view wx:for="{{moviesArr}}" wx:key="index">
  <view class="moivesContainer">
    <image class='moiveImg' src="{{item.cover.url}}"></image>
    <view class='moive_detail'>
      <text class=" ">{{item.title}}</text>
      <text class="moive_year">{{item.year}}</text>
      <text class="moive_director">{{item.directors}}</text>
    </view>
    <text class="moive_rating">{{item.rating.value}}</text>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

wxsl

/* pages/movies/movies.wxss */
.moivesContainer{
  display: flex;
  padding: 20rpx;
}.moiveImg{
  width: 128rpx;
  height: 128r.moive_detail{
  display: flex;
  flex-direction: column;
  width: 70%;
  margin-left: 20rpx;
}

.moive_name{
  font-size: 32rpx;
  color: #000;
}
.moive_year{
  font-size: 28rpx;
  color: #666;
  margin: 8rpx 0ex;
}
.moive_director{
  font-size: 30rpx;
  color: #666;
}
.moive_rating{
  font-size: 40rpx;
  color: red;
  font-weight: bold;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// pages/movies/movies.js
Page({
  data: {
    moviesArr:[]
  },
  onLoad(options) {
    let that = this
    wx:wx.request({
      url: 'https://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items',
      method:'GET',
      data: {},        
      success:(res)=> {
        console.log(res);
        that.setData({
          moviesArr:res.data.subject_collection_items
        })
      }    
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

（2）成果展示

14.设置电影详情页

点击电影跳转到指定页面，进行电影的简介
在12的基础上，将获得的数据通过数组存到本地缓存中,而点击电影后，再次调用数数组中存储的数据，使之完成点击电影能够进入相应的电影页面介绍

（1）代码

wxml

<!--pages/movies/movies.wxml-->
<navigator url='/pages/movieDetail/movieDetail?index={{index}}' wx:for="{{moviesArr}}" wx:key="index">
</navigator>
1
2
3

// app.js
 data:{
  moviesArr:[]
 } 
// pages/movies/movies.js
let appDatas=getApp();
Page({
 onLoad(options) {  
  success:(res)=> {
   appDatas.data.moviesArr=res.data.subject_collection_items;
  }
 },
}) 

// pages/movieDetail/movieDetail.js
let appDatas=getApp();
Page({
 data: {
  movieDetail:{}
 },
 onLoad(options) {
  console.log(options)
  this.setData({
   movieDetail:appDatas.data.moviesArr[options.index]
  })
 },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

wxss

/* pages/movieDetail/movieDetail.wxss */
.movieDetailContainer{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.movie_img{
  width: 70%;
  height: 700rpx;
  margin: 20rpx 0;
}
.movie_name{
  font-size: 40rpx;
  font-weight: bold;
}
.movie_detail{
  display: flex;
  flex-direction: column;
  font-size: 32rpx;
}

button{
  width: 70%;
  height: 80rpx;
  background:#99CC99;
  margin-top: 50rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

（2）成果展示

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/769811