钢琴小程序

• 效果展示
• • 小星星
• 代码展示
• • piano.js代码
  • piano.json代码
  • piano.wxml代码
  • piano.wxss代码
• 茉莉花
• 写在最后

效果展示

今天给大家分享一个微信小程序案例——钢琴小程序。学会了以后，自己也能弹奏出优美的曲子了。程序中一共有四首曲子《茉莉花》、《小星星》、《两只老虎》、《上学歌》。

小星星

先听一听我弹奏的小星星吧，文章末尾有个投票，可以投一下票哦～

https://live.csdn.net/v/206209

钢琴音符放在我主页的资源里了，大家可以自主下载。

代码展示

现在我们开始写代码了，我用的是微信开发者工具，需要大家自己下载注册哟~

piano.js代码

// pages/piano/piano.jsPage({  /   * 页面的初始数据   */  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

写在最后

希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
原创不易，期待你的关注与支持~
点赞❤+收藏❤+评论❤
之后我会继续更新前端学习小知识，关注我不迷路~

郁金香导航