小程序开发-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,最后放到组件目录下调用就可以了

组件通信

方案一,利用页面做转发

原文地址:https://www.cnblogs.com/TomAndJerry/p/10504830.html

时间: 2024-10-09 01:43:39

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

微信小程序社交立减金活动组件使用手册v1.0

小程序社交立减金活动组件使用手册v1.0 社交立减金活动组件介绍 1.社交立减金组件简介 社交立减金活动是微信支付向拥有小程序的商家提供的营销工具,商家可在自有小程序内嵌入社交立减金活动组件,用户在小程序内发起分享后立即获得一定金额的立减金,可用于小程序内或线下门店交易减价,被分享人也可以获得相应金额的立减金. 社交立减金能有效促成站(店)内分享的用户当笔交易/下次复购,站(店)外用户通过领取的立减金直达站(店)内核销,实现用户拉新. 2.社交立减金组件特点?? 3.示例图 ??4.适用场景 (

微信小程序开发05-日历组件的实现

接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是相对复杂的组件了,然后一般的日历组件又会有很多的变化,所以我们这里实现最基本的标签即可: 1 let View = require('behavior-view'); 2 const util = require('../utils/util.js'); 3 4 // const dateUtil

小程序开发 组件定义(封装)、组件调用、父子组件方法调用、父子组件传值通讯

在小程序开发中,为了提高代码效率,和代码使用率,我们也用到了组件封装, 今天我介绍下如何在小程序中封装一个头部公用组件 首先,所有父组件(调用页面)的json文件都要引用子组件:index.json { "usingComponents": { "header": "../../component/header/header", } } 一,组件定义(封装) 子组件:header.wxml <view name='header' class

微信小程序开发-地图map组件上使用input组件

微信小程序开发-地图map组件上使用input组件 标签: 微信小程序 uni-app 原生组件层级关系 微信小程序在最高层级 在微信小程序中原生组件包括camera canvas input(仅在focus时表现为原生组件) live-player live-pusher map textarea video 在微信小程序开发中原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 后插入的原生组件可以覆盖之前的原生组件. 原生组件还无法在 pic

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

小程序简介 小程序是一种不需要下载安装即可使用的快速应用,它实现了应用“触手可及”的操作:用户扫一扫或搜一下即可打开应用,完全不需要安装,因此小程序不仅可提高的用户的应用体验,也方便应用的传扩散. 本文带大家快速入门小程开发,了解从环境搭建到开发出一个简单hello world程序,从而上手小程序开发,让你快速成功小程序开发人员.之后,想开发什么样的小程序,就可以自己研究和努力了. 下面,是循序渐经的步骤: ?1.注册小程序 在开发之前,当然需要先注册一个小程序账号. 进入“微信公众平台”进行注

微信小程序详细图文教程-10分钟完成微信小程序开发部署发布(3元获取腾讯云服务器带小程序支持系统)

很多朋友都认为微信小程序申请.部署.发布很难,需要很长时间. 实际上,微信和腾讯云同是腾讯产品,已经提供了10分钟(根据准备资源情况,已完成小程序申请认证)完成小程序开发.部署.发布的方式.当然,实现的是基础功能.但是,可以给学习者很便捷的体验和很好的启发. 不过,随着微信平台和云服务的发展,真担心,程序猿会失业! 目录 一.微信小程序申请 二.服务器设置(申请.部署.域名) 1.申请服务器 2.部署服务器 3.域名申请和配置 三.小程序发布 1.下载DEMO 2.下载开发工具并安装 3.配置参

微信小程序把玩(十三)progress组件

原文:微信小程序把玩(十三)progress组件 进度条描述的是一种加载的状态,比如软件升级下载进度, 视频,图片下载进度- 主要属性: wxml <progress percent="80" show-info="true" stroke-width="5" color="red" active="true"/>

微信小程序把玩(十一)icon组件

原文:微信小程序把玩(十一)icon组件 这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml <!--成功图标--> <icon type="success" size="40"/> <!--安全成功标志图标--> <icon type="safe_success" size="40"/> <!--提示信息图标-->

微信小程序把玩(九)scroll-view组件

原文:微信小程序把玩(九)scroll-view组件 scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块 主要属性: 使用演示: wxml <!--垂直滚动,这里必须设置高度--> <scroll-view scroll-y="true" style="height: 200px"> <vie