我的沙雕分你一
我的沙雕分你一

第三章 音乐播放器

1. 开发前准备

1.1 项目展示

音乐推荐
播放器
播放列表

1.2 项目分析

1.页面结构
从图看出，小程序分为三个区域。分别将他们命名为tab,content,player。

tab区域用来显示音乐推荐，播放器，播放列表这三个标签页的标题。如果位于当前页，该前标题文字和标题下方的线条就会变红，其他显示为白色。

content区域通过左右滑动可以实现标签页的切换。

  • 音乐推荐：向用户展示一些热门的音乐。
  • 播放器：显示当前播放的时间和进度，用户可跳转进度。
  • 播放列表：显示当前正在播放的曲目列表，用户可以进行曲目切换。

player用来显示当前正在播放的音乐信息，并提供三个按钮，功能依次为“打开播放列表”，“播放/暂停”，“下一曲”。
2. 目录结构
本程序实际上只有一个页面，即pages/index/index，而wxml被拆分成了四个文件，分别是index.wxml,info.wxml,play.wxml,playlist.wxml，整体结构在index.wxml中编写，content区域由于不同的标签页的结构不同，拆分到了三个wxml文件。

1.3 项目初始化

利用微信开发者工具新建一个项目，然后再pages/index/index.json文件中编入页面配置代码。

{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "音乐",
  "navigationBarTextStyle":"black"
}

指定导航栏背景颜色为白色，背景颜色为黑色，标题为"音乐"。

2. 标签页切换

2.1 分析

本功能为“音乐推荐”，“播放器”，“播放列表”三个标签页的切换效果。
设计思路：跟轮播图很像，content是可见区域，上面三个标签类似于焦点，用户向左划，play进入content可见区域，info进入不可见区域。

2.2 前导知识

1.swiper组件
官方文档的swiper组件介绍
通过官方文档我们知道通过改变current的值，可以切换当前显示哪一项，其值是一个从0开始的索引，对应的顺序。


            
                0
            
            
                1
            
            
                2

页面显示1。

除了索引值，我们也可以通过item-id来显示每一个。


            
                0
            
            
                1
            
            
                2

页面显示1。
2.include代码引用
在wxml中可以使用标签引用其他文件中的代码，相当于将引用的代码复制到标签的位置。

2.3 编写页面结构和样式

首先在pages/index/index.wxml中编写页面结构代码。



  
    音乐推荐
  
  
    播放器
  
  
    播放列表

上述代码中，外层结构由三个view标签(相当于div标签)组成，对应了页面的三个基本区域。然后在内容区域使用了swiper组件，用于标签页的切换，还用include标签引入了info，play，playlist三个wxml文件。
接下来在index.wxss中书写样式代码。

