小程序已上线，里面有很多我珍藏的好听的纯音乐哦，扫码直接体验：
如若无法正常使用说明我的服务器已经到期。
小程序的完整源码下载地址：https://download.csdn.net/download/qq_37518622/12313970
很久没有维护了，最近重新修改了下又上线了，这里提供的代码不是最新的和线上版本有些区别，刚学小程序的时候写的代码很烂，希望还能够有点作用
代码中的图片等资源自己找下哦
关注微信公众号ClumsyRobot获取更多资源：
猜歌小程序界面如下：
1、主界面
2、猜歌界面
3、排行榜界面
4、收藏音乐界面
5、抽积分界面
代码如下：
主界面
<!--index.wxml-->
<view class="container"><view class='item'><button open-type="getUserInfo" bindgetuserinfo="jumpguess" class="button big gray rounded">知音</button></view><view class='item'><button open-type="getUserInfo" bindgetuserinfo="jumprank" class="button big blue rounded">排行榜</button></view><view class='item'><button open-type="getUserInfo" bindgetuserinfo="jumpcollect" class="button big green rounded">音库</button></view><view class='item'><button open-type="getUserInfo" bindgetuserinfo="jumpluck" class="button big purple rounded">抽积分</button></view><view class='item'><button bindtap='jumpintroduction' class="button big orange rounded"><text>说明</text></button></view>
</view>/**index.wxss**/
.container{width: 100%;height: 100%;background: grey;background: -moz-linear-gradient(top, grey 0%, #943bea 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, grey), color-stop(100%, #943bea));background: -webkit-linear-gradient(top, grey 0%, #943bea 100%);background: -o-linear-gradient(top, grey 0%, #943bea 100%);background: -ms-linear-gradient(top, grey 0%, #943bea 100%);background: linear-gradient(to bottom, grey 0%, #943bea 100%);background-size: 100% 100%;padding-top: 50px;}.container .item{display: inline-block;width: 230px;margin-bottom: 50px;margin-left: 17%;
}
.button{font:15px Calibri, Arial, sans-serif;/* A semi-transparent text shadow */text-shadow:1px 1px 0 rgba(255,255,255,0.4);/* Overriding the default underline styling of the links */text-decoration:none !important;white-space:nowrap;display:block;position:relative;cursor:pointer;padding:10px 20px;background-repeat:no-repeat;/* The following two rules are fallbacks, in casethe browser does not support multiple backgrounds. */background-position:bottom left;background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png');/* Multiple backgrounds version. The background imagesare defined individually in color classes */background-position:bottom left, top right, 0 0, 0 0;background-clip:border-box;/* Applying a default border raidus of 8px */-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;/* A 1px highlight inside of the button */-moz-box-shadow:0 0 1px #fff inset;-webkit-box-shadow:0 0 1px #fff inset;box-shadow:0 0 1px #fff inset;/* Animating the background positions with CSS3 *//* Currently works only in Safari/Chrome */-webkit-transition:background-position 1s;-moz-transition:background-position 1s;transition:background-position 1s;
}/*.button:hover{*/.button:active{/* Moving the button 1px to the bottom when clicked */bottom:-1px;background-position:top left;background-position:top left, bottom right, 0 0, 0 0;
}/* The three buttons sizes */.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}/* A more rounded button */.button.rounded{-moz-border-radius:4em;-webkit-border-radius:4em;border-radius:4em;
}/* Defining four button colors *//* BlueButton */.blue.button{color:#0f4b6d !important;border:1px solid #84acc3 !important;/* A fallback background color */background-color: #48b5f2;/* Specifying a version with gradients according to */background-image: url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'),-moz-radial-gradient( center bottom, circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7, #3faeeb);background-image: url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}.blue.button:hover{background-color:#63c7fe;background-image: url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'),-moz-radial-gradient( center bottom, circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe, #58bef7);background-image: url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'),-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}/* Green Button */.green.button{color:#345903 !important;border:1px solid #96a37b !important; background-color: #79be1e;background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}.green.button:hover{background-color:#89d228;background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}/* Orange Button */.orange.button{color:#693e0a !important;border:1px solid #bea280 !important; background-color: #e38d27;background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}.orange.button:hover{background-color:#ec9732;background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}.gray.button{color:#525252 !important;border:1px solid #a5a5a5 !important; background-color: #a9adb1;background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}.gray.button:hover{background-color:#b6bbc0;background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}.purple.button{color:#525252 !important;border:1px solid #a5a5a5 !important; background-color: #a020f0;background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(106,90,205,1) 0,rgba(106,90,205,0) 100px),-moz-linear-gradient(#8470FF, #7B68EE);background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(255,236,139,1)), to(rgba(238,220,130,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFEC8B), to(#EEDC82));
}.purple.button:hover{background-color:#a020f0;background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(106,90,205,1) 0,rgba(106,90,205,0) 100px),-moz-linear-gradient(#8470FF, #7B68EE);background-image:url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), url('https://nanmatou.club/files/zhiyin/icons/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(255,236,139,1)), to(rgba(238,220,130,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFEC8B), to(#EEDC82));
}//index.js
//获取应用实例
const app = getApp()
var index=0;
Page({data: {userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),},jumpguess:function(e){app.globalData.userInfo = e.detail.userInfowx.navigateTo({url: '../guess/guess'})},jumprank: function (e) {app.globalData.userInfo = e.detail.userInfowx.navigateTo({url: '../ranklist/ranklist'})},jumpcollect: function (e) {app.globalData.userInfo = e.detail.userInfowx.navigateTo({url: '../collectList/collectList'})},jumpluck: function (e) {app.globalData.userInfo = e.detail.userInfowx.navigateTo({url: '../luck/luck'})},jumpintroduction: function (e) {wx.navigateTo({url: '../introduction/introduction'})},})
猜歌
<!--guess.wxml-->
<view class="container"><block><image class="play-icon {{isRotation?'rotation':''}}" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524222813702&di=1b2468eebc105b308f8318da8e5a9b74&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F15%2F60%2F68%2F06T58PICw3s_1024.jpg" background-size="cover" bindtap='clickPlayIcon'></image><image class="tip-icon" src="https://nanmatou.club/files/zhiyin/icons/tip1.png" background-size="cover" bindtap='getTip'></image></block> <view class="footer"><view class="{{showVoiceIcon?'sendmessage':'sendmessage-hidden'}}"><image src='https://nanmatou.club/files/zhiyin/icons/record.png' bindtap='clickSmallRecordIcon'></image><input type="text" bindinput="answerInput" confirm-type="done" value='{{answerInput}}' placeholder="输入答案" maxlength='20' /><button type='primary' bindtap='submitAnswer' class="blue btn button">发送</button><input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" /></view><view class="{{showVoiceIcon?'sendVoice':'sendVoice-hidden'}}"><view class="dot" bindtouchstart='startRecord' bindtouchend='endRecord'></view><view class="{{palseVisible?'':'pause-hidden'}}"><view class="pulse"></view><view class="pulse1"></view></view></view><!-- <audio src="{{src}}" id="music"></audio> --></view>
</view>/**guess.wxss**/
.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding-top: 100px;box-sizing: border-box;background-image: url('http://img.zcool.cn/community/01eacf5543e0210000019ae90753a1.jpg');background-size: cover;
} .container .play-icon {width: 256rpx;height: 256rpx;margin: 20rpx;border-radius: 50%;
}.container .tip-icon{width: 100rpx;height: 100rpx;position: absolute;top:10px;margin-left:40%;
}@-webkit-keyframes rotation {from {-webkit-transform: rotate(0deg);
}to {-webkit-transform: rotate(360deg);
}}.rotation {-webkit-transform: rotate(360deg);animation: rotation 8s linear infinite;-moz-animation: rotation 8s linear infinite;-webkit-animation: rotation 8s linear infinite;-o-animation: rotation 8s linear infinite;
}.footer{margin-top: 76%;width: 100%;
}
.footer .sendmessage {background-image: url('https://nanmatou.club/files/zhiyin/icons/bg.jpg');opacity:0.7;width: 100%;/* bottom: 0rpx; */height: 45px;display: flex;flex-direction: row;padding-top: 15px;margin-top: -185px;
}.footer .sendmessage-hidden {background-image: url('https://nanmatou.club/files/zhiyin/icons/bg.jpg');opacity:0.7;width: 100%;/* bottom: 0rpx; */height: 45px;display: flex;flex-direction: row;padding-top: 15px;
}.footer .sendmessage image,.sendmessage-hidden image {width: 34px;height: 34px;background: #fff;color: #000;line-height: 40px;font-size: 14px;border-radius: 100%;margin-left: 3%;
}.footer .sendmessage input,.sendmessage-hidden input {width: 65%;height: 30px;background-color: white;line-height: 40px;font-size: 14px;border: none;margin-left: 7px;padding-left: 5px;box-shadow: 1px 1px 5px #B6B6B6;border-radius: 8px;text-shadow: 1px 1px 1px #9E3F3F;
}.footer .sendmessage button,.sendmessage-hidden button {width: 15%;height: 30px;background: lightblue;color: white;line-height: 30px;font-size: 10px;margin-left: 10px;-webkit-animation-name: bluePulse;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;
} .footer .sendVoice {width: 100%;height: 165px;padding-top: 20px;padding-left: 34%;opacity: 1;background: rgba(255, 255, 255, 0.23);
}/* .footer .sendVoice image{width: 100px;height: 150px; margin-left: 3%;
} */.footer .sendVoice text{margin-top:5px;display: block;margin-left: 6%;
}.footer .sendVoice-hidden {display: none;
}@-webkit-keyframes bluePulse {from { background-color: #0D8BA5; -webkit-box-shadow: 0 0 9px #333; }50% { background-color: #00BFFF; -webkit-box-shadow: 0 0 18px #00BFFF; }to { background-color: #1392AA; -webkit-box-shadow: 0 0 9px #333; }
}audio{display: none;
}/*点击录音的CSS*/.footer .dot {position: absolute;width: 92px;height: 92px;margin-left: 2%;top: 420px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border: 2px solid red;border-radius: 50%;z-index: 2;
}.footer .pulse {position: absolute;width: 320px;height: 320px;left: 3%;top: 302px;border: 6px solid red;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;z-index: 1;opacity: 0;-webkit-animation: warn 2s ease-out;-moz-animation: warn 2s ease-out;animation: warn 2s ease-out;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite;box-shadow: 1px 1px 30px red;
}.footer .pulse1 {position: absolute;width: 320px;height: 320px;left: 3%;top: 302px;border: 6px solid red;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;z-index: 1;opacity: 0;-webkit-animation: warn1 2s ease-out;-moz-animation: warn1 2s ease-out;animation: warn1 2s ease-out;-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;animation-iteration-count: infinite;box-shadow: 1px 1px 30px red;
}.pause-hidden{display: none;
}
@keyframes warn{0% {transform: scale(0.3);-webkit-transform: scale(0.3);opacity: 0.0;}25% {transform: scale(0.3);-webkit-transform: scale(0.3);opacity: 0.1;}50% {transform: scale(0.5);-webkit-transform: scale(0.5);opacity: 0.3;}75% {transform: scale(0.8);-webkit-transform: scale(0.8);opacity: 0.5;}100% {transform: scale(1);-webkit-transform: scale(1);opacity: 0.0;}
}@keyframes warn1{0% {transform: scale(0.3);-webkit-transform: scale(0.3);opacity: 0.0;}25% {transform: scale(0.3);-webkit-transform: scale(0.3);opacity: 0.1;}50% {transform: scale(0.3);-webkit-transform: scale(0.3);opacity: 0.3;}75% {transform: scale(0.5);-webkit-transform: scale(0.5);opacity: 0.5;}100% {transform: scale(0.8);-webkit-transform: scale(0.8);opacity: 0.0;}
}
//guess.js
//获取应用实例
const app = getApp()
var userId;//存储userId
var musicId;//musicId
var musicUrl;//music的地址
var answer;//答案
var chance;//答题机会
var needChance;//兑换机会数
var currentAnswer='当前没有播放音乐';//答案（音乐名）
var recordFlag=0;//录音标识
var hasNextMusic=true;//当前用户是否还未全部答出歌
// const innerAudioContext = wx.createInnerAudioContext()//音频上下文
const backgroundAudioManager = wx.getBackgroundAudioManager()
// innerAudioContext.onPlay(() => {
// console.log('开始播放')
// })
// innerAudioContext.onError((res) => {
// console.log("播放音乐时发生错误")
// })
//录音用的
const recorderManager = wx.getRecorderManager()const options = {duration: 60000,sampleRate: 16000,numberOfChannels: 1,format: 'mp3',encodeBitRate: 24000//frameSize: 50
}Page({data: {userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),showVoiceIcon: false,//是否显示大录音图标palseVisible: false,answerInput: '',//清空文本框用的isRotation: false,//播放图标是否旋转},onLoad: function (options) {console.log("加载到信息：" + app.globalData.userInfo)if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse){// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在没有 open-type=getUserInfo 版本的兼容处理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})} })}wx.getStorage({key: 'userId',success: function (res) {userId = res.data;console.log("首次加载页面时取到userId:" + res.data)},fail: function () {//do nothing}})},onUnload:function(){console.log("hide")backgroundAudioManager.stop();},//注册用户
registerUser: function(){wx.request({url: app.globalData.globalReqUrl+'/user/add',data: {avatarUrl: app.globalData.userInfo.avatarUrl,city: app.globalData.userInfo.city,country: app.globalData.userInfo.country,gender: app.globalData.userInfo.gender,nickname: app.globalData.userInfo.nickName,language: app.globalData.userInfo.language,province: app.globalData.userInfo.province},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {if (res.data.code != 4001) {userId = res.data.content;console.log("新增或清除本地数据的用户的ID是:" + userId)//设置缓存wx.setStorage({key: "userId",data: userId})wx.showToast({title: '初始化信息成功',icon: 'success',duration: 1000})}},fail: function () {console.log("新增用户的请求失败");}})
},//得到用户信息getUserInfoByStorage: function() {var that = this;console.log("获取到的授权信息为:"+app.globalData.userInfo)//先从本地存储取userId,如果没有的话就注册wx.getStorage({key: 'userId',success: function (res) {if (res.data == undefined || res.data == 'undefined'){that.registerUser();}else{userId = res.data;}console.log("从本地取到userId:" + res.data)},fail: function () {that.registerUser();}})},//监听输入框事件
answerInput: function (e) {this.setData({answer: e.detail.value})
},//随机出题
getRandomMusic: function(){wx.request({url: app.globalData.globalReqUrl+'/music/getRandomMusic',data: {userId: userId},header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},method: 'POST',success: function (res) {if (res.data.content!=-1){musicId = res.data.content.id;musicUrl = res.data.content.url;currentAnswer = res.data.content.name;backgroundAudioManager.title = '壹曲觅知音'backgroundAudioManager.singer = '细肥尸丁'backgroundAudioManager.coverImgUrl = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524222813702&di=1b2468eebc105b308f8318da8e5a9b74&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F15%2F60%2F68%2F06T58PICw3s_1024.jpg'backgroundAudioManager.src = musicUrl// 设置了 src 之后会自动播放 console.log("音乐关键字:" + res.data.content.keywords)console.log("音乐URL:" + res.data.content.url)}else{hasNextMusic=false;wx.showToast({title: '乐库的音乐全部猜对了，敬请期待更多音乐',icon: 'none',duration: 2000})}},fail: function () {console.log("请求音乐失败")}})
},getUserChance:function(){var that = this;if (userId == undefined||userId=='undefined'){that.getUserInfoByStorage();console.log("getUserInfo时得到的userId:" + userId);}else{//先从本地存储取userId,如果没有的话就注册wx.getStorage({key: 'userId',success: function (res) {userId = res.data;console.log("点击播放按钮是加载到userID：" + userId)wx.request({url: app.globalData.globalReqUrl+'/user/getUserInfo',data: {id: userId},header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},method: 'POST',success: function (res) {chance = res.data.content.chancesconsole.log("用户还有" + chance + "次机会")},fail: function () {console.log("更新用户机会失败")}})},fail: function () {that.registerUser();}})}},//点击发送按钮事件
submitAnswer: function(){var that = this;wx.getStorage({key: 'userId',success: function (res) {userId = res.data;console.log("从本地取到userId:" + res.data)console.log("发送的musicId是:" + musicId);console.log("发送的答案是:" + that.data.answer);answer = that.data.answer;that.setData({answerInput: ''});console.log(musicId)if(musicId!=undefined){that.answerByText();}else{wx.showToast({title: '请先播放音乐再识音',icon: 'none',duration: 1000})}},fail: function(){that.getUserInfoByStorage();if (musicId != undefined) {that.answerByText();}else{wx.showToast({title: '请先播放音乐再识音',icon: 'none',duration: 1000})}}});},answerByText: function () {var that = this;wx.request({url: app.globalData.globalReqUrl+'/user/answerByText',data: {userId: userId,musicId: musicId,answer: answer},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {console.log("文字结果："+res.data)wx.showToast({title: res.data.msg,icon: 'success',duration: 2000})if (res.data.code == 1001) {//正确就换歌that.getRandomMusic();}if (res.data.code == 4003){that.registerUser();}},fail: function () {console.log("答题请求失败")},complete: function () {}})
},clickSmallRecordIcon: function () {var that = this;that.setData({showVoiceIcon: (!that.data.showVoiceIcon)})},clickPlayIcon: function(){console.log("点击播放按钮时得到："+app.globalData.userInfo)var that = this;if (app.globalData.userInfo == undefined || app.globalData.userInfo==null){wx.showModal({content: '您没授予壹曲觅知音获得用户信息的权限，是否去设置打开？',confirmText: "确认",cancelText: "取消",success: function (res) {console.log(res);//点击“确认”时打开设置页面if (res.confirm) {console.log('用户点击确认')wx.openSetting({success: (res) => {wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothat.getUserInfoByStorage();}})}})} else {console.log('用户取消授权')}}});}else{var that = this;console.log("是否在旋转状态"+that.data.isRotation)if (!that.data.isRotation) {// that.getUserChance();var that = this;if (userId == undefined || userId == 'undefined') {that.getUserInfoByStorage();console.log("有权限时点击播放按钮userId为undefined")}else{wx.request({url: app.globalData.globalReqUrl+'/user/getUserInfo',data: {id: userId},header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},method: 'POST',success: function (res) {chance = res.data.content.chancesconsole.log("用户还有" + chance + "次机会")if (chance <= 0) {wx.showModal({title: '免费机会已用完',content: '是否使用积分兑换机会',success: function (res) {if (res.confirm) {wx.showActionSheet({itemList: ['10次机会', '5次机会', '3次机会', '2次机会', '1次机会'],success: function (res) {needChance = res.tapIndexthat.convertBanlanceToChance();},fail: function (res) {console.log(res.errMsg)}})} else if (res.cancel) {console.log('用户点击取消')}}})} else {that.setData({isRotation: (!that.data.isRotation),})that.getRandomMusic();}},fail: function () {console.log("更新用户机会失败")}})}} else {backgroundAudioManager.stop()//停止播放if(hasNextMusic){ wx.request({url: app.globalData.globalReqUrl+'/user/cutSong',data: {userId: userId},header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},method: 'POST',success: function (res) {console.log("切歌"+res.data.msg) wx.showToast({title: '消耗了一次猜歌机会',icon: 'none',duration: 1000})},fail: function () {console.log("切歌请求失败")}})}that.setData({isRotation: (!that.data.isRotation),})}}},//录音键长按按钮startRecord: function (e) {console.log(recordFlag)if(recordFlag==0){recordFlag=recordFlag+1;}else{var that = this;// 设置询问wx.authorize({scope: 'scope.record',success(res) {recorderManager.start(options)wx.showLoading({title: '正在录音',})that.setData({palseVisible: true})},fail(res) {wx.showModal({content: '您没授予壹曲觅知音录音的权限，是否去设置打开？',confirmText: "确认",cancelText: "取消",success: function (res) {console.log(res);//点击“确认”时打开设置页面if (res.confirm) {console.log('用户点击确认')wx.openSetting({success: (res) => {}})} else {console.log('用户取消授权')}}});},})}},endRecord: function (e) {var that = this;wx.hideLoading()recorderManager.stop()that.setData({palseVisible: false})wx.showLoading({title: '正在解析',})setTimeout(function () {wx.hideLoading()}, 1000)recorderManager.onStop((res) => {var that = this;var tempFilePath = res.tempFilePath;wx.getStorage({key: 'userId',success: function (res) {userId = res.data;console.log("从本地取到userId:" + userId)console.log("发送的musicId是:" + musicId);console.log("发送的录音文件路径是:" + tempFilePath);if(musicId!=undefined){wx.uploadFile({url: app.globalData.globalReqUrl+'/user/answerByVoice',filePath: tempFilePath,name: 'file',formData: {userId: userId,musicId: musicId,},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {console.log(res.data)var temp = res.datavar msgStart = temp.lastIndexOf(':');var msgEnd = temp.lastIndexOf('"');var msg = temp.substring(msgStart + 2, msgEnd)var codeStart = temp.indexOf(":");var codeEnd = temp.indexOf(',');var code = temp.substring(codeStart + 1, codeEnd)console.log("语音回答后得到消息：" + msg)console.log("语音回答后得到代码：" + code)wx.showToast({title: msg,icon: 'none',duration: 1000})if (code == 1001) {console.log("语音答对了")that.getRandomMusic();}if (code == 4003) {that.registerUser();}},fail: function (res) {console.log("答题请求失败")}})}else{wx.showToast({title: '请先播放音乐再识音',icon: 'none',duration: 2000})}},fail: function () {console.log("获取localstorage失败")that.registerUser();},});})recorderManager.onError((res) => {console.log('录音时间太短：' + res.errMsg)wx.showToast({title: '录音时间太短',icon: 'none',duration: 1000})})},convertBanlanceToChance:function(){console.log(needChance)console.log(userId)wx.request({url: app.globalData.globalReqUrl+'/user/convertBanlanceToChance',data: {userId: userId,chanceNum: needChance},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {console.log(res.data.msg)wx.showToast({title: res.data.msg,icon: 'none',duration: 2000})},fail: function () {console.log("答题请求失败")}})},getTip: function(){var that = this;if (currentAnswer != '当前没有播放音乐'){wx.showModal({title: '获取答案',content: '是否使用5积分获取答案',success: function (res) {if (res.confirm) {wx.request({url: app.globalData.globalReqUrl+'/user/getTipByBalance',data: {userId: userId},header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},method: 'POST',success: function (res) {if (res.data.code == 2001){that.setData({answerInput: currentAnswer,answer: currentAnswer});wx.showToast({title: currentAnswer,icon: 'success',duration: 2000})}else{wx.showToast({title: res.data.msg,icon: 'none',duration: 2000})}},fail: function () {console.log("更新用户机会失败")}})} else if (res.cancel) {console.log('用户获取答案取消')}}})}else{wx.showToast({title: currentAnswer,icon: 'none',duration: 2000})}}})
排行榜
<!--ranklist.wxml-->
<view class="container"><view class="header"><text class='text1' bindtap='moveTabR'>知音榜</text><text class='text2' bindtap='moveTabL'>积分榜</text><view class='bg {{tabPosition}}'></view><!-- <view class='tab'>积分榜</view> --></view><scroll-view class="list" scroll-y bindscrolltolower="{{hasReachBottom}}"><view wx:for-items="{{key}}" wx:key="item" wx:for-index="index"><view class="item"><text class="index">{{index+1}}</text><image class="avatar" src="{{item.avatarUrl}}"></image><view class="left"><text wx:if="{{item.gender==1}}" class="male">♂</text><text wx:elif="{{item.gender==2}}" class="female">♀</text><text wx:else class="unknow">ET</text><text class="nickname">{{item.nickname}}</text><text wx:if="{{item.city!=''}}" class="city">来自：{{item.city}}</text><text wx:else class="city">来自：外星</text></view><view class="right"><text class="solve">{{tabPosition=='transformL'?'获得 '+item.balance+' 积分':'知音 '+item.solveCount+' 首'}}</text><text wx:if="{{item.type==0}}" class="type">普通群众</text><text wx:elif="{{item.type==1}}" class="type">开发者好友</text><text wx:elif="{{item.type==2}}" class="type">普通VIP</text><text wx:elif="{{item.type==3}}" class="type">至尊VIP</text><text wx:else class="type">开发者</text></view></view></view></scroll-view><view class="list"><view class="me"><text class="index">{{me.rank==NaN?'∞':me.rank}}</text><image class="avatar" src="{{me.avatarUrl==undefined?'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524222813702&di=1b2468eebc105b308f8318da8e5a9b74&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F15%2F60%2F68%2F06T58PICw3s_1024.jpg':me.avatarUrl}}"></image><view class="left"><text wx:if="{{me.gender==1}}" class="male">♂</text><text wx:elif="{{me.gender==2}}" class="female">♀</text><text wx:else class="unknow">ET</text><text class="nickname">{{me.nickname==undefined?'未授权用户':me.nickname}}</text><text wx:if="{{me.city.length>0}}" class="city">来自：{{me.city}}</text><text wx:else class="city">来自：外星</text></view><view class="right"><text wx:if="{{me.solveCount!=undefined&&me.balance!=undefined}}" class="solve">{{tabPosition=='transformL'?'获得 '+me.balance+' 积分':'知音 '+me.solveCount+' 首'}}</text><text wx:else class="solve">{{tabPosition=='transformL'?'获得 0 积分':'知音 0 首'}}</text><text wx:if="{{me.type==4}}" class="type">开发者</text><text wx:elif="{{me.type==1}}" class="type">开发者好友</text><text wx:elif="{{me.type==2}}" class="type">普通VIP</text><text wx:elif="{{me.type==3}}" class="type">至尊VIP</text><text wx:else class="type">普通用户</text></view></view></view>
</view>
/**ranklist.wxss**/
@import "../../bootstrap.wxss";
.container{width: 100%;height: 100%;background: #1DC7EA;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1DC7EA), color-stop(100%, #4091ff));background: -webkit-linear-gradient(top, #1DC7EA 0%, #4091ff 100%);background: -o-linear-gradient(top, #1DC7EA 0%, #4091ff 100%);background: -ms-linear-gradient(top, #1DC7EA 0%, #4091ff 100%);background: linear-gradient(to bottom, #1DC7EA 0%, #4091ff 100%);overflow-y:hidden;
}.header{height:45px;width: 91%;flex-direction:row;color: #FFFFFF;opacity: 1;background: rgba(255, 255, 255, 0.23);margin-top:10px;margin-bottom: 5px;border-radius: 10px;}
.header .text1{position: absolute;margin-left:13%; font-size: 27px;margin-top:3px;
}
.header .text2{position: absolute;margin-left:57%; font-size: 27px;margin-top:3px;
}
.header .bg{height:45px;width: 50%;display: inline-block;flex-direction:row;color: whitesmoke;opacity: 1;background: rgba(0, 255, 255, 0.63);border-radius: 10px;z-index: -1;}
.transformL{animation:moveToRight 1s forwards;
}
.transformR{animation:moveToLeft 1s forwards;
}
@keyframes moveToRight{0%{margin-left: 0%; }100%{margin-left: 50%; }
}
@keyframes moveToLeft{0%{margin-left: 50%; }100%{margin-left: 0%; }
}.list{height:400px;
}
.footer{height: 30px;
}.list .item{width: 91%;height: 75px;display: flex;flex-direction:row;color: #FFFFFF;opacity: 1;background: rgba(255, 255, 255, 0.23);margin-top:10px;margin-bottom: 10px;border-radius: 10px;
}.list .me{width: 91%;height: 75px;display: flex;flex-direction:row;color: #FFEEEF;opacity: 1;background: rgba(0, 255, 255, 0.63);margin-top:10px;margin-bottom: 10px;border-radius: 10px;
}.list .index{margin-top: 23px;margin-left: 15px;margin-right: 10px;color: greenyellow;
}.list .avatar{width: 50px;height: 50px;display: flex;border-radius: 50%;align-items: center;justify-content: center;overflow: hidden;margin-top: 12px;
}.list .left{display: inline-block;margin-top: 10px;text-overflow:ellipsis;width: 130px;overflow:hidden;white-space:nowrap;
}.list .male{font-size: 20px;margin-top: 10px;margin-left: 5px;color: blue;
}.list .female{font-size: 20px;margin-top: 10px;margin-left: 5px;color: plum;
}.list .unknow{font-size: 20px;margin-top: 10px;margin-left: 5px;color: black
}.list .nickname{font-size: 20px;margin-top: 10px;margin-left: 1px;
}.list .city{margin-top: 5px;margin-left: 5px;display:block;font-size: 15px;
}.list .right{display: inline-block;position: absolute;margin-left: 60%;margin-top: 15px;
}.list .solve{font-size: 15px;display: block;
}.list .type{margin-top: 5px;display:block;font-size: 15px;color: gold;
}
//ranklist.js
const app = getApp()
var user;
var userId;
var users;
var page=1;
Page({data: {userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),mode: 1,hasReachBottom: "lower",tabPosition:''},//事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onLoad: function (options) {var that = this;that.getRankList();that.getUserInfoByStorage();},//得到排行榜数据getRankList:function(){var that =this;page=1;wx.request({url: app.globalData.globalReqUrl+'/user/getRankList',data: {pageNum: page,pageSize: 10,mode: that.data.mode},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {users = res.data.contentconsole.log('得到的用户数据为：' + users)that.setData({key: users,page: page});},fail: function () {console.log("请求用户失败")}})},appendRankList:function(){var that = this;// 页数+1 page = page + 1;console.log("当前页：" + page)wx.request({url: app.globalData.globalReqUrl+'/user/getRankList',data: {pageNum: page,pageSize: 10,mode: that.data.mode},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {console.log(res.data.content.length)if (res.data.content.length>0) {users = users.concat(res.data.content);console.log('追加了用户数据,数据长度：' + users.length)that.setData({key: users,page: page});} else {that.setData({hasReachBottom: 'reachBottom'})}// 隐藏加载框 wx.hideLoading();},fail: function () {console.log("请求用户失败")}})},lower: function () {console.log('上拉了')var that = this;// 显示加载图标 wx.showLoading({title: '玩命加载中',})that.appendRankList(); }, reachBottom: function(){wx.showToast({title: '已经到底部啦',icon: 'none',duration: 1000})},moveTabR: function(){var that = this;console.log("向左")page=1;that.setData({tabPosition: 'transformR',mode: 1,hasReachBottom: "lower" })that.getRankList();that.getUserInfoById();},moveTabL: function () {var that = this;console.log("向右")page=1;that.setData({tabPosition: 'transformL',mode: 2,hasReachBottom: "lower"})that.getRankList();that.getUserInfoById();},//得到用户信息getUserInfoByStorage: function () {var that = this;console.log("获取到的授权信息为:" + app.globalData.userInfo)//先从本地存储取userId,如果没有的话就注册wx.getStorage({key: 'userId',success: function (res) {console.log("从本地取到用户Id:" + res.data)userId = res.data;if (userId!=undefined&&userId!='undefined'){that.getUserInfoById();}},fail: function () {if (app.globalData.userInfo!=null){that.registerUser();}}})},//注册用户registerUser: function () {var that = this;wx.request({url: app.globalData.globalReqUrl+'/user/add',data: {avatarUrl: app.globalData.userInfo.avatarUrl,city: app.globalData.userInfo.city,country: app.globalData.userInfo.country,gender: app.globalData.userInfo.gender,nickname: app.globalData.userInfo.nickName,language: app.globalData.userInfo.language,province: app.globalData.userInfo.province},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {if (res.data.code != 4001) {userId = res.data.content;console.log("新增或清除本地数据的用户的ID是:" + userId) //设置缓存wx.setStorage({key: "userId",data: userId})//得到单条用户信息wx.request({url: app.globalData.globalReqUrl+'/user/getUserInfoRanked',data: {id: userId,mode: that.data.mode},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {user = res.data.content;console.log("新增或清除本地数据的用户的数据是:" + user)that.setData({me: user});},fail: function () {console.log("新增用户的请求失败");}})}},fail: function () {console.log("新增用户的请求失败");}})},getUserInfoById: function(){var that = this;//得到单条用户信息wx.request({url: app.globalData.globalReqUrl+'/user/getUserInfoRanked',data: {id: userId,mode: that.data.mode},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {user = res.data.content;console.log("新增或清除本地数据的用户的数据是:" + user)that.setData({me: user});},fail: function () {console.log("新增用户的请求失败");}})}
})
音乐收藏
<!--collectList.wxml-->
<view class="container"><view class="header"><text class='text1' bindtap='moveTabR'>已知音</text><text class='text2' bindtap='moveTabL'>已收藏</text><view class='bg {{tabPosition}}'></view></view><scroll-view class="list" scroll-y bindscrolltolower="{{hasReachBottom}}"> <view wx:for-items="{{key}}" wx:key="item" wx:for-index="index"><view class="item"><text class="index">{{index+1}}</text><view class="left"><text class="songname">{{item.name}}</text><text class="author">{{item.author}}</text></view><view class="center"><text class="solve">已有 {{item.solveCount}} 知音</text><text class="rate">{{tabPosition=='transformR'?'知音率 '+item.correctRate+' %':'已被 '+item.collectCount+' 知音收藏'}}</text></view><view class="right"><image src='https://nanmatou.club/files/zhiyin/icons/play.png' class="image" data-id='{{index}}' data-src='{{item.url}}' data-songname='{{item.name}}' data-author='{{item.author}}' style='{{playing==index?"display:none;":""}}' bindtap='playMusic'></image><image src='https://nanmatou.club/files/zhiyin/icons/pause.png' class="image" data-id='{{index}}' style='{{playing==index?"":"display:none;"}}' bindtap='pauseMusic'></image><image src='https://nanmatou.club/files/zhiyin/icons/heart.png' data-id='{{index}}' data-musicid='{{item.id}}' class='image {{item.collect==false?"notCollect":"collect"}}' bindtap='collectOrNot'></image></view></view></view></scroll-view>
</view> /**collectList.wxss**/
@import "../../bootstrap.wxss";
.container{width: 100%;height: 100%;background: #87CB16;background: -moz-linear-gradient(top, #87CB16 0%, #6dc030 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87CB16), color-stop(100%, #6dc030));background: -webkit-linear-gradient(top, #87CB16 0%, #6dc030 100%);background: -o-linear-gradient(top, #87CB16 0%, #6dc030 100%);background: -ms-linear-gradient(top, #87CB16 0%, #6dc030 100%);background: linear-gradient(to bottom, #87CB16 0%, #6dc030 100%);background-size: 150% 150%;
}.container .header{height:45px;width: 91%;flex-direction:row;color: #FFFFFF;opacity: 1;background: rgba(255, 255, 255, 0.23);margin-top:10px;margin-bottom: 5px;border-radius: 10px;
}.container .list{height: 600px;
}.header .text1{position: absolute;margin-left:13%; font-size: 27px;margin-top:3px;
}
.header .text2{position: absolute;margin-left:57%; font-size: 27px;margin-top:3px;
}
.header .bg{height:45px;width: 50%;display: inline-block;flex-direction:row;color: whitesmoke;opacity: 1;background: rgba(255, 215, 0, 0.63);border-radius: 10px;z-index: -1;}
.transformL{animation:moveToRight 1s forwards;
}
.transformR{animation:moveToLeft 1s forwards;
}
@keyframes moveToRight{0%{margin-left: 0%; }100%{margin-left: 50%; }
}
@keyframes moveToLeft{0%{margin-left: 50%; }100%{margin-left: 0%; }
}.container .item{width: 91%;height: 75px;display: flex;flex-direction:row;color: #FFFFFF;opacity: 1;background: rgba(255, 255, 255, 0.23);margin-top:13px;margin-bottom: 10px;border-radius: 10px;
}.index{margin-top: 23px;margin-left: 15px;margin-right: 10px;color: greenyellow;
}.left{display: inline-block;margin-top: 10px;
}.songname{font-size: 17px;margin-top: 3px;margin-left: 1px;text-overflow:ellipsis;width: 100px;overflow:hidden;white-space:nowrap;display: block;
}.author{margin-top: 3px;margin-left: 5px;display:block;font-size: 15px;text-overflow:ellipsis;width: 100px;overflow:hidden;white-space:nowrap;
}.center{display: inline-block;position: absolute;margin-left: 40%;margin-top: 12px;
}.solve{width: 20px;height: 20px;font-size: 15px;
}.rate{margin-top: 5px;display:block;font-size: 15px;color: blueviolet
}.right{position: absolute;margin-left: 70%;margin-top: 25px;
}.image{margin-left: 5px;margin-right: 5px;width:20px;height:20px;
}.invisible{display: none;
}.collect{opacity: 0.4;
}.notCollect{opacity: 1;
}//collectList.js
const app = getApp()
var musics;
var page=1;
var userId;
const backgroundAudioManager = wx.getBackgroundAudioManager()backgroundAudioManager.onEnded(function () {var index = parseInt(musics.length * Math.random())backgroundAudioManager.src = musics[index].url;console.log("随机播放了歌：" + musics[index].url);backgroundAudioManager.title = musics[index].namebackgroundAudioManager.singer = musics[index].authorbackgroundAudioManager.coverImgUrl = 'https://nanmatou.club/files/zhiyin/icons/logo.png'
})Page({data: {userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),playState: 'play',tabPosition: 'transformR',hasReachBottom: "lower",},onLoad: function (options) {page=1;var that = this;that.getUserInfoByStorage();wx.onBackgroundAudioStop(function () {console.log('onBackgroundAudioStop')})},//得到用户信息getUserInfoByStorage: function () {var that = this;console.log("获取到的授权信息为:" + app.globalData.userInfo)//先从本地存储取userId,如果没有的话就注册wx.getStorage({key: 'userId',success: function (res) {console.log("从本地取到用户Id:" + res.data)userId = res.data;if(userId==undefined||userId=='undefined'){that.registerUser();}else{that.getSolveMusic();}},fail: function () {if (app.globalData.userInfo!=null){that.registerUser();}}})},//注册用户registerUser: function () {var that = this;wx.request({url: app.globalData.globalReqUrl+'/user/add',data: {avatarUrl: app.globalData.userInfo.avatarUrl,city: app.globalData.userInfo.city,country: app.globalData.userInfo.country,gender: app.globalData.userInfo.gender,nickname: app.globalData.userInfo.nickName,language: app.globalData.userInfo.language,province: app.globalData.userInfo.province},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {if (res.data.code != 4001) {userId = res.data.content;console.log("新增或清除本地数据的用户的ID是:" + userId)that.getSolveMusic();//设置缓存wx.setStorage({key: "userId",data: userId})}},fail: function () {console.log("新增用户的请求失败");}})},getSolveMusic:function(){var that = this;wx.request({url: app.globalData.globalReqUrl+'/user/getSolveList',data: {pageNum: page,pageSize: 10,userId: userId},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {musics = res.data.contentthat.setData({key: musics,page: page});},fail: function () {console.log("请求用户失败")}})},lower: function () {console.log('上拉了')var that = this;// 显示加载图标 wx.showLoading({title: '玩命加载中',})// 页数+1 page = page + 1;wx.request({url: app.globalData.globalReqUrl+'/user/getSolveList',data: {pageNum: page,pageSize: 10,userId: userId},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {console.log(res.data.content)if (res.data.content != undefined && res.data.content.length>0) {musics =musics.concat(res.data.content);that.setData({key: musics,page: page});}else{that.setData({hasReachBottom: 'reachBottom'})}wx.hideLoading(); // 隐藏加载框 },fail: function () {console.log("请求用户失败")}})}, reachBottom: function () {wx.showToast({title: '已经到底部啦',icon: 'none',duration: 1000})},playMusic: function(e){var that = this;//获取当前item的下标id 通过currentTarget.idvar dataset = e.currentTarget.dataset;var id = dataset.id;var src = dataset.src;var songname = dataset.songname;var author = dataset.author;that.setData({playing: id})backgroundAudioManager.title = songnamebackgroundAudioManager.singer = authorbackgroundAudioManager.coverImgUrl = 'https://nanmatou.club/files/zhiyin/icons/logo.png'if(that.data.playing!=-1){backgroundAudioManager.src = src// 设置了 src 之后会自动播放 console.log("播放了歌："+src);}},pauseMusic: function (e) {var that = this;//获取当前item的下标id 通过currentTarget.idvar dataset = e.currentTarget.dataset;var id = dataset.id;that.setData({playing: -1//重置播放图标})backgroundAudioManager.pause();// console.log("当前播放位置："+)},collectOrNot:function(e){var that = this;//获取当前item的下标id 通过currentTarget.idvar dataset = e.currentTarget.dataset;var id = dataset.id;var musicid = dataset.musicid;console.log("获取"+id)wx.request({url: app.globalData.globalReqUrl+'/user/collectOrRemoveMusic',data: {userId: userId,musicId: musicid},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {console.log("收藏结果："+res.data.content)console.log(that.data.tabPosition)if (that.data.tabPosition =='transformR'){that.moveTabR();}else{that.moveTabL();}},fail: function () {console.log("请求用户失败")}})},moveTabR: function () {var that = this;console.log("向左")that.setData({tabPosition: 'transformR',hasReachBottom: 'lower'})page=1;that.getSolveMusic();},moveTabL: function () {var that = this;console.log("向右")that.setData({tabPosition: 'transformL',hasReachBottom: 'reachBottom'})if (userId != undefined || userId != 'undefined'){wx.request({url: app.globalData.globalReqUrl+'/user/getCollectMusic',data: {userId: userId},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {musics = res.data.contentconsole.log(musics)that.setData({key: musics,});},fail: function () {console.log("请求用户失败")}})}},})
抽积分
<!--luck.wxml -->
<view class="container">
<view class='note'>{{userBalance==null?'跪求∞积分(*^__^*) ':'您当前有 '+ userBalance+' 积分'}}</view>
<view class="container-out"><view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view><view class="container-in"><view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};"><text class="award-image">{{item.imageAward}}</text></view><view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}">START</view></view>
</view>
</view>/**luck.wxss**/
.container{width: 100%;height: 610px;background: #7B68EE;overflow-y:hidden;
}
.container-out {height: 600rpx;width: 650rpx;background-color: #b136b9;margin: 0 auto;border-radius: 40rpx;box-shadow: 0 10px 0 #871a8e;position: relative;
}.container-in {width: 580rpx;height: 530rpx;background-color: #871a8e;border-radius: 40rpx;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}/**小圆球
box-shadow: inset 3px 3px 3px #fff2af;*/.circle {position: absolute;display: block;border-radius: 50%;height: 20rpx;width: 20rpx;
}.content-out {position: absolute;height: 150rpx;width: 166.6666rpx;background-color: #f5f0fc;border-radius: 15rpx;box-shadow: 0 5px 0 #d87fde;
}/**居中 加粗*/.start-btn {position: absolute;margin: auto;top: 0;left: 0;bottom: 0;right: 0;border-radius: 15rpx;height: 150rpx;width: 166.6666rpx;background-color: #ffe400;box-shadow: 0 5px 0 #e7930a;color: #f6251e;text-align: center;font-size: 45rpx;font-weight: bolder;line-height: 150rpx;
}.award-image {position: absolute;margin: auto;top: 25px;left: 10px;text-align: center;height: 140rpx;width: 130rpx;font-size: 30rpx;
}.note{text-align: center;margin-bottom: 5px;margin-top:230rpx;color: whitesmoke;
}
//luck.js
const app = getApp()
var awardLength = 8;
var lucknum;
var lastLucktime;
var userId;
var userBalance;
var needModal=0;
Page({data: {circleList: [],//圆点数组awardList: [],//奖品数组colorCircleFirst: '#FFDF2F',//圆点颜色1colorCircleSecond: '#FE4D32',//圆点颜色2colorAwardDefault: '#F5F0FC',//奖品默认颜色colorAwardSelect: '#ffe400',//奖品选中颜色indexSelect: 0,//被选中的奖品indexisRunning: false,//是否正在抽奖imageAward: ['再接再厉','1积分','2积分','3积分','再接再厉','5积分','10积分','20积分',],//奖品图片数组},onLoad: function () {var _this = this;//圆点设置var leftCircle = 7.5;var topCircle = 7.5;var circleList = [];for (var i = 0; i < 24; i++) {if (i == 0) {topCircle = 15;leftCircle = 15;} else if (i < 6) {topCircle = 7.5;leftCircle = leftCircle + 102.5;} else if (i == 6) {topCircle = 15leftCircle = 620;} else if (i < 12) {topCircle = topCircle + 94;leftCircle = 620;} else if (i == 12) {topCircle = 565;leftCircle = 620;} else if (i < 18) {topCircle = 570;leftCircle = leftCircle - 102.5;} else if (i == 18) {topCircle = 565;leftCircle = 15;} else if (i < 24) {topCircle = topCircle - 94;leftCircle = 7.5;} else {return}circleList.push({ topCircle: topCircle, leftCircle: leftCircle });}_this.setData({circleList: circleList})//圆点闪烁setInterval(function () {if (_this.data.colorCircleFirst == '#FFDF2F') {_this.setData({colorCircleFirst: '#FE4D32',colorCircleSecond: '#FFDF2F',})} else {_this.setData({colorCircleFirst: '#FFDF2F',colorCircleSecond: '#FE4D32',})}}, 500)//奖品item设置var awardList = [];//间距,怎么顺眼怎么设置吧.var topAward = 25;var leftAward = 25;for (var j = 0; j < 8; j++) {if (j == 0) {topAward = 25;leftAward = 25;} else if (j < 3) {topAward = topAward;//166.6666是宽.15是间距.下同leftAward = leftAward + 166.6666 + 15;} else if (j < 5) {leftAward = leftAward;//150是高,15是间距,下同topAward = topAward + 150 + 15;} else if (j < 7) {leftAward = leftAward - 166.6666 - 15;topAward = topAward;} else if (j < 8) {leftAward = leftAward;topAward = topAward - 150 - 15;}var imageAward = this.data.imageAward[j];awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });}_this.setData({awardList: awardList})wx.getStorage({key: 'userId',success: function (res) {userId = res.data;console.log("首次加载页面时取到userId:" + res.data)},fail: function () {//do nothing}})},//开始游戏startGame: function () {var that = this;if (app.globalData.userInfo == undefined || app.globalData.userInfo == null) {wx.showModal({content: '您没授予壹曲觅知音获得用户信息的权限，是否去设置打开？',confirmText: "确认",cancelText: "取消",success: function (res) {console.log(res);//点击“确认”时打开设置页面if (res.confirm) {console.log('用户点击确认')wx.openSetting({success: (res) => {wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothat.getUserInfoByStorage();}})}})} else {console.log('用户取消授权')}}});}else{if (this.data.isRunning) returnif (userId == undefined || userId == 'undefined') {that.getUserInfoByStorage();console.log("有权限时点击播放按钮userId为undefined")} else {wx.request({url: app.globalData.globalReqUrl+'/user/getUserInfo',data: {id: userId},header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},method: 'POST',success: function (res) {lastLucktime = res.data.content.lastLucktime.timelucknum = res.data.content.lucknumuserBalance = res.data.content.balanceconsole.log('上次抽奖时间:'+lastLucktime)console.log('剩余抽奖次数:'+lucknum)var nowTime = new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime();//如果还有机会次数并且if (lastLucktime < nowTime){console.log("小于了")that.setData({isRunning: true})var _this = this;var indexSelect = parseInt(awardLength * Math.random())var balance = 0;if (indexSelect == 0) {balance = 1;} else if (indexSelect == 1) {balance = 2;} else if (indexSelect == 2) {balance = 3;} else if (indexSelect == 4) {balance = 5;} else if (indexSelect == 5) {balance = 10;} else if (indexSelect == 6) {balance = 20;} else {balance = 0;}var i = 0;var timer = setInterval(function () {indexSelect++;//这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度i += 60;if (i > 1000) {//去除循环clearInterval(timer)//获奖提示if (balance != 0) {wx.request({url: app.globalData.globalReqUrl+'/user/drawluck',data: {balance: balance,userId: userId,isToday:false},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {},fail: function () {console.log("抽奖请求失败")}})wx.showModal({title: '恭喜您',content: '获得了' + balance + "积分",showCancel: false,//去掉取消按钮success: function (res) {if (res.confirm) {that.setData({isRunning: false,userBalance: userBalance-5+balance})}}})} else {wx.showModal({title: '很遗憾',content: '没有获得积分，再接再厉',showCancel: false,//去掉取消按钮success: function (res) {if (res.confirm) {that.setData({isRunning: false})}}})}}indexSelect = indexSelect % 8;that.setData({indexSelect: indexSelect})}, (200 + i))} else if (lastLucktime >= nowTime && lucknum>0){//如果是当日第二次抽奖console.log("大于了")that.setData({isRunning: true})var _this = this;var indexSelect = parseInt(awardLength * Math.random())var balance = 0;if (indexSelect == 0) {balance = 1;} else if (indexSelect == 1) {balance = 2;} else if (indexSelect == 2) {balance = 3;} else if (indexSelect == 4) {balance = 5;} else if (indexSelect == 5) {balance = 10;} else if (indexSelect == 6) {balance = 20;} else {balance = 0;}var i = 0;var timer = setInterval(function () {indexSelect++;//这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度i += 60;if (i > 1000) {//去除循环clearInterval(timer)//获奖提示if (balance != 0) {wx.request({url: app.globalData.globalReqUrl+'/user/drawluck',data: {balance: balance,userId: userId,isToday: true},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {},fail: function () {console.log("抽奖请求失败")}})wx.showModal({title: '恭喜您',content: '获得了' + balance + "积分",showCancel: false,//去掉取消按钮success: function (res) {if (res.confirm) {that.setData({isRunning: false,userBalance: userBalance-5+balance})}}})} else {wx.showModal({title: '很遗憾',content: '没有获得积分，再接再厉',showCancel: false,//去掉取消按钮success: function (res) {if (res.confirm) {that.setData({isRunning: false})}}})}}indexSelect = indexSelect % 8;that.setData({indexSelect: indexSelect})}, (200 + i))}else{console.log(needModal)if (needModal==0){needModal = needModal+1;wx.showModal({title: '今日抽奖次数已用完',content: '是否使用5积分兑换一次抽奖机会',success: function (res) {if (res.confirm) {that.getBalanceByBalance();} else if (res.cancel) {console.log('用户花积分抽奖取消')}}})}else{that.getBalanceByBalance();}}},fail: function () {console.log("更新用户机会失败")}})}}},getBalanceByBalance: function(){var that = this;if (userBalance >= 5) {that.setData({isRunning: true,userBalance: userBalance - 5})var _this = this;var indexSelect = parseInt(awardLength * Math.random())var balance = 0;if (indexSelect == 0) {balance = 1;} else if (indexSelect == 1) {balance = 2;} else if (indexSelect == 2) {balance = 3;} else if (indexSelect == 4) {balance = 5;} else if (indexSelect == 5) {balance = 10;} else if (indexSelect == 6) {balance = 20;} else {balance = 0;}var i = 0;var timer = setInterval(function () {indexSelect++;//这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度i += 60;if (i > 1000) {//去除循环clearInterval(timer)//获奖提示if (balance != 0) {wx.showModal({title: '恭喜您',content: '获得了' + balance + "积分",showCancel: false,//去掉取消按钮success: function (res) {if (res.confirm) {that.setData({isRunning: false,userBalance: userBalance - 5 + balance})}}})} else {wx.showModal({title: '很遗憾',content: '没有获得积分，再接再厉',showCancel: false,//去掉取消按钮success: function (res) {if (res.confirm) {that.setData({isRunning: false})}}})}wx.request({url: app.globalData.globalReqUrl+'/user/getBalanceByBalance',data: {balance: balance,userId: userId,},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {},fail: function () {console.log("抽奖请求失败")}})}indexSelect = indexSelect % 8;that.setData({indexSelect: indexSelect})}, (200 + i))} else {wx.showToast({title: '积分不足',icon: 'none',duration: 2000})}},//得到用户信息getUserInfoByStorage: function () {var that = this;console.log("获取到的授权信息为:" + app.globalData.userInfo)//先从本地存储取userId,如果没有的话就注册wx.getStorage({key: 'userId',success: function (res) {if (res.data == undefined || res.data == 'undefined') {that.registerUser();} else {userId = res.data;}console.log("从本地取到userId:" + res.data)},fail: function () {that.registerUser();}})},//注册用户registerUser: function () {wx.request({url: app.globalData.globalReqUrl+'/user/add',data: {avatarUrl: app.globalData.userInfo.avatarUrl,city: app.globalData.userInfo.city,country: app.globalData.userInfo.country,gender: app.globalData.userInfo.gender,nickname: app.globalData.userInfo.nickName,language: app.globalData.userInfo.language,province: app.globalData.userInfo.province},header: {'content-type': 'application/x-www-form-urlencoded'},method: 'POST',success: function (res) {if (res.data.code != 4001) {userId = res.data.content;console.log("新增或清除本地数据的用户的ID是:" + userId)//设置缓存wx.setStorage({key: "userId",data: userId})wx.showToast({title: '初始化信息成功',icon: 'success',duration: 1000})}},fail: function () {console.log("新增用户的请求失败");}})},
})
全局配置
app.js
//app.js
App({onLaunch: function () {// 展示本地存储能力var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})// 获取用户信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框wx.getUserInfo({success: res => {// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo = res.userInfo// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})},globalData: {userInfo: null,globalReqUrl:'https://nanmatou.club/zhiyin',globalResourceUrl: 'https://nanmatou.club/files/zhiyin'}
})app.json
{"pages":["pages/index/index","pages/introduction/introduction","pages/ranklist/ranklist","pages/luck/luck","pages/guess/guess","pages/collectList/collectList"],"window":{"backgroundTextStyle":"dark","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "壹曲觅知音","navigationBarTextStyle":"black"}
}
然后将bootstrap.css改编成bootstrap.wxss放在根目录
