小程序开发-10-新版Music组件、组件通信与wxss样式复用

加入缓存提升用户体验

思路：先从缓存中寻找数据或者从服务器中获取数据写入缓存中

优点：减少网络访问次数，提升用户体验

解决缓存带来的问题

问题：比如原先是不喜欢的在点击喜欢的时候，跳到下一期刊后返回来再次点击会报错。原因是点击不喜欢后服务器端更新了，但加入缓存后返回来的时候期刊依然是缓存中的，所以会出现请求错误。

解决：单独请求获取喜欢的状态，在控件上不使用缓存中的数据

ES6模板字符串和扩展运算符的应用

模板字符串

作用，增强代码可读性
console.log(a+'456');//代码可读性不强
console.log(`${a}456`);//可读性更强
扩展运算符

作用，可以有效减少wxml中对象的使用，比如

缺点，可读性不太好，有些时候不知道对象中有些什么数据
//原先的写法

this.setData({

 classic: res

})

//扩展运算符写法

this.setData({

 classic: ...res//res是从服务端获取的数据

})
在wxml中

//原先的写法

<Text>{{classic.id}}</Text>

//之后的写法

<Text>{{id}}</Text>
让对象中的属性直接平铺了出来

独立更新like组件的状态

将data中的count和state单独提取出来

让自定义组件支持hidden

wx:if条件语法
<v-music wx:if='{{false}}'/>

<v-essay wx:if='{{false}}'/>

<v-movie wx:if='{{true}}'/>
组件的hidden属性，但是hidden只会作用于小程序自身的组件，对自定义组件无效。所以我们可以通过传值来达到这样的效果
page页面的wxml

<v-music hidden="{{fasle}}"/>
组件内的js

properties:{

hidden: {

  type: Boolean

}

}
组件的wxml

<View hidden="{{hidden}}">

	...

</View>
wx:if和hidden的区别

wx:if会完整的执行组件的生命周期，而hidden不会。hidden只会控制组件的隐藏和显示。

解决wxss在组件间的复用问题

在组件同级目录下面新建common.wxss文件

将共同wxss代码复制到common.wxss文件中

在组件的wxss中引用
@import "../common.wxss";

音乐组件的具体实现

老版实现方式
新版实现方式
- 实现点击后图片状态切换，同时音频响起
- 当当前音乐出于播放状态的时候，切换不同期刊后切回来，音乐继续播放同时界面上显示的是要暂停的图标
- 代码优化

组件的wxml代码

<image bind:tap="onPlay" src="{{playing?playSrc:pauseSrc}}" title="{{classic.title}}"/>

组件的js代码

const mMgr = wx.getBackgroundAudioManager();

properties: {

src: {

	  title: String

   type: String

}

}

data: {

...

}

attached: function(){

 //恢复状态

 this._recoverStatus();

 //监听音乐播放

 this._monitorSwitch();

},

//detached: {

//    mMgr.stop();

//}

method:{

onPlay: function(e){

   if(!this.data.playing){

       //图片切换

       this.setData({

       	paying: true

   	})

   	//音乐播放

   	mMgr.src = this.properties.src;

   	mMsgr.title = this.properties.title;

   }else{

       //图片切换

       this.setData({

       	paying: false

   	})

       //音乐停止

       mMgr.pause();

   }

}，

//让后台播放器与界面图标同步

_monitorSwitch: function(){

	mMgr.onPlay(()=>{

		this._recoverStatus();

	})

	mMgr.onPause(() => {

		this._recoverStatus();

	})

	mMgr.onStop(() => {

		this._recoverStatus();

	})

	mMgr.onEnded(() => {

		this._recoverStatus();

	})

},

//恢复状态

_recoverStatus: function () {

	if (mMgr.paused) {

		this.setData({

			playing: false

		})

		return;

	}

	if (mMgr.src === this.properties.src) {

		this.setData({

			playing: true

		})

	}

},

}

实现音乐控件的旋转效果

动画API

CSS3的canvas

//css3动画实现，在组件的wxss里添加这段代码

.rotation {

-webkit-transform: rotate(360deg);

animation: rotation 12s linear infinite;

-moz-animation: rotation 12s linear infinite;

-webkit-animation: rotation 12s linear infinite;

-o-animation: rotation 12s linear infinite;

}

@-webkit-keyframes rotation {

from {

 -webkit-transform: rotate(0deg);

}

to {

 -webkit-transform: rotate(360deg);

}

}

//在组件的wxml添加样式

<image src="..." class="{{playing?'rotation':''}}"/>

对Component和Model应用的理解

业务代码最好写在Model里面

多热合作的时候每个人写自己的Component，最后放到组件目录下调用就可以了

组件通信

方案一，利用页面做转发

巴特西

小程序开发-10-新版Music组件、组件通信与wxss样式复用

加入缓存提升用户体验

解决缓存带来的问题

ES6模板字符串和扩展运算符的应用

独立更新like组件的状态

让自定义组件支持hidden

解决wxss在组件间的复用问题

音乐组件的具体实现

实现音乐控件的旋转效果

对Component和Model应用的理解

组件通信

最新文章

热门文章