page{
  display:flex;
  flex-direction:column;
  background: #17181a;
  color: #ccc;
  height: 100%;
}
.tab{
  display: flex;
}
.tab-item{
  flex: 1;
  font-size: 10pt;
  text-align: center;
  line-height: 72rpx;
  border-bottom: 6rpx solid #eee;
}
.content{
  flex: 1;
}
.content> swiper {
  height: 100%;
}
.player{
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

上述代码中，
page使用了flex布局,设置子元素沿垂直方向从上到下排列；将page高度设置为100%，并将content区域设置flex:1，实现页面占满整个屏幕，tab和player分别固定在上方和下方，content的高度自动拉伸为page减去tab和player的高度，适应不同的手机屏幕。
tab区域设为flex布局，将子元素设为flex:1，使这三个子元素沿水平方向从左到右排列，并平局分布每一项的宽度。
设置content区域的swiper组件的高度为100%，从而占领整个content区域。
然后在info.wxml,play.wxml,playlist.wxml中编写简单的代码。
（1）info.wxml

info

（2）play.wxml

play

（3）playlist.wxml

playlist

2.4 实现标签页切换

在本小程序中有两种切换标签页的方法，一种是直接滑动content区域，另一种是单击tab区域中的某一个tab-item切换到对应的标签页。优先实现第二种。
修改index.wxml中tab区域，为三个tab-item绑定事件，并设置data-item属性。
代码如下

  
    音乐推荐
  
  
    播放器
  
  
    播放列表

上述代码中，data-item的值表示swiper组件中对应的swiper-item的索引。
接下来为content区域中的swiper组件的current属性绑定变量item。

然后在tab-item的changeItem事件中，将item的值设为data-item的值，即可实现切换到对应的标签页。修改index.js文件，将item和changeItem添加到代码中。

Page({
  data: {
    item:0
  },
  changeItem:function(e){
    this.setData({
      item:e.target.dataset.item
    })
  },
······

在切换标签页后，还需要修改当前标签页对应的tab-item的样式。下面通过判断变量tab的值，来为当前活跃的data-item增加一个active样式，代码如下。

  
    音乐推荐
  
  
    播放器
  
  
    播放列表

在index.wxss中编写active样式

.tab-item.active{
  color: #c25b5b;
  border-bottom-color:#c25b5b;
}

为了更改tab的值，下面为swiper组件绑定事件，代码如下。

上述代码中，changeTab事件处理函数会在swiper组件发生标签页切换时调用，接下来修改index.js,在页面数据中加入tab变量。

Page({
  data: {
    item:0，
    tab:0
  },

然后编写changeTab事件处理函数，将tab值与当前标签页一致。

changeTab:function(e){
    this.setData({
      tab:e.detail.current
    })
  },

切换标签页功能完成。

3 音乐推荐

3.1 分析

音乐推荐(content-info)是content区域中的一个标签页,其内容由三部分组成，分别是轮播图(content-info-slide),功能按钮(content-info-portal),热门音乐(content-info-list)。
content区域是swiper组件，该标签页位于索引为0的标签中。
由于content区域的可显示高度是有限的·，所以采用scroll-view组件，用于实现内容的上下滚动。

3.2 前导知识

1.scroll-view组件
官方文档的scroll-view组件介绍
2.image组件
官方文档的image组件介绍

3.3 内容区域滚动

在info.wxml中编写音乐推荐标签页中的代码。代码如下。

接下来在index.wxss中将scroll-view的高度设为100%，代码如下。

.content-info{
  height: 100%;
}

如果希望隐藏滚动条，还可加入以下代码。

/*隐藏滚动条*/
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}

3.4 轮播图

轮播图位于音乐推荐标签页的最上方，切换效果通过swiper组件来实现，图片通过image组件(可本地图片也可在网上找，我引入的是网易云音乐的轮播图，以后网易换了，就引别的)引入。在info.wxml的scroll-view组件中编写如下代码。

上述代码中，为swiper组件设置了指示点的颜色为白色半透明，当前选中的指示点颜色为白色不透明。
接下来在index.wxss中编写样式，代码如下。

.content-info-slide{
  height: 302rpx;
  margin-bottom: 20px;
}
.content-info-slide image{
  width: 100%;
  height: 100%;
}

实现效果如下。


轮播图

3.5 功能按钮

功能按钮位于轮播图的下方，在info.wxml中编写页面结构，代码如下。(图片可以在阿里矢量库中下载)

    
        
            
            私人FM
        
        
            
            每日歌曲推荐
        
        
            
            云音乐新歌榜

接下来在index.wxss中编写样式代码吗，代码如下。

.content-info-portal{
  display: flex;
  margin-bottom: 15px;
}
.content-info-portal>view{
  flex: 1;
  font-size: 11pt;
  text-align: center;
}
.content-info-portal image{
  width: 120rpx;
  height: 120rpx;
  display: block;
  margin: 20rpx auto;
}

上述代码中，设置了外层容器为flex布局，然后设置内层view为flex:1，从而使3个view标签平均分配整个容器的宽度。
编写玩代码，实现效果如下。


功能按钮

3.6 热门音乐

热门音乐位于功能按钮的下方，实现思路与功能按钮类似，在info.wxml中功能按钮代码的下方编写热门音乐代码。代码如下。


        
            快乐歌单
        
        
            
                
                
                    学习歌单～（超安静纯音）
                
            
            
                
                
                    极光轻音乐 | 与星空同眠
                
            
            
                
                
                    淦
                
            
            
                
                
                    你搜不到的宝藏系列
                
            
            
                
                
                   嘘，请安静（作业/读书/夜晚/氛围）
                
            
            
                
                
                   「汤 姆·哈 迪 专 属」

接下在index.wxss中编写样式代码，代码如下。

.content-info-list{
  font-size: 11pt;
  margin-bottom: 20rpx;
}
.content-info-list>.list-title{
  margin: 20rpx 35rpx;
}
.content-info-list>.list-inner{
  display: flex;
  flex-wrap: wrap;
  margin: 0 20rpx;
}
.content-info-list>.list-inner>.list-item{
  flex: 1;
}
.content-info-list>.list-inner>.list-item>image{
  display: block;
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  border-radius: 10rpx;
  border: 1rpx solid #555;
}
.content-info-list>.list-inner>.list-item>view{
  width: 200rpx;
  margin: 10rpx auto;
  font-size: 10pt;
}

实现效果如下。


热门音乐

4 播放器

4.1 分析

播放器(content-play)是content区域中的一个标签页,其内容由三部分组成，分别是音乐信息(content-play-info),专辑封面(content-play-cover),播放进度(content-play-progress)。该标签页位于索引为1的标签中。
明确页面结构后，对播放器的功能进行分析。具体如下。

  • 音乐信息：显示当前播放曲目的标题和艺术家。
  • 专辑封面：当音乐播放时，专辑封面会顺时针旋转。
  • 播放进度：显示当前曲目的播放时长和总时长，并提供一个进度条，当音乐播放时进度条就会增长，用户也可以手动改变进度条的进度来跳转播放进度。

4.2 前导知识

1.音频API
官方文档的介绍
2.slide组件(用于进度条)
官方文档的介绍

4.3 定义基础数据

在index.js的data对象中定义基础数据playlist，主要包括音乐的信息和音乐播放路径，代码如下所示。

playlist:[{
      id:1,
      title:'玄武之死',
      singer:'黎允文',
      src:'http://isure.stream.qqmusic.qq.com/C400002MIiSk3m0nse.m4a?guid=6844422626&vkey=DD7562F237BE001039E20BA8BB4081EF045CDE88C6C141EFF338772AF1CC4FD08004C64E00CFB590AEDCF5AA6F19128A7D51C804A07615AA&uin=0&fromtag=66',
      coverImgUrl:'https://y.gtimg.cn/music/photo_new/T002R300x300M000002hjNNE2TooAe.jpg?max_age=2592000'
    },{
      id:2,
      title:'Without U',
      singer:'Sergio',
      src:'http://isure.stream.qqmusic.qq.com/C400004gVyzF0D1PPf.m4a?guid=6844422626&vkey=5CE954664D201CF3DCED19F6FD3A8DB6F0D58E83877411A4DE3F466D482A8D8D721CE5477295E986FBB8B6A67344BBF92262D47CFB44F5A3&uin=0&fromtag=66',
      coverImgUrl:'https://y.gtimg.cn/music/photo_new/T002R300x300M000003meScq4WJVQ6.jpg?max_age=2592000'
    },{
      id:3,
      title:'美丽的神话',
      singer:'金喜善 (김희선) _ 成龙',
      src:'http://isure.stream.qqmusic.qq.com/C400000k9jj51TOfNy.m4a?guid=6844422626&vkey=CCE79A2C68488D98C0D842313BABE5358E30B9FA77715F2E2FA99DFC4046701D8569964639A4A6F2D6E0DAFAEEF869371D02B063A213D1E4&uin=0&fromtag=66',
      coverImgUrl:'https://y.gtimg.cn/music/photo_new/T002R300x300M0000023YRbq0UUpdn.jpg?max_age=2592000'
    },{
      id:4,
      title:'Daisuke',
      singer:'横田商会',
      src:'http://27.221.15.143/amobile.music.tc.qq.com/C400004NHvoq4bezhA.m4a?guid=6844422626&vkey=2835623C04A146286277B62B4AD94F83E43D158940D9D11C864668209EE9A6173416A6821A0C6BBC10E602900B4470595B393A2F80906EF4&uin=0&fromtag=66',
      coverImgUrl:'https://y.gtimg.cn/music/photo_new/T002R300x300M000000bdyFf1DKofx.jpg?max_age=2592000'
    },{
      id:5,
      title:'Pokemon Ü',
      singer:'It`s different',
      src:'http://ws.stream.qqmusic.qq.com/C400003ly9LE18HHpK.m4a?guid=6844422626&vkey=E92C38E8583B3DE8701B08A7A1301F4BB63E004DFAB64923FDB15F7FBBCDBD10550351279E71FF47829FA58CCB6DE4E0DA7ACDA223C53CFD&uin=0&fromtag=66',
      coverImgUrl:'https://y.gtimg.cn/music/photo_new/T002R300x300M0000045liZB2NGp3I.jpg?max_age=2592000'
    },{
      id:6,
      title:'Miss You',
      singer:'Fox Stevenson',
      src:'http://ws.stream.qqmusic.qq.com/C400003jErC91gSJKz.m4a?guid=6844422626&vkey=52E72CB9C7B2496FC36DEB37296E39200A417F51F68FD16C0F85E233ED0D5757F0D75769588BA361D72BBF4A112E69F842CDE7F7983A063F&uin=0&fromtag=66',
      coverImgUrl:'https://y.gtimg.cn/music/photo_new/T001R300x300M000001Rthwx2mTz1n.jpg?max_age=2592000'
    },{
      id:7,
      title:'Alone',
      singer:'Marshmello',
      src:'http://ws.stream.qqmusic.qq.com/C400001T5sEj19MXkW.m4a?guid=6844422626&vkey=8656483DCD374965B5189B65617BB87B5726883F5144CF3C735AE22346859414C73FBD17DBF1361C1A09074B8722AE6CA95B53D652C9BFED&uin=0&fromtag=66',
      coverImgUrl:'https://y.gtimg.cn/music/photo_new/T002R300x300M000000SBmte03ICax.jpg?max_age=2592000'
    }
  ],

上述代码中，
id是每条记录的唯一标识，
title是歌名，
singer是歌手，
src是网络中的音频文件链接地址，这里我找的是qq音乐的资源，方法就是点击播放后右键检查元素，看网络，然后把文件类型设置为媒体，最低下那个就是音乐然后复制值填入src就行，但是它每天都会换，一整就无效，emmm，当然你也可以自己搭个服务器，
coverImgUrl是专辑封面图片的链接地址，当然也可以用本地的。
播放列表数据准备好后，还需要再data中定义一些状态属性，来记录音乐的播放状态，播放位置等，代码如下。

state:'paused',
  playIndex:0,
  play:{
    currentTime:'00:00',
    duration:'00:00',
    percent:0,
    title:'',
    singer:'',
    coverImgUrl:'/images/test.jpg'
  }

上述代码中，
state表示音乐的播放状态，paused表示暂停，running表示正在播放，
playIndex表示当前播放的歌曲在播放列表中索引，
play对象记录了当前播放曲目的信息，
currentTime表示播放时长，
duration表示总时长，
percent表示播放进度，
title，singer，coverImgUrl，分别表示，歌名，歌手，专辑封面。

4.4 实现音乐播放功能

音乐的播放功能需要通过调用微信小程序的wx.createInnerAudioContext()接口获得一个audioCtx对象，然后利用audioCtx对象的属性和方法来实现音乐控制。
在index.js中编写代码，实现在页面打开时，自动选择播放列表的第一个曲目，代码如下。

audioCtx:null,
  onReady:function(){
    this.audioCtx=wx.createInnerAudioContext();
    //默认选择第一曲
    this.setMusic(0);
  },
  setMusic:function(index){
    var music=this.data.playlist[index];
    this.audioCtx.src=music.src;
    this.setData({
      playIndex:index,
      'play.title':music.title,
      'play.singer':music.singer,
      'play.coverImgUrl':music.coverImgUrl,
      'play.currentTime':'00:00',
      'play.duration':'00:00',
      'play.percent':0
    });
  },

上述代码中，setMusic()函数用于切换当前播放的曲目，其参数index表示播放列表数组中的某一个成员的索引值，根据索引值到播放列表中取出音乐信息之后，将src赋值给音频接口，然后将曲目信息渲染到页面。
接下来在index.wxml中编写底部播放器的代码，代码如下。



  
  
    
      {{play.title}}
    
    
      {{play.singer}}

上述代码中，图片是从阿里矢量库里下载的。
然后在index.wxss中编写样式，代码如下。

.player{
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}
.play-cover{
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}
.play-info{
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}
.play-info-singer{
  color: #888;
}
.play-controls image{
  width: 80rpx;
  height: 80rpx;
  margin-right: 15rpx;
}

上述代码中，父元素设置flex布局，内部音乐封面和播放按钮设置为固定宽高，放在页面两端，中间部分是音乐信息的显示区域。
实现效果。


播放器

为了实现单击播放按钮播放音乐，再次点击暂停音乐的效果，修改播放按钮的代码，利用条件渲染判断state的值，来显示不同的按钮，代码如下。

在index.js中编写play()和pause()，代码如下。

play:function(){
    this.audioCtx.play();
    this.setData({state:'running'})
  },
  pause:function(){
    this.audioCtx.pause();
    this.setData({state:'paused'})
  },

上述代码中，分别调用了audioCtx对象的play()和pause()方法，实现音乐的播放与暂停，同时更改当前音乐的播放状态state。
接下来还需要实现单击下一曲按钮进行换曲，在index.wxml中为按钮绑定next()事件处理函数，代码如下。

在index.js中编写事件处理函数next()，代码如下。

next:function(){
    var index=this.data.playIndex>=this.data.playlist.length-1 ? 0:this.data.playIndex + 1;
    var that=this;
    this.setMusic(index);
    if(this.data.state==="running"){
      this.play();
    }
  },

上述代码中，index用于增加当前播放的播放列表的索引，通过判断避免超过最大索引，使其在播放列表循环，还判断了当前的播放状态，如果当前状态为暂停，不会立即播放。
不知道是不是我看的书有问题(微信读书看的，白送30天，美汁儿汁儿)，这代码有bug，就是在后面写进度条那段，点击下一曲之后，进度条全变为默认的00：00，所以我又在next()中加了一段代码来使下一曲之后重新设置当前曲目的总时长。代码如下。

this.audioCtx.onCanplay(function(){
      that.setData({
        'play.duration':that.formatTime(that.audioCtx.duration),
      })
    })

上述代码中，使用了audioCtx的onCanplay方法，在音乐进入可播放状态时，设置总时长为当前歌曲的总时长，formatTime是调整时间格式的函数，与next()同级，之后在页面初次渲染时也会用到。代码如下。

formatTime:function(time){
    var minute=Math.floor(time/60)%60;
    var second=Math.floor(time)%60;
    return (minute <10?'0'+minute:minute)+':'+(second<10?'0'+second:second)
  },

接下来还需要实现单击播放列表按钮跳转到播放列表标签页，在index.wxml中为按钮绑定changePage()事件处理函数，代码如下。

在index.js中编写事件处理函数changePage()，代码如下。

changePage:function(e){
    this.setData({
      tab:e.currentTarget.dataset.page,
      item:e.currentTarget.dataset.page
    })
  },

上述代码中，点击按钮后将tab和item设置为2，实现跳转。

4.5 编写播放器页面

播放器页面主要用于显示当前播放曲目的信息，以及显示播放进度和时间。页面中显示的信息都可以在data数据中获取。在play.wxml中编写页面结构，代码如下。


        
        
            {{play.title}}
            ——{{play.singer}}——

在index.wxss中编写样式，代码如下。

.content-play{
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  height: 100%;
  text-align: center;
}
.content-play-info>view{
  color: #888;
  font-size: 11pt;
}

实现效果如下。


音乐信息

接下来在音乐信息的下方展示音乐专辑封面，在音乐列表中获取到当前音乐专辑封面的src路径，绑定到页面image组件中，代码如下。

上述代码中，animation-play-state用于控制专辑封面旋转动画的播放和暂停。
完成结构代码后，在index.wxss中编写样式，代码如下。

.content-play-cover image{
  animation: rotateImage 10s linear infinite;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  border: 1px solid #333;
}
@keyframes rotateImage{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

实现效果如下。


专辑封面

4.6 控制播放进度

在播放器页面的底部，用于显示播放进度，通过调节滑块的位置可以控制播放进度。在play.wxml中编写播放进度结构代码，代码如下。


        
            
               {{play.currentTime}} 
            
            
                
            
            
                {{play.duration}}

上述代码中，用到了slide组件，其值为播放进度play.percent。
接下来在index.wxss中编写样式，代码如下。

.content-play-progress{
  display: flex;
  align-items: center;
  margin: 0 35rpx;
  font-size: 9pt;
  text-align: center;
}
.content-play-progress>view{
  flex: 1;
}
.content-play-progress>text{
  color: white;
  margin-top: -35rpx;
}

效果如下。


进度条

然后在index.js中控制进度条的进度和时间显示(修改onReady函数)，代码如下。

onReady:function(){
    this.audioCtx=wx.createInnerAudioContext();
    var that=this;
    //播放失败检测
    this.audioCtx.onError(function(){
      console.log('播放失败'+that.audioCtx.src);
    })
    //播放完成自动换下一曲
    this.audioCtx.onEnded(function(){
      that.next();
    })
    //自动更新播放进度
    this.audioCtx.onPlay(function(){})
    this.audioCtx.onTimeUpdate(function(){
      that.setData({
        'play.duration':that.formatTime(that.audioCtx.duration),
        'play.currentTime':that.formatTime(that.audioCtx.currentTime),
        'play.percent':that.audioCtx.currentTime/that.audioCtx.duration*100
      })
    })
    //默认选择第一曲
    this.setMusic(0);
  },

上述代码中，通过调用audioCtx的onTimeUpdate()方法，获取音乐状态信息，并通过formatTime()函数处理时间格式，最后渲染到页面实现定时更新效果。
在slide组件上绑定bindchange事件，可以实现滑动进度条调节音乐播放进度。

在index.js中编写slideChange函数获取当前用户选择的进度，将时间通过audioCtx对象的seek()方法进行设置，代码如下。

  slideChange:function(e){
    var that=this;
    var second=e.detail.value*this.audioCtx.duration/100;
    this.audioCtx.seek(second);
  },

上述代码中，我运行之后发现了一个bug，在用户调节进度条之后，进度条左边的播放时间并不会跟着一起变，所以我在slideChange中添加了一些代码达到此功能，代码如下。

this.audioCtx.onSeeked(function(){
      that.setData({
        'play.duration':that.formatTime(that.audioCtx.duration),
        'play.currentTime':that.formatTime(that.audioCtx.currentTime),
        'play.percent':that.audioCtx.currentTime/that.audioCtx.duration*100
      })
    })

上述代码使用了audioCtx对象的onSeeked()方法，当发生跳转时间时，会重新渲染页面。

5 播放列表

5.1 分析

播放列表(content-play)是content区域中的最后一个标签页,其内容是一个列表，通过列表渲染(wx:for循环)自动生成。该标签页位于索引为2的标签中。

5.2 编写页面结构和样式

播放列表的数据在前面就已经定义，下面在playlist.wxml中编写页面，代码如下。


        
            
            
                
                    {{item.title}}
                
                
                    {{item.singer}}
                
            
            
                
                    正在播放

上述代码中，wx:if判断当前播放的索引playIndex是否与当前播放列表数据的索引In，如果index相同则显示正在播放。
在index.wxss中编写样式，代码如下。

.playlist-item{
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #333;
  height: 112rpx;
}
.playlist-cover{
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333;
}
.playlist-info{
  flex: 1;
  font-size: 10pt;
  line-height: 28rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}
.playlist-info-singer{
  margin-top: 15rpx;
  color: #888;
}
.playlist-controls{
  font-size: 10pt;
  margin-top: -50rpx;
  margin-right: 20rpx;
  color: #c25b5b;
}

实现效果如下。


播放列表

5.3 实现换曲功能

当用户单击播放列表中的某一项之后，会触发执行对应的曲目。在index.js中编写代码。

change:function(e){
    this.setMusic(e.currentTarget.dataset.index);
    this.play();
  }

你可能感兴趣的:(第三章 音乐播放器)

  • ARM中断处理过程 落汤老狗 嵌入式linux
    一、前言本文主要以ARM体系结构下的中断处理为例，讲述整个中断处理过程中的硬件行为和软件动作。具体整个处理过程分成三个步骤来描述：1、第二章描述了中断处理的准备过程2、第三章描述了当发生中的时候，ARM硬件的行为3、第四章描述了ARM的中断进入过程4、第五章描述了ARM的中断退出过程本文涉及的代码来自3.14内核。另外，本文注意描述ARM指令集的内容，有些sourcecode为了简短一些，删除了T
  • 小说《灰色年代》第三章、书中自有黄金屋/第二节（1）/作者:邵明 房作者_0970
    ——第三章、第二节、科举与国考（1）科举制的简介：科举制度是古代读书人，参加选拔考试的制度，它是历代通过考试选拔官吏的一种手段，由于采用分科取士的办法，所以叫做科举。科举制从隋代开始实行，到清光绪三十一年（1905年）举行最后一科进士考试为止，经历了1300年，1905年9月2日，清政府废除科举制度。科举考前三名，分别为状元、榜眼、探花。这种划分和称谓是在元朝时确定下来的，明清时期沿袭了元朝的这种
  • 6.0 践行打卡 D47 星月格格
    去努力改变1.运动步行13000+8分钟腿部拉伸2.阅读《墨菲定律》第三章第三节:霍桑效应～适度发泄，才能轻装上阵“霍桑效应”这一概念，源自于1924年一个1933年间以哈佛大学心理专家乔治·埃尔顿·梅奥教授为首进行的一系列工厂工人的谈话实验研究。“霍桑效应”告诉我们，在工作，生活中总会产生数不清的情绪反应，其中很大一部分是负面的负面情绪的积累会影响人的精神和心情，不仅仅会影响个人健康，还会破坏人
  • 【菊言菊语】和爱丽丝一起去“漫游”（五） 山中雏菊
    思考：本节微课讲述了书中一些典故的来历。您对哪一个典故印象深刻？还有哪些书籍或诗词也引用了典故？今天的微课继续跟着爱丽丝一起去漫游，《爱丽丝漫游奇境记》荒诞不经的故事情节让全世界的人们都为之疯狂。书中引用大量典故，这是作者卡罗尔写作的又一特点。第三章《绕圈跑和尾巴》中征服者威廉；第五章《毛毛虫的劝告》中改编的诗歌；第六章《猪和胡椒》中“公爵”“柴郡猫”；第七章《疯狂的茶会》中“疯帽匠”“三月兔”“
  • 《此生，你做了谁的过客？》第三章 五谷人生
    有人说，世道缈于蚁穴，人情浮比轻舟。我只愿自己能够撑起一片天，不需要很大，有枝可依，远离那蚁穴，远离那轻舟。可尘埃万倾，悲欢来去。雁字回首，过了忘川，又回江南。我忘记了自己是怎样走过匆匆的时光，也找不到岁月留下得那些痕迹。那些独自守候的春秋，那些风与月为伍，赤脚走过的四季，花开花落无人相伴的角落。也许是不知梦的缘故，流离之人大多追逐幻影，我开始慢慢的回到最初的记忆。舅舅家种了十几亩甜瓜，每逢甜瓜收
  • 基于 LangChain 开发应用程序第三章-储存 明志刘明 大模型学习手册langchain
    需要学习提示词工程的同学请看面向开发者的提示词工程需要学习ChatGPT的同学请查看搭建基于ChatGPT的问答系统本部分之前的章节可以查看基于LangChain开发应用程序第一章-简介基于LangChain开发应用程序第二章-提示和输出第三章储存在与语言模型交互时，你可能已经注意到一个关键问题：它们并不记忆你之前的交流内容，这在我们构建一些应用程序（如聊天机器人）的时候，带来了很大的挑战，使得对
  • elasticsearch数据迁移之elasticdump 迷茫运维路 elasticsearch中间件elasticsearchlinux运维
    系列文章目录第一章es集群搭建第二章es集群基本操作命令第三章es基于search-guard插件实现加密认证第四章es常用插件文章目录系列文章目录前言一、elasticdump是什么？二、安装elasticdump工具1.离线安装2.在线安装三、elasticdump相关参数四、使用elasticdump进行数据备份五、使用elasticdump进行数据恢复前言在企业实际生产环境中,避免不了要对
  • 《白鹿原》读书笔记第三、四章 原生远行之恋
    第三章概括历经了父亲离世，妻子短命等一系列不幸遭遇，嘉轩已无路可走，想卖掉自家的二亩水地（实则是想通过一些手段获取陆家的“宝地”：白鹿地）后与冷先生商量，希望他做中人。父亲刚去世不久，变卖家产本就是大不孝行为，这让嘉轩和冷先生僵持了许久。最终通过嘉轩的一番说辞，冷先生还是答应了请求。冷先生去鹿家，给陆泰恒说起了这事。鹿泰恒也假意推辞，说是不能趁着嘉轩父亲刚刚去世，就去买他家的地，这是不义之举。而冷
  • Python计算机视觉编程 第三章 图像到图像的映射 一只小小程序猿 计算机视觉pythonopencv
    目录单应性变换直接线性变换算法仿射变换图像扭曲图像中的图像分段仿射扭曲创建全景图RANSAC拼接图像单应性变换单应性变换是将一个平面内的点映射到另一个平面内的二维投影变换。在这里，平面是指图像或者三维中的平面表面。单应性变换具有很强的实用性，比如图像配准、图像纠正和纹理扭曲，以及创建全景图像。单应性变换本质上是一种二维到二维的映射，可以将一个平面内的点映射到另一个平面上的对应点。代码如下：impo
  • 小说‖向上的一颗心「23」 八道九味
    第三章，第七节:被宠爱赵玉海盛好汤摘了围裙准备要去医院，正好换换张老太太吃饭，他拎着保温盒往外走时，赵老太太挥了挥手说“玉海，你等等，你别去了，我去我去……”赵玉海“妈，我去吧！您在家里休息休息吧！这几天你们二老也跟着受累！”杨桃“我去吧！阿姨你休息吧，我去医院”赵玉海看着杨桃那个天真的模样真是无语了，他说“杨桃，你能找着医院吗？还说你去，让你去，再把你丢了，行了！你们俩在家吧！我自己去”赵老太太
  • 《南城琐记》第三章片段 作家韩煊
    两个小时的作业时间，她一直认真地读题、思考、打草稿、写答案，速度比较慢，偶尔也会看旁边同学的讲义两眼。到了讲评时间，老师会喊一声，然后坐在房间里桌子上的学生们会端着椅子出来，坐在大厅。老师家不大，整个大厅坐满了人，老师在餐桌旁的一块黑板上评讲。当时她出来后坐在了我旁边，翘着二郎腿，身体蜷缩着。老师评讲时，她时不时地会朝我讲义上看两眼。我猜她是担心自己漏了什么老师讲的重要的步骤，有几次看了我的讲义后
  • 2018.12.29 杨慧裕
    企业名称：海口美兰美购城实业有限公司【时间】始于2018/5/1持续于2019/4/30日精进打卡第246天【知~学习】《六项精进》4遍共581遍《大学》1遍246遍《活法》读完第二遍第17页《赢在执行力》第三章《历史的荷尔蒙》第八节《数据化管理》重点研究人货场及经营指标【经典名句分享】若不是心宽似海，哪有人生风平浪静【行~实践】一、修身：（对自己个人）1.压腿15分钟2.步行1万步3.上下爬楼梯
  • 旅游网站设计与实现：SpringBoot框架案例分析 2401_85763803 旅游springboot后端
    目录摘要2Abstract31.1课题开发的背景41.2课题研究的意义41.3研究内容5第二章系统开发关键技术62.1JSP技术介绍62.2JAVA简介62.3MyEclipse开发环境72.4Tomcat服务器72.5SpringBoot框架72.6MySQL数据库8第三章系统分析93.1系统可行性研究93.2性能分析103.3业务流程分析10第四章系统的总体设计134.1系统功能结构设计134
  • 老李灵异档案室【中国篇】 夜空下漫步
    老李灵异档案室【中国篇】第三章凶宅下欢迎来到老李档案室，咱们继续上章的故事。打开尘封已久的档案，看灵异故事！带你进入灵异世界！铁西鬼楼据了解，关于铁西鬼楼的传说在沈阳地区可谓是人人皆知，就连当地有开发商想去拆迁最后也被吓跑，甚至连CCTV《探索与发现》栏目也曾经去探访过，可见沈阳铁西鬼楼事件的影响力有多大。那沈阳铁西鬼楼是真的吗？在那里到底发生了什么样的灵异现象，会让一座普通的楼房成为沈阳人口中的
  • 南昆道长 第三章 桃园里的女鬼（3） 刘笑东
    上一章节点此阅读我施展法术逼出了藏在水井里的女鬼，那女鬼蓦然出现在我眼前，她身体前倾，面目狰狞，眼睛里露出两道凶光，很显然她被我的举动激怒了。她气势汹汹地质问我：“你是谁？”她的语气中充满了杀气，一股强大的阴气向我扑来，直吹得我手臂发冷。我盘腿坐定，并不作答。我挥动着手中的拂尘，引导一股气流向她飞奔而去，她被结结实实地击中了。彼时她的身体扭转向一边，她头发凌乱，衣服被胡乱地吹起，俨然一副窘态，完全
  • 户外读经典 飞向理想
    今天，阳光明媚，微风习习。我们图书馆读书的小朋友相约来到森林公园。那里的野花开了，草绿了，大树也吐出嫩芽，蝴蝶和蜜蜂在花丛中捉迷藏。哦，春天来啦！图片发自App在读书开始之前，我们王老师先让我们盘腿坐在地毯上，头上顶一本书，让我们的心静下来。大概坐了十分钟，我的心静了下来。我们开始读书了，我和杜康卓先背了《论语》的第三章。然后我们了王老师让我们复习的多读几遍。图片发自App我们读完书，是自由活动时
  • 【CSS in Depth 2 精译_027】4.4 Flexbox 元素对齐、间距等细节处理（下）+ 4.5 本章小结 安冬的码畜日常 CSSinDepth2css前端css3html5flexboxcss布局
    当前内容所在位置（可进入专栏查看其他译好的章节内容）第一章层叠、优先级与继承（已完结）1.1层叠1.2继承1.3特殊值1.4简写属性1.5CSS渐进式增强技术1.6本章小结第二章相对单位（已完结）2.1相对单位的威力2.2em与rem2.3告别像素思维2.4视口的相对单位2.5无单位的数值与行高2.6自定义属性2.7本章小结第三章文档流与盒模型（已完结）3.1常规文档流3.2盒模型3.3元素的高度
  • 《中庸》第三、四章译文及注解 星星点灯_cym
    第三章(最高的道德标准)【原文】子日，“中庸其至矣乎！民鲜能久矣！”（第3章）【注释】（1）鲜：少，不多。【译文】孔子说：“中庸大概是最高的德行了吧！大家缺乏它已经很久了！”【读解】正因为它是最高的德行，最高的道德标准，所以，很少有人能够真正实行它。这正如我们要求“大公无私”，很少有人能做到，提出“国家、集体、个人利益三兼顾”，就比较容易做到了。要求“跑步进入共产主义”难以做到，提出“社会主义初级
  • 计算机视觉——第三章 图像拼接 JMU15980999055 python计算机视觉人工智能
    计算机视觉——第三章图像拼接1.图像全景拼接的原理和过程的简要介绍1.1特征点提取和匹配1.2图像配准1.3图像拼接2.实现多图像拼接2.1图片集说明2.2实验代码2.3实验结果及其分析3.两张不同角度的图像拼接3.1图片集说明3.2实验代码3.3实验结果及其分析总结1.图像全景拼接的原理和过程的简要介绍在同一位置拍摄的两幅或者多幅图片是单应性相关的，我们经常使用该约束将很多图像缝补起来，拼成一个
  • 双盗-第三章 杨三月
    第三章桃状掐丝团花五足三层银薰炉香雾渺渺几案上待客的青花瓷茶碗盛著一两茶一两金的西山白露茶已经凉了。主位上坐著的修长高大、威仪凛凛的年轻男子，双目垂敛，神情难测，全身逼人贵气，孪生昆仑奴像两座守护门神分站左右。他就是近日引起扬州官商骚动的贵客，来自京城的大商人欧阳琰。他好大的气派，竟让朝廷派驻扬州的皇亲国戚淮南节度史长孙弦足足等了两个时辰。“怎麽样？”长孙弦局促不安地直搓著手。“二皇子、三皇子都跟
  • 《青铜葵花》第三章“老槐树”1 8fa3cf10256d
    干校的人像往常一样忙碌的生活着，他们大老远的从城市跑来，干着繁重枯燥的活，这使大麦地的人很是疑惑，他们怎么也搞不懂干校人的心思，大麦地人是迫于劳动的。干校的人每天都很忙碌，没有人有时间去照顾葵花，他们迫于这个情况，情急之下，决定让大麦地人收养，也可以说是寄养。大麦地得到这个消息后，村长异常高兴，并且隆重地宣布了。决定让村里的人都去村口的“老槐树”下迎接。
  • 普希金诗体小说《叶甫根尼·奥涅金》（第三章）16 六铺炕日出
    十六却说那爱情痛楚，将塔吉亚娜追逐，花园中且行且苦，突然双眼凝视低，慵懒再远不愿去。胸脯急剧起又伏，双颊瞬间火焰覆，呼吸仿佛唇上驻，眼冒金星耳呼呼......黑夜降临；月亮出，远远天边巡行路，夜莺树林阴翳里，嘹亮婉转唱歌曲。塔吉亚娜未入眠，她与奶妈轻声谈：XVIТоскалюбвиТатьянугонит,Ивсадидетонагрустить,Ивдругнедвижныочиклонит,И
  • NISP 一级 —— 考证笔记合集 SRC_BLUE_17 网络安全资源导航#网络安全相关笔记笔记网络安全证书获取NISP
    该笔记为导航目录，在接下来一段事件内，我会每天发布我关于考取该证书的相关笔记。当更新完成后，此条注释会被删除。第一章信息安全概述1.1信息与信息安全1.2信息安全威胁1.3信息安全发展阶段与形式1.4信息安全保障1.5信息系统安全保障第二章信息安全基础技术2.1密码学2.2数字证书与公钥基础设施2.3身份认证2.4访问控制2.5安全审计第三章网络安全防护技术3.1网络基础知识3.2网络安全威胁3.
  • 第三章 清酒郁不欢
    此时的墨连城回到了学校，刚刚进入校门便迎来了几人，几人对墨连城冷嘲热讽。说道：哟这不是墨大校草吗？你还敢回来啊。墨连城闻言道：我为何不敢回来？几人继续说道：墨大校草你自己的所作所为不用我们说出来吧？墨连城闻言转身离开。几人以为墨连城怕了，对墨连城的嘲讽越来越放肆。而墨连城就像没听见一般。墨连城只觉得可笑，前世的他早已争战数千年，见过无数死亡，这一点嘲讽激怒不了他。墨连城回到教室，刚坐下，周围的人便
  • 2021-10-12 星期二 徐Ares
    今天这个时间没有继续读书，看着明天的问题，我决定一定会就开始第三章的阅读。今天翻看了群里对于第二章问题的一些答案。看着看着发现，我们虽然天各一方，但还有很多的童年经历是相似的。有种自己并不孤单的感觉，也开始了对过往童年的一种释怀。也许这也是人是城邦产物的一层意义吧。这个100多人的微信群俨然是一个小型的城堡，我们在这样的环境下，互相倾诉。在提出问题，解答问题的同时，我们也更多的感受到了温暖，进而对
  • 【原创武侠连载】墨乱：邪蟒人 白虹引雪
    目录第一卷楔子第一卷第一章第一卷第二章第一卷第三章第一卷第四章第一卷第五章第一卷第六章
  • 2021-06-12#共读学习#第6天 找准目标让压力变动力 淡淡的糖糖
    共读书籍：《不用督促的学习》作者：苏晓航书籍来源：纸质书籍共读时间：2021年6月12日共读章节：第三章第三节作业、考试是压力还是动力？找准目标，让压力变动力【知识点】一、孩子做作业总是敷衍，关键要让他明白这一点。1、作业是一个练习的过程，这个过程允许孩子不会，这个过程允许孩子出错，这个过程允许孩子害怕困难。2、作业需要孩子学会新知识，掌握新能力的过程3、被盯着做作业的压力，让孩子失去了自我发现，
  • 在 Linux 中如何检查正在运行的进程 IT孔乙己 linuxdebian运维
    每天，开发人员都会在终端中使用各种应用程序并运行命令。这些应用程序可能包括浏览器、代码编辑器、终端、视频会议应用程序或音乐播放器。对于你打开的每个软件应用程序或你运行的命令，它都会创建一个进程或任务。Linux操作系统和现代计算机的一大优点是它们支持多任务处理，所以多个程序可以同时运行。你有没有想过如何检查机器上运行的所有程序？这篇文章就是为你准备的，我将向你展示如何列出、管理和终止Linux电脑
  • 第三章 大年初六 秋一只
    今天也是12点半小伊准时到岗，穿好围裙站在吧台里，看着诗诗说：带了点年货，在仓库里，自己拿去吃。诗诗走进仓库说：哇，带了那么多。小伊走到仓库的门口说：放这，想吃就拿。诗诗：我先下班吃饭，走咯。诗诗便拿着自己带的饭菜去图书仓库吃了。小伊：好。员工吃饭都是去图书仓库吃的，比较大，吃完累了可以趴着休息一下。小伊看没单要做，就去外围巡视了一圈，有几桌顾客，便帮他们都加了水，看到可以收的空盘子或杯子，就收走
  • 《荣格与分析心理学》56-70 有福不享是傻子
    第三章分析心理学的基本理论——原型的理论荣格说，原型是人类原始经验的集结，它们像命运一样伴随着我们每一个人，其影响可以在我们每个人的生活中被感觉到。原型赋予某些心理内容以其独特的形式。同时，荣格还提出主要有圆形所构成的集体无意识具有一种与所有的地方和所有的个人皆符合的大体相似的内容和行为方式。由于集体无意识具有这样一种普遍的表现方式，因此他就组成了一种超个人的心理基础。普遍地存在于我们每个人身上，
  • eclipse maven IXHONG eclipse
    eclipse中使用maven插件的时候，运行run as maven build的时候报错 -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable and mvn script match.   可以设一个环境变量M2_HOME指
  • timer cancel方法的一个小实例 alleni123 多线程timer
    package com.lj.timer; import java.util.Date; import java.util.Timer; import java.util.TimerTask; public class MyTimer extends TimerTask { private int a; private Timer timer; pub
  • MySQL数据库在Linux下的安装 ducklsl mysql
    1.建好一个专门放置MySQL的目录 /mysql/db数据库目录 /mysql/data数据库数据文件目录 2.配置用户，添加专门的MySQL管理用户 >groupadd mysql ----添加用户组 >useradd -g mysql mysql ----在mysql用户组中添加一个mysql用户 3.配置，生成并安装MySQL >cmake -D
  • spring------>>cvc-elt.1: Cannot find the declaration of element Array_06 springbean
    将-------- <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"     xmlns:xsi="http://www.w3
  • maven发布第三方jar的一些问题 cugfy maven
    maven中发布 第三方jar到nexus仓库使用的是 deploy:deploy-file命令 有许多参数，具体可查看 http://maven.apache.org/plugins/maven-deploy-plugin/deploy-file-mojo.html 以下是一个例子： mvn  deploy:deploy-file -DgroupId=xpp3
  • MYSQL下载及安装 357029540 mysql
        好久没有去安装过MYSQL，今天自己在安装完MYSQL过后用navicat for mysql去厕测试链接的时候出现了10061的问题，因为的的MYSQL是最新版本为5.6.24，所以下载的文件夹里没有my.ini文件，所以在网上找了很多方法还是没有找到怎么解决问题，最后看到了一篇百度经验里有这个的介绍，按照其步骤也完成了安装，在这里给大家分享下这个链接的地址
  • ios TableView cell的布局 张亚雄 tableview
      cell.imageView.image = [UIImage imageNamed:[imageArray objectAtIndex:[indexPath row]]];           CGSize itemSize = CGSizeMake(60, 50);   &nbs
  • Java编码转义 adminjun java编码转义
    import java.io.UnsupportedEncodingException; /** * 转换字符串的编码 */ public class ChangeCharset { /** 7位ASCII字符，也叫作ISO646-US、Unicode字符集的基本拉丁块 */ public static final Strin
  • Tomcat 配置和spring aijuans spring
    简介 Tomcat启动时，先找系统变量CATALINA_BASE，如果没有，则找CATALINA_HOME。然后找这个变量所指的目录下的conf文件夹，从中读取配置文件。最重要的配置文件：server.xml 。要配置tomcat，基本上了解server.xml，context.xml和web.xml。 Server.xml --  tomcat主
  • Java打印当前目录下的所有子目录和文件 ayaoxinchao 递归File
    其实这个没啥技术含量，大湿们不要操笑哦，只是做一个简单的记录，简单用了一下递归算法。   import java.io.File; /** * @author Perlin * @date 2014-6-30 */ public class PrintDirectory { public static void printDirectory(File f
  • linux安装mysql出现libs报冲突解决 BigBird2012 linux
    linux安装mysql出现libs报冲突解决 安装mysql出现 file /usr/share/mysql/ukrainian/errmsg.sys from install of MySQL-server-5.5.33-1.linux2.6.i386 conflicts with file from package mysql-libs-5.1.61-4.el6.i686  
  • jedis连接池使用实例 bijian1013 redisjedis连接池jedis
    实例代码： package com.bijian.study; import java.util.ArrayList; import java.util.List; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import redis.clients.jedis.JedisPoo
  • 关于朋友 bingyingao 朋友兴趣爱好维持
      成为朋友的必要条件：    志相同，道不合，可以成为朋友。譬如马云、周星驰一个是商人，一个是影星，可谓道不同，但都很有梦想，都要在各自领域里做到最好，当他们遇到一起，互相欣赏，可以畅谈两个小时。     志不同，道相合，也可以成为朋友。譬如有时候看到两个一个成绩很好每次考试争做第一，一个成绩很差的同学是好朋友。他们志向不相同，但他
  • 【Spark七十九】Spark RDD API一 bit1129 spark
    aggregate package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} //测试RDD的aggregate方法 object AggregateTest { def main(args: Array[String]) { val conf = new Spar
  • ktap 0.1 released bookjovi kerneltracing
    Dear, I'm pleased to announce that ktap release v0.1, this is the first official release of ktap project, it is expected that this release is not fully functional or very stable and we welcome bu
  • 能保存Properties文件注释的Properties工具类 BrokenDreams properties
            今天遇到一个小需求：由于java.util.Properties读取属性文件时会忽略注释，当写回去的时候，注释都没了。恰好一个项目中的配置文件会在部署后被某个Java程序修改一下，但修改了之后注释全没了，可能会给以后的参数调整带来困难。所以要解决这个问题。     &nb
  • 读《研磨设计模式》-代码笔记-外观模式-Facade bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* * 百度百科的定义： * Facade（外观）模式为子系统中的各类（或结构与方法）提供一个简明一致的界面， * 隐藏子系统的复杂性，使子系统更加容易使用。他是为子系统中的一组接口所提供的一个一致的界面 * * 可简单地
  • After Effects教程收集 cherishLC After Effects
    1、中文入门 http://study.163.com/course/courseMain.htm?courseId=730009 2、videocopilot英文入门教程（中文字幕） http://www.youku.com/playlist_show/id_17893193.html 英文原址： http://www.videocopilot.net/basic/ 素
  • Linux Apache 安装过程 crabdave apache
    Linux Apache 安装过程   下载新版本： apr-1.4.2.tar.gz（下载网站：http://apr.apache.org/download.cgi） apr-util-1.3.9.tar.gz（下载网站：http://apr.apache.org/download.cgi） httpd-2.2.15.tar.gz（下载网站：http://httpd.apac
  • Shell学习 之 变量赋值和引用 daizj shell变量引用赋值
    本文转自：http://www.cnblogs.com/papam/articles/1548679.html Shell编程中，使用变量无需事先声明，同时变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z） 中间不能有空格，可以使用下划线（_） 不能使用标点符号 不能使用bash里的关键字（可用help命令查看保留关键字） 需要给变量赋值时，可以这么写：
  • Java SE 第一讲（Java SE入门、JDK的下载与安装、第一个Java程序、Java程序的编译与执行） dcj3sjt126com javajdk
    Java SE 第一讲： Java SE：Java Standard Edition Java ME: Java Mobile Edition Java EE：Java Enterprise Edition Java是由Sun公司推出的（今年初被Oracle公司收购）。 收购价格：74亿美金 J2SE、J2ME、J2EE JDK：Java Development
  • YII给用户登录加上验证码 dcj3sjt126com yii
    1、在SiteController中添加如下代码： /** * Declares class-based actions. */ public function actions() { return array( // captcha action renders the CAPTCHA image displ
  • Lucene使用说明 dyy_gusi Lucenesearch分词器
    Lucene使用说明 1、lucene简介 1.1、什么是lucene     Lucene是一个全文搜索框架，而不是应用产品。因此它并不像baidu或者googleDesktop那种拿来就能用，它只是提供了一种工具让你能实现这些产品和功能。 1.2、lucene能做什么     要回答这个问题，先要了解lucene的本质。实际
  • 学习编程并不难,做到以下几点即可! gcq511120594 数据结构编程算法
    不论你是想自己设计游戏，还是开发iPhone或安卓手机上的应用，还是仅仅为了娱乐，学习编程语言都是一条必经之路。编程语言种类繁多，用途各 异，然而一旦掌握其中之一，其他的也就迎刃而解。作为初学者，你可能要先从Java或HTML开始学，一旦掌握了一门编程语言，你就发挥无穷的想象，开发 各种神奇的软件啦。 1、确定目标 学习编程语言既充满乐趣，又充满挑战。有些花费多年时间学习一门编程语言的大学生到
  • Java面试十问之三：Java与C++内存回收机制的差别 HNUlanwei javaC++finalize()堆栈内存回收
    大家知道， Java 除了那 8 种基本类型以外，其他都是对象类型（又称为引用类型）的数据。 JVM 会把程序创建的对象存放在堆空间中，那什么又是堆空间呢？其实，堆（ Heap）是一个运行时的数据存储区，从它可以分配大小各异的空间。一般，运行时的数据存储区有堆（ Heap）和堆栈（ Stack），所以要先看它们里面可以分配哪些类型的对象实体，然后才知道如何均衡使用这两种存储区。一般来说，栈中存放的
  • 第二章 Nginx+Lua开发入门 jinnianshilongnian nginxlua
    Nginx入门 本文目的是学习Nginx+Lua开发，对于Nginx基本知识可以参考如下文章： nginx启动、关闭、重启 http://www.cnblogs.com/derekchen/archive/2011/02/17/1957209.html agentzh 的 Nginx 教程 http://openresty.org/download/agentzh-nginx-tutor
  • MongoDB windows安装 基本命令 liyonghui160com
      windows安装    安装目录：   D:\MongoDB\   新建目录   D:\MongoDB\data\db   4.启动进城：   cd D:\MongoDB\bin   mongod -dbpath D:\MongoDB\data\db   &n
  • Linux下通过源码编译安装程序 pda158 linux
    一、程序的组成部分 　　Linux下程序大都是由以下几部分组成： 　　二进制文件：也就是可以运行的程序文件 　　库文件：就是通常我们见到的lib目录下的文件 　　配置文件：这个不必多说，都知道 　　帮助文档：通常是我们在linux下用man命令查看的命令的文档 　　 二、linux下程序的存放目录 　　linux程序的存放目录大致有三个地方： 　　/etc, /b
  • WEB开发编程的职业生涯４个阶段 shw3588 编程Web工作生活
    觉得自己什么都会 2007年从学校毕业，凭借自己原创的ASP毕业设计，以为自己很厉害似的，信心满满去东莞找工作，找面试成功率确实很高，只是工资不高，但依旧无法磨灭那过分的自信，那时候什么考勤系统、什么OA系统、什么ERP，什么都觉得有信心，这样的生涯大概持续了约一年。 根本不是自己想的那样 2008年开始接触很多工作相关的东西，发现太多东西自己根本不会，都需要去学，不管是asp还是js，
  • 遭遇jsonp同域下变作post请求的坑 vb2005xu jsonp同域post
    今天迁移一个站点时遇到一个坑爹问题,同一个jsonp接口在跨域时都能调用成功,但是在同域下调用虽然成功,但是数据却有问题. 此处贴出我的后端代码片段 $mi_id = htmlspecialchars(trim($_GET['mi_id '])); $mi_cv = htmlspecialchars(trim($_GET['mi_cv ']));  贴出我前端代码片段: $.aj
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他