加入缓存提升用户体验
思路:先从缓存中寻找数据或者从服务器中获取数据写入缓存中
优点:减少网络访问次数,提升用户体验
解决缓存带来的问题
问题:比如原先是不喜欢的在点击喜欢的时候,跳到下一期刊后返回来再次点击会报错。原因是点击不喜欢后服务器端更新了,但加入缓存后返回来的时候期刊依然是缓存中的,所以会出现请求错误。
解决:单独请求获取喜欢的状态,在控件上不使用缓存中的数据
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,最后放到组件目录下调用就可以了
组件通信
方案一,利用页面做转发
原文地址:https://www.cnblogs.com/TomAndJerry/p/10504830.html
时间: 2024-10-09 01:43:39