• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序之组件的集合(三)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  看看音乐播放组件是如何实现完成的音乐的播放的!!!

一、音乐music组件的开发

1、页面以及页面样式的开发

 1 // music组件页面开发
 2 <view hidden="{{hidden}}" class="container">
 3   <image class="classic-img {{playing?\'rotation\':\'\'}}" src=\'{{img}}\'/>
 4   <image class="player-img" bind:tap="onPlay" src=\'{{!playing?playSrc:pauseSrc}}\' />
 5   <image class="tag" src=\'images/[email protected]\' />
 6   <text class="content">{{content}}</text>
 7 </view>
 8 
 9 // 样式的开发 css代码
10 .container{
11   display: flex;
12   flex-direction: column;
13   align-items: center
14 }
15 
16 .classic-img{
17   width: 422rpx;
18   height: 422rpx;
19   margin-top: 60rpx;
20   border-radius: 50%;
21 }
22 
23 .player-img{
24   width: 120rpx;
25   height: 120rpx;
26   position: relative;
27   bottom: 270rpx;
28 }
29 
30 .tag{
31   width: 44rpx;
32   height: 128rpx;
33   position: relative;
34   bottom: 160rpx;
35   right: 310rpx;
36 }
37 /* 旋转的动画效果css */
38 .rotation {
39   -webkit-transform: rotate(360deg);
40   animation: rotation 12s linear infinite;
41   -moz-animation: rotation 12s linear infinite;
42   -webkit-animation: rotation 12s linear infinite;
43   -o-animation: rotation 12s linear infinite;
44 }
45 
46 
47 @-webkit-keyframes rotation {
48   from {
49     -webkit-transform: rotate(0deg);
50   }
51 
52   to {
53     -webkit-transform: rotate(360deg);
54   }
55 }

2、页面中逻辑代码的开发

这里用到了微信小程序中的音乐管理对象,音乐的播放都是通过这个来控制的。

 1 import {
 2   classicBeh
 3 } from \'../classic-beh.js\';
 4 
 5 // 创建微信小程序中的音乐管理对象
 6 const mMgr = wx.getBackgroundAudioManager();
 7 
 8 Component({
 9   /**
10    * 组件的属性列表 动画效果,当音乐播放的时候,图片是会转动的。如何实现???
11    * CSS3 小程序中的动画API
12    */
13   behaviors: [classicBeh],
14   properties: {
15     src: String,
16     title: String
17   },
18 
19   /**
20    * 组件的初始数据
21    */
22   data: {
23     pauseSrc: \'images/[email protected]\',
24     playSrc: \'images/[email protected]\',
25     playing: false
26   },
27 
28   // 在组件实例进入页面节点树时执行
29   attached:function(event){
30      this._recoverStatus();
31      this._mointorSwitch();
32   },
33 
34   // 生命周期函数 当组件被移除时候触发
35   detached:function(event){
36     // 只有当用wx:if 控制组件的显示的时候。才会起作用。hidden控制的时候不会起作用
37     // wx:if hidden 的区别 wx:if控制组件的显示的时候回重新完成的加载真个组件的生命周期,所以在频繁的切换组件的时候不建议使用的
38     // mMgr.stop();
39   },
40   /**
41    * 组件的方法列表
42    */
43   methods: {
44     onPlay: function(event) {
45       // 图片要切换
46       if(!this.data.playing){
47         this.setData({
48           playing: true
49         })
50         mMgr.src = this.properties.src;
51       }else{
52         this.setData({
53           playing: false
54         })
55         mMgr.pause();
56       }
57       mMgr.title = this.properties.title;
58     },
59 
60   // 控制音乐播放的图片的切换
61     _recoverStatus:function(){
62       // 当前组件中没有音乐在播放
63       if(mMgr.paused){
64         this.setData({
65           playing:false
66         })
67         return;
68       }
69       // 当前有一个组件中的音乐正在播放,并且当前位置就是那个音乐组件
70       if(mMgr.src == this.properties.src){
71         this.setData({
72           playing: true
73         })
74       }
75     },
76 
77     // 监听总控开关和组件联动
78     _mointorSwitch:function(){
79       // 播放音乐
80       mMgr.onPlay(()=>{
81         this._recoverStatus();
82       })
83       // 暂停音乐
84       mMgr.onPause(()=>{
85         this._recoverStatus();
86       })
87       // 关闭音乐总开关
88       mMgr.onStop(()=>{
89         this._recoverStatus();
90       })
91 
92       // 一首音乐自动名播放完成切换状态
93       mMgr.onEnded(()=>{
94         this._recoverStatus();
95       })
96     }
97   }
98 })

3、组件使用注意事项

组件在classic中使用的时候,需要考虑组件的显示与隐藏使用hidden属性还是wx:if来控制,至于这两者的区别,官方的文档来看:

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html#wx:if%20vs%20hidden

使用的代码:

1 <!-- 这里只能使用wx:if 不能用自定义的hidden属性,涉及到生命周期函数的触发 -->
2   <v-music wx:if=\'{{classic.type == 200}}\' img=\'{{classic.image}}\' content=\'{{classic.content}}\' src=\'{{classic.url}}\' title=\'{{classic.title}}\' />

二、小程序中tab栏的开发

这个不用自己重新编写,小程序中提供了现成的底部tab栏的,只需要在app.json 中配置一下就可以了:

 1 {
 2   "pages": [
 3     "pages/classic/classic",
 4     "pages/book/book",
 5     "pages/my/my"
 6   ],
 7   "window": {
 8     "navigationBarBackgroundColor": "#ffffff",
 9     "navigationBarTitleText": "SSC在雨中",
10     "navigationBarTextStyle": "black"
11   },
12   "sitemapLocation": "sitemap.json",
13   "tabBar" : {
14     "selectedColor":"#000000",
15     "backgroundColor": "#ffffff",
16     "color": "#c7c7c7",
17     "list":[
18       {
19         "pagePath":"pages/classic/classic",
20         "text": "流行",
21         "iconPath": "/images/tab/classic.png",
22         "selectedIconPath":"/images/tab/[email protected]"
23       },
24       {
25         "pagePath": "pages/book/book",
26         "text": "书籍",
27         "iconPath": "/images/tab/book.png",
28         "selectedIconPath": "/images/tab/[email protected]"
29       },
30       {
31         "pagePath": "pages/my/my",
32         "text": "喜欢",
33         "iconPath": "/images/tab/my.png",
34         "selectedIconPath": "/images/tab/[email protected]"
35       }
36     ]
37   }
38 }

 接下来就是另一个大的模块的开发了,bool模块的开发,继续继续...

 

内容出处:七月老师《纯正商业级小程序开发》视频课程

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
开发微信小程序环境配置(vscode)发布时间:2022-07-18
下一篇:
微信小程序开发(三)开发工具推荐VSCode - 老杨学堂发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap