效果展示
今天给大家分享一个微信小程序案例——钢琴小程序。学会了以后，自己也能弹奏出优美的曲子了。程序中一共有四首曲子《茉莉花》、《小星星》、《两只老虎》、《上学歌》。
小星星
先听一听我弹奏的小星星吧，文章末尾有个投票，可以投一下票哦～
https://live.csdn.net/v/206209
钢琴音符放在我主页的资源里了，大家可以自主下载。
代码展示
现在我们开始写代码了，我用的是微信开发者工具，需要大家自己下载注册哟~
piano.js代码
// pages/piano/piano.js
Page({
/**
* 页面的初始数据
*/
data: {
keys: [
{
num: 1,
name: "C3"
},
{
num: 2,
name: "D3"
},
{
num: 3,
name: "E3"
},
{
num: 4,
name: "F3"
},
{
num: 5,
name: "G3"
},
{
num: 6,
name: "A3"
},
{
num: 7,
name: "B3"
},
{
num: 1,
name: "C4"
},
{
num: 2,
name: "D4"
},
{
num: 3,
name: "E4"
},
{
num: 4,
name: "F4"
},
{
num: 5,
name: "G4"
},
{
num: 6,
name: "A4"
},
{
num: 7,
name: "B4"
},
{
num: 1,
name: "C5"
},
{
num: 2,
name: "D5"
},
{
num: 3,
name: "E5"
},
{
num: 4,
name: "F5"
},
{
num: 5,
name: "G5"
},
{
num: 6,
name: "A5"
},
{
num: 7,
name: "B5"
},
]
},
play(e){
var ac= wx.createInnerAudioContext();
ac.src=`/music/${
e.currentTarget.dataset.name}.mp3`;
ac.play();
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
piano.json代码
{
"usingComponents": {
},
"pageOrientation":"landscape",
"navigationBarBackgroundColor": "#000"
}
piano.wxml代码
<!--pages/piano/piano.wxml-->
<swiper>
<swiper-item>
<view class="lrc">
<view>茉莉花</view>
<view>3 3 5 6 1 1 6 5 5 6 5</view>
<view>3 3 5 6 1 1 6 5 5 6 5</view>
<view>5 5 5 3 5 6 6 5</view>
<view>3 2 3 5 3 2 1 1 2 1</view>
</view>
</swiper-item>
<swiper-item>
<view class="lrc">
<view>小星星</view>
<view>1 1 5 5 6 6 5 </view>
<view>4 4 3 3 2 2 1 </view>
<view> 5 5 4 4 3 3 2 </view>
<view> 6 6 5 4 4 3 3 2 2 1</view>
</view>
</swiper-item>
<swiper-item>
<view class="lrc">
<view>两只老虎</view>
<view>1 2 3 1 1 2 3 1 3 4 5</view>
<view>3 4 5 5 6 5 4 3 1</view>
<view>5 6 5 4 3 1 2 5 1</view>
<view>2 5 1 2 5 1 2 5 1</view>
</view>
</swiper-item>
<swiper-item>
<view class="lrc">
<view>上学歌</view>
<view>1 2 3 1 5</view>
<view>6 6 1 6 5</view>
<view>6 6 1 5 6 3</view>
<view>6 5 3 5 3 1 2 3 1</view>
</view>
</swiper-item>
</swiper>
<view class="box">
<view class="bar" hover-class="active" bindtap="play" wx:for="{
{keys}}" data-name="{
{item.name}}">
<view class="name">{
{
item.name}}</view>
<view class="num">{
{
item.num}}</view>
</view>
</view>
piano.wxss代码
/* pages/piano/piano.wxss */
page {
background-color: black;
}
.box {
width: 100%;
height: 160rpx;
position: absolute;
bottom: 0;
display: flex;
justify-content: space-around;
}
.bar {
height: 160rpx;
background-color: #fff;
border-radius: 0 0 15rpx 15rpx;
box-shadow: 0 0 5px #000;
margin: 1 5rpx;
flex-grow: 1;
}
.name {
width: 25rpx;
height: 20rpx;
background-color: cadetblue;
text-align: center;
line-height: 20rpx;
margin: 20px auto;
}
.num {
width: 20rpx;
height: 20rpx;
background-color: darkorange;
text-align: center;
line-height: 20rpx;
margin: 60rpx auto 0;
}
.lrc{
width: 100%;
height: auto;
text-align: center;
line-height: 25rpx;
color: #fff;
}
.active{
box-shadow: none;
background-color: #eee;
}
茉莉花
https://live.csdn.net/v/206208
写在最后
希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
原创不易，期待你的关注与支持~
点赞❤+收藏❤+评论❤
之后我会继续更新前端学习小知识，关注我不迷路~