1. 学習目標
1. swiper コンポーネントと scroll-view コンポーネントの使用をマスターする
2. 画像コンポーネントの使用をマスターする
3.Audio APIの使い方をマスターする
4. スライダー コンポーネントの使用をマスターする
2. 開発前の準備
音楽アプレット プロジェクト効果表示:
1.ページ構造図
タブ ナビゲーション バー
コンテンツ コンテンツ エリア
プレーヤー 音楽再生コントロール
2. プロジェクトの初期化
開発者ツールは空のプロジェクトを作成します:
{"pages:["pages/index/index"
]
}
“navigationBarBackgroudColor”:"#fff,
“navigationBartitletext”:“音乐,”
“navigationBarBackgroudColor”:“black”,
3. タスク分析
タブとページ info.wxml、play.wxml、palylist.wxml
4.予備知識
swiper コンポーネントは、スライドするページ構造を書き込みます
<swiper>
<swiper-item style="background:#ccc">0</swiper-item>
<swiper-item style="background:#ddd">1</swiper-item>
<swiper-item style="background:#eee">2</swiper-item>
</swiper-item>
swiper コンポーネントは、スライド ページ構造の index.wxml を書き込みます。
<swiper current-item-id="c">
< swiper-item item-id="a"> <image
src= "https://assets.lexus.com.cn/images/index/kv/2880x1480. newes. 1.jpg?x-Oss-
process=image/resize,w. 1898/quality.q. 80" mode= "widthFix" > </image> </swiper-item>
<swiper-item item-id="b"> <image src= https://assets.exus.com.cn/images/models/s/s -kv-1 2880.jpg?x-oss-
process=image/resize,w. 1898/quality.q. 80" mode= "widthFix" > </image> </swiper-item>
<swiper-item item-id="c"> <image src="https://assets.lexus.com.cn/images/index/kv/ux. 300e-kv-1-2880.jpg?x-
oss-process= image/resize,w 1898/quality,q 80" mode="widthFix"> </image> </swiper-item>
</swiper>
スワイパー コンポーネントは、スライド ページ構造 index.wxss を書き込みます。
image{
width:100%;
}
インクルードの主な目的:
1. コードを複数のファイルに分割して、コードを見つけやすくします。
2. コードの共通部分を抽出します。外部ファイル経由で導入されました。
<include src="header.wxml />
<view>body</view>
<include src="footer.wxml " />
3. タブ切り替え
1. ページとスタイル:
<view class="tab>
<view class="tab-item">音乐推荐</view>
</view>
<!---内容区域--->
<view class="content"></view>
<!---底部播放器--->
<view class="player"></view>
2. 音楽アプレットの基本的なページとスタイル:
<!--标签页标题-->
<view class=" tab">
<view class= "tab-item {
{tab==0? active':' }}" bindtap=”changeItem"
data-item= "0" >音乐推荐< /view>
<view class=”tab item {
{tab== 1? actie':"}}" bindtap=”changeItem”
data-item="1" >播放器< /view>
<view class=”tab item {
{tab== 2? actie':"}}" bindtap=”changeItem”
data-item= "2" >播放列表< /view>
< /view>
ページとスタイル:
3. ページのスタイルとスタイル タブ ナビゲーション:
タブ ナビゲーション効果:
4. ページの info.wxml、page.wxml、play.wxml ファイルをテストします。
<view style= "background:#ddd; color:#000; h
eight:100%"> play </view>
<view style= "background:#ccc; color:#000; he
ight:100%" > info< /view>
<view style= "background:#eee; color:#00O; he
ight:100%" > playlist</view>
タブ ページの切り替えを実現する
ナビゲーション バーのタブをクリックして、タブ ページの切り替えを実現します。
<view class="tab-item {
{tab==0?'a
ctive':'}}"
bindtap=" changeltem" data-item
="0">
音乐推荐< /view>
changeltem: function(e) {
this.setData({
item: e.target.dataset.item,
tab:e.target.dataset.item
}},
タブ切り替えスタイル
.tab -item.active {
color: #c25b5b;
border- bottom-color: #c25b5b;
5.スクロール時間によるページ効果の切り替え
< swiper current= "{item}" bindchange="c
hangeTab">
< swiper- item>
<include src = ../index/info" > </include>
</swiper-item>
< swiper- item>
<include src= ../index/play" > </include>
</swiper-item>
< swiper- item>
<include src=”./index/playlist" > </include>
</swiper-item>
</swiper>
(1) スクロールイベント
change Tab: function(e) {
this.setData({
tab: e.detail.current
.tab-item.active {
color: #c25b5b;
border- bottom-color: #c25b5b;}
(2) スクロール イベントによるページ効果の切り替え:
4.音楽のおすすめ
1. scroll-view コンポーネントのプロパティと説明:
< scroll-view scroll-x scroll-y style="hei
ght:200px" bindscroll- "scroll">
<view style ="width:200%;height:400p
x;background:#ccc" > </view>
</scroll-view>
scroll: function(e) {
console.log(e.detail)
},
2. 画像コンポーネントのスケーリング モードとクロッピング モードのテスト:
コンテンツエリアのスクロール
(1) スクロールビュー コンポーネント:
< scroll-view class= "content-info" scroll-y>
<view style= "background:#eee;height:10
00px" > </view>
<view>已到达底部< /view>
< /scroll-view>
3. スワイパー コンポーネントはカルーセル マップを実現します。
<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
<swiper-item>
<image src="/images/banner.jpg" />
</swiper-item>
<swiper-item>
<image src="/images/banner.jpg" />
</swiper-item>
<swiper-item>
<image src="/images/banner.jpg" />
</swiper-item>
</swiper>
4. フレックス レイアウトは機能ボタンを実装します。
<view class="content-info-portal">
<view>
<image src="/images/04.png" />
<text>私人FM</text>
</view>
(1) フレックス レイアウトは、機能ボタンを実現します。
.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;
}
(2) Flex レイアウトは、ページ レイアウトを実現します。
<view class="content-info-list">
<view class="list-title">推荐歌曲</view>
<view class="list-inner">
<view class="list-item">
<image src="/images/cover.jpg" />
<view>紫罗兰</view>
</view>
ヒット曲
.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;
}
5.インデックスページの下部で再生
<!-- 底部播放器 -->
<view class="player">
<image class="player-cover" src="{
{play.coverImgUrl}}" />
<view class="player-info">
<view class="player-info-title">{
{play.title}}</view>
<view class="player-info-singer">{
{play.singer}}</view>
</view>
<view class="player-controls">
<!-- 切换到播放列表 -->
<image src="/images/01.png" bindtap="changePage" data-page="2" />
<!-- 播放或暂停 -->
<image wx:if="{
{state=='paused'}}" src="/images/02.png" bindtap="play" />
<image wx:else src="/images/02stop.png" bindtap="pause" />
<!-- 下一曲 -->
<image src="/images/03.png" bindtap="next" />
</view>
</view>
.player {
display: flex;
align-items: center;
background: #222;
border-top: 1px solid #252525;
height: 112rpx;
}
.player-cover {
width: 80rpx;
height: 80rpx;
margin-left: 15rpx;
border-radius: 8rpx;
border: 1px solid #333;
}
.player-info {
flex: 1;
font-size: 10pt;
line-height: 38rpx;
margin-left: 20rpx;
padding-bottom: 8rpx;
}
.player-info-singer {
color: #888;
}
.player-controls image {
width: 80rpx;
height: 80rpx;
margin-right: 15rpx;
}
5.プレイヤー
1. audioctx オブジェクトの宣言方法:
var audioctx = wx.createInnerAudioContext();
(1) InnerAudioContext ケースの使用:
onReady: function() {
var audioCtx = wx.createInnerAudioContext(
audioCtx.src = htt.:/....x.o.
audioCtx.onPlay(function() {
console.log('开始播放')
})
...
},
(2) スライダー コンポーネントの使用:
<slider bindchanging = "sliderChangeing" show-value />
sliderChanging:function(e){
console.log(e.detail.value)
},
(3) 音楽プレイリストと音楽ステータス データ:
playlist: [{
id: 1,
title: '钢琴协奏曲',
singer: '肖邦',
src: 'http://localhost:3000/1.mp3',
coverImgUrl: '/images/cover.jpg'
},
(4) 音楽再生機能の実現
音楽再生ロジック コード:
audioCtx: null,
onReady: function() {
this.audioCtx = wx.createInnerAudioContext()
// 默认选择第1曲
this.setMusic(0)
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': formatTime(that.audioCtx.duration),
'play.currentTime': formatTime(that.audioCtx.currentTime),
'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100
})
})
// 格式化时间
function formatTime(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)
}
},
// 音乐播放
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
})
},
(5) 最下位選手の構造コード:
<!-- 底部播放器 -->
<view class="player">
<image class="player-cover" src="{
{play.coverImgUrl}}" />
<view class="player-info">
<view class="player-info-title">{
{play.title}}</view>
<view class="player-info-singer">{
{play.singer}}</view>
</view>
ボトム プレーヤーのスタイル コード:
.player {
display: flex;
align-items: center;
background: #222;
border-top: 1px solid #252525;
height: 112rpx;
}
(6) 一番下のプレーヤーの一時停止/再生ボタンは曲をコントロールします:
<image wx:if="{
{state=='paused'}}" src="/images/02.png" bindtap="play" />
<image wx:else src="/images/02stop.png" bindtap="pause" />
(7) プレーヤーが次の曲に切り替わることを認識します。
<image src="/images/03.png" bindtap="next" />
next: function() {
var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
this.setMusic(index)
if (this.data.state === 'running') {
this.play()
}
},
(8) プレイヤーページ構造コード:
<view class="content-play">
<!-- 显示音乐信息 -->
<view class="content-play-info">
<text>{
{play.title}}</text>
<view>—— {
{play.singer}} ——</view>
</view>
6.プレイヤー
<!-- 播放器 -->
<view class="content-play">
<!-- 显示音乐信息 -->
<view class="content-play-info">
<text>{
{play.title}}</text>
<view>—— {
{play.singer}} ——</view>
</view>
<!-- 显示专辑封面 -->
<view class="content-play-cover">
<image src="{
{play.coverImgUrl}}" style="animation-play-state:{
{state}}" />
</view>
<!-- 显示播放进度和时间 -->
<view class="content-play-progress">
<text>{
{play.currentTime}}</text>
<view>
<slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{
{play.percent}}" />
</view>
<text>{
{play.duration}}</text>
</view>
</view>
1.プレイヤースタイル1
.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;
}
2. CSS3 アニメーションでポスターの回転機能を実現します。
<!-- 显示专辑封面 -->
<view class="content-play-cover">
<image src="{
{play.coverImgUrl}}" style="animation-play-state:{
{state}}" />
</view>
3. プレーヤー ページの下部にあるスライダー構造:
<slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{
{play.percent}}" />
3. 音楽再生の進行状況を表示します。
onReady: function() {
this.audioCtx = wx.createInnerAudioContext()
// 默认选择第1曲
this.setMusic(0)
var that = this
// 播放进度检测
this.audioCtx.onError(function() {
console.log('播放失败:' + that.audioCtx.src)
})
// 播放完成自动换下一曲
this.audioCtx.onEnded(function() {
that.next()
})
4. プログレス バーの長さを制御して、曲の再生の進行状況を制御します。
< slider
bindchange= "sliderChange"
activeColor= " #d33a31
block- size=”12"
backgroundColor= " #dadada"
value= "{
{play.percent}}" />
sliderChange: function(e) {
var second = e.detail.value
*
this.audioCtx.duration / 100
this.audioCtx.seek(second)
},
プログレス バーの長さを制御して、曲の再生の進行状況を制御します。
<scroll-view class="content-playlist" scroll-y>
<view class="playlist-item" wx:for="{
{playlist}}" wx:key="id" bindtap="change" data-index="{
{index}}">
<image class="playlist-cover" src="{
{item.coverImgUrl}}" />
<view class="playlist-info">
<view class="playlist-info-title">{
{item.title}}</view>
<view class="playlist-info-singer">{
{item.singer}}</view>
</view>
<view class="playlist-controls">
<text wx:if="{
{index==playIndex}}">正在播放</text>
</view>
</view>
</scroll-view>
7.プレイリスト
1. プログレス バーの長さを制御して、曲の再生の進行状況を制御します。
.playlist-item {
display: flex;
align-items:
center;
border- bottom: 1rpx solid #333;
height: 112rpx;
}
...
2.曲の変更機能を実現します。
change:function(e){
this.setMusic(e.currentTarget.dateset.index)
this.play()
},