效果展示

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

小星星

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

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

写在最后

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

【微信小程序】快进来弹钢琴啦~钢琴小程序源码分享相关推荐

C语言实现贪吃蛇小游戏！（超简单详细）详细思路+源码分享
贪吃蛇(也叫做贪食蛇)游戏是一款休闲益智类游戏,有PC和手机等多平台版本.既简单又耐玩.该游戏通过控制蛇头方向吃蛋,从而使得蛇变得越来越长. 我们的今天的目标就是:用C语言来实现一个贪吃蛇项目,也不用 ...
c语言220程序,电赛必备220个C语言实例源码分享
找了很多地方都不全,最后在CSDN上用积分下载了这个,准备电赛的朋友可能会用的上的.同时供C语言初学者可以参考.包括五子棋游戏.图书管理系统等.附件内容包括C语言源码和turbo C exe文件. 清 ...
最新织梦CMS程序小黑屋QQ技术导航新增手机版源码分享
介绍: 取消自适应布局改为独立手机端,自动判断跳转新增最新更新栏目,可以发布一些文章修改首页ICO图标调用逻辑更多细节优化完成安装须知安装环境:PHP7.0 安装路径:域名/install ...
投票系统源码--微信投票系统开发功能介绍以及源码分享
微信投票系统是第三方基于微信平台开发的可以举办微信投票类活动的系统. 微信公众平台自身也带有建立微信投票活动的功能,但功能非常少,只能进行投票,并没有丰富的功能,而且对投票选手的数量也是有限制.所以一 ...
【源码分享】一键打开禅意生活——电子木鱼微信小程序源码分享
为大家推荐一个在线的AI聊天:魔术AI-8080n点cn界面简洁精美,免费点开即用在快节奏的现代生活中,我们需要一种方式来减轻压力和焦虑,让我们的身心得到放松和平静.电子木鱼微信小程序是一款专门为人 ...
微信小程序——智能小秘“遥知之”源码分享（语义理解基于olami）
微信小程序智能生活小秘书开发详解 >>>>>>>>>>>>>>>>>>>>> ...
130个免费微信小程序源码分享
130个免费微信小程序源码分享 - AppleMusic - B站首页界面设计:附详细教程 - FlexLayout布局 - HIapp - IT-EBOOK - LOL战绩查询 - Railay: ...
【小程序源码】王者战力查询改名工具箱微信小程序源码分享下载，战力查询小程序
介绍今天分享一款战力查询小程序源码, 微端Q苹卓四端战力查询带改名工具,空白名.重复名.符号名改名小程序源码界面精美,无需服务器后台. 至于更多,就大家自行研究咯! 小编测试演示图小程序源码下 ...
Mall4j电商小程序源码分享
1.小程序简介 Mall4j 项目致力于为中小企业打造一个完整.易于维护的开源的电商系统,采用现阶段流行技术实现.后台管理系统包含商品管理.订单管理.运费模板.规格管理.会员管理.运营管理.内容管理. ...
2021最新外卖霸王餐小程序、外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变分销源码分享
2021最新外卖霸王餐小程序.外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变分销源码外卖霸王餐系统小程序/H5/APP源码 2021最新霸王餐小程序霸王餐小程序源码地址成品演 ...

【微信小程序】快进来弹钢琴啦~钢琴小程序源码分享

钢琴小程序