加入缓存提升用户体验

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

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

解决缓存带来的问题

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

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

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样式复用的更多相关文章

  1. 小程序开发-页面导航栏navigation-bar组件

    导航栏navigation-bar 页面导航条配置节点,用于指定导航栏的一些属性.只能是 page-meta 组件内的第一个节点,需要配合它一同使用. 通过这个节点可以获得类似于调用 wx.setNa ...

  2. 微信小程序开发-入门到熟练(wepy-初级篇)

    Title:最近做完了项目,review代码的同时,就想写一篇详细的小程序开发经历,记录自己的项目从0到1的过程 Desc : 小程序从0到1,从小白到完成项目,你需要这样做: step1: 基础知识 ...

  3. 微信小程序开发笔记02

    今天学习了微信小程序开发用到的语言,wxml与wxss语言基本语法与html和css基本语法相似,学习起来相对简单.在小程序主要的语言是js(javascript,跟准确的说是jqery) ,由于这种 ...

  4. 微信小程序开发03-这是一个组件

    编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...

  5. 微信小程序开发 [02] 页面注册和基本组件

    1.页面注册 既然我们希望跳转到新的页面,那自然要新建页面相关的文件才行.在开篇已经讲过,一个小程序页面由四个文件组成,假如我们的页面名为welcome,那么这四个文件则是: welcome.js w ...

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

    接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是 ...

  7. 【小程序】小程序开发自定义组件的步骤>>>>>>>>>小程序开发过程中报错:jsEnginScriptError

    报错:jsEnginScriptError VM6342: jsEnginScriptError Component is not found in path "component/spac ...

  8. 小程序开发-6个优秀的UI组件库

    微信小程序开发,当原生的控件不能满足我们时,可以尝试下面几个比较优秀的组件库. 1. WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验. ...

  9. 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

随机推荐

  1. eclipse中对Hadoop项目进行mvn clean install时报错的处理

    [ERROR] Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean (default-clean) ...

  2. ADOBE READER把PDF转换成WORD教程

    目前国外很多软件的支持信息都使用PDF方式进行发布,如果没有Adobe  Reader,无法查看其内容,如果没有相关的编辑软件又无法编辑PDF文件.转换为DOC格式则可以实现编辑功能.尽管有些软件也可 ...

  3. Appium的安装-Mac平台(命令行 & dmg)

    其实Appium的安装方式主要有两种: 1)自己安装配置nodejs的环境,然后通过npm进行appium的安装 2)直接下载官网提供的dmg进行安装,dmg里面已经有nodejs的环境和appium ...

  4. webpack之react开发前准备

    今天抽出空来,翻了翻webpack之react的书籍,看到刚出的es6语法,貌似是简单了不少,但是兼容性确实不容乐观,如果实在要用那也不是不可以的,首先就跟随我来看下这个插件吧: Babel:这个插件 ...

  5. 巧用padding生成正方形DIV

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Handler的简单使用介绍

    Handler在android程序开发中使用的非常频繁.我们知道android是不允许在子线程中更新UI的,这就需要借助Handler来实现,那么你是否想过为什么一定要这个这样子做呢?而且Handle ...

  7. Yii的事件和行为的区别和应用

    关于 Yii 的事件和行为的描述,可参考 http://www.yiiframework.com/doc/api/1.1/CComponent 事件 事件模型就是设计模式中的“观察者模式”:当对象的状 ...

  8. UVa 12169 - Disgruntled Judge(拓展欧几里德)

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  9. 「hihocoder1413 Rikka with String」

    题目 哈哈哈哈哈哈哈哈哈哈我还没自闭 好像前后调了两天了 哈哈哈哈哈哈哈哈哈哈我还没自闭 这道题就是给定一个小写字母串,回答分别把每个位置上的字符替换为\(#\)后的本质不同的子串数 首先就是跨过这个 ...

  10. 【[USACO15JAN]草鉴定Grass Cownoisseur】

    这大概是我写过的除了树剖以外最长的代码了吧 首先看到有向图和重复经过等敏感词应该能想到先tarjan后缩点了吧 首先有一个naive的想法,既然我们要求只能走一次返回原点,那我们就正着反着建两遍图,分 ...