parent
0fc8dbed82
commit
a9489bf863
@ -0,0 +1,31 @@
|
||||
/*
|
||||
* Eslint config file
|
||||
* Documentation: https://eslint.org/docs/user-guide/configuring/
|
||||
* Install the Eslint extension before using this feature.
|
||||
*/
|
||||
module.exports = {
|
||||
env: {
|
||||
es6: true,
|
||||
browser: true,
|
||||
node: true,
|
||||
},
|
||||
ecmaFeatures: {
|
||||
modules: true,
|
||||
},
|
||||
parserOptions: {
|
||||
ecmaVersion: 2018,
|
||||
sourceType: 'module',
|
||||
},
|
||||
globals: {
|
||||
wx: true,
|
||||
App: true,
|
||||
Page: true,
|
||||
getCurrentPages: true,
|
||||
getApp: true,
|
||||
Component: true,
|
||||
requirePlugin: true,
|
||||
requireMiniProgram: true,
|
||||
},
|
||||
// extends: 'eslint:recommended',
|
||||
rules: {},
|
||||
}
|
||||
@ -1,2 +1,4 @@
|
||||
# music
|
||||
|
||||
# mymusic
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
// app.js
|
||||
App({
|
||||
onLaunch() {
|
||||
// 展示本地存储能力
|
||||
const logs = wx.getStorageSync('logs') || []
|
||||
logs.unshift(Date.now())
|
||||
wx.setStorageSync('logs', logs)
|
||||
|
||||
// 登录
|
||||
wx.login({
|
||||
success: res => {
|
||||
// 发送 res.code 到后台换取 openId, sessionKey, unionId
|
||||
}
|
||||
})
|
||||
},
|
||||
globalData: {
|
||||
userInfo: null
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,15 @@
|
||||
{
|
||||
"pages": [
|
||||
"pages/index/index",
|
||||
"pages/logs/logs",
|
||||
"pages/test/test"
|
||||
],
|
||||
"window": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "Weixin",
|
||||
"navigationBarTextStyle": "black"
|
||||
},
|
||||
"style": "v2",
|
||||
"sitemapLocation": "sitemap.json"
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
/**app.wxss**/
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 200rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 49 KiB |
@ -0,0 +1,5 @@
|
||||
{
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "音乐",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
<view class="tab">
|
||||
<view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
|
||||
<view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
|
||||
<view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
|
||||
</view>
|
||||
<!-- 内容 -->
|
||||
<view class="content">
|
||||
<swiper current="{{item}}" bindchange="changeTab">
|
||||
<swiper-item>
|
||||
<include src="info.wxml"></include>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<include src="play.wxml"></include>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<include src="playlist.wxml"></include>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 底部播放器 -->
|
||||
<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="/image/01.png" bindtap="changePage" data-page="2" />
|
||||
<!-- 播放 -->
|
||||
<image wx:if="{{state=='paused'}}" src="/image/02.png" bindtap="play"/>
|
||||
<image wx:else src="/image/02stop.png" bindtap="pause" />
|
||||
<!-- 下一曲 -->
|
||||
<image src="/image/03.png" bindtap="next"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -0,0 +1,177 @@
|
||||
page{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #17181a;
|
||||
color: #ccc;
|
||||
height: 100%;
|
||||
}
|
||||
.tab{
|
||||
display: flex;
|
||||
}
|
||||
.tab-item.active{
|
||||
color: #c25b5b;
|
||||
border-bottom-color:#c25b5b;
|
||||
}
|
||||
.tab-item{
|
||||
flex: 1;
|
||||
font-size: 10pt;
|
||||
text-align: center;
|
||||
line-height: 72px;
|
||||
border-bottom:6rpx solid #eee;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.content{
|
||||
flex: 1;
|
||||
}
|
||||
.content-play{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.content-play-info>view{
|
||||
color: #888;
|
||||
font-size: 11pt;
|
||||
}
|
||||
@keyframes rotateImage{
|
||||
from{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to{
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.content >swiper{
|
||||
height: 100%;
|
||||
}
|
||||
.content-play-cover image{
|
||||
animation: rotateImage 10s linear infinite;
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
.content-play-progress{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 35rpx;
|
||||
font-size: 9pt;
|
||||
text-align: center;
|
||||
}
|
||||
.content-play-progress>view{
|
||||
flex: 1;
|
||||
}
|
||||
.content-info{
|
||||
height: 100%;
|
||||
}
|
||||
.content-info-slide{
|
||||
height: 302rpx;
|
||||
margin-bottom:20px ;
|
||||
}
|
||||
.content-info-slide image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content-info-list{
|
||||
font-size: 11pt;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.content-info-list > .list-title{
|
||||
margin: 20rpx 35rpx;
|
||||
}
|
||||
.content-info-list >.list-inner{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.player{
|
||||
background: #222;
|
||||
border-top: 1px solid #252525;
|
||||
height: 112rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #222;
|
||||
border-top:1px solid #252525;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.playlist-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #333;
|
||||
}
|
||||
.playlist-cover{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-left: 15rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1rpx solid #333;
|
||||
}
|
||||
.playlist-info{
|
||||
flex: 1;
|
||||
font-size: 10pt;
|
||||
line-height: 38rpx;
|
||||
margin-left: 20rpx;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
.playlist-info-singer{
|
||||
color: #888;
|
||||
}
|
||||
.playlist-controls{
|
||||
font-size: 10pt;
|
||||
margin-right: 20rpx;
|
||||
color: #c25b5b;
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
<scroll-view class="content-info" scroll-y>
|
||||
<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
|
||||
<swiper-item>
|
||||
<image src="/image/banner.jpg" mode=""/>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image src="/image/banner.jpg" mode=""/>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image src="/image/banner.jpg" mode=""/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="content-info-portal">
|
||||
<view>
|
||||
<image src="/image/04.png" />
|
||||
<text>私人FM</text>
|
||||
</view>
|
||||
<view>
|
||||
<image src="/image/05.png"/>
|
||||
<text>每日歌曲推荐</text>
|
||||
</view>
|
||||
<view>
|
||||
<image src="/image/06.png"/>
|
||||
<text>云音乐新歌榜</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-info-list">
|
||||
<view class="list-title">推荐歌曲</view>
|
||||
<view class="list-inner">
|
||||
<view class="list-item">
|
||||
<image src="/image/cover.jpg" /> <view>紫罗兰</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/image/cover.jpg" /> <view>五月之歌</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/image/cover.jpg" /> <view>菩提树</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/image/cover.jpg" /> <view>欢乐颂</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/image/cover.jpg" /> <view>安魂曲</view>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<image src="/image/cover.jpg" /> <view>摇篮曲</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -0,0 +1,12 @@
|
||||
<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>
|
||||
@ -0,0 +1,18 @@
|
||||
// logs.js
|
||||
const util = require('../../utils/util.js')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
logs: []
|
||||
},
|
||||
onLoad() {
|
||||
this.setData({
|
||||
logs: (wx.getStorageSync('logs') || []).map(log => {
|
||||
return {
|
||||
date: util.formatTime(new Date(log)),
|
||||
timeStamp: log
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"navigationBarTitleText": "查看启动日志",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
<!--logs.wxml-->
|
||||
<view class="container log-list">
|
||||
<block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
|
||||
<text class="log-item">{{index + 1}}. {{log.date}}</text>
|
||||
</block>
|
||||
</view>
|
||||
@ -0,0 +1,8 @@
|
||||
.log-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 40rpx;
|
||||
}
|
||||
.log-item {
|
||||
margin: 10rpx;
|
||||
}
|
||||
@ -0,0 +1,77 @@
|
||||
// pages/test.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady:function() {
|
||||
var audioCtx=wx.createInnerAudioContext()
|
||||
audioCtx.src='http://localhoost:3000/1.mp3'
|
||||
audioCtx.onPlay(function(){
|
||||
console.log('开始播放')
|
||||
})
|
||||
audioCtx.onError(function(res){
|
||||
console.log(res.errMsg)
|
||||
console.log(res.errCode)
|
||||
})
|
||||
audioCtx.play()
|
||||
},
|
||||
sliderChanging:function(e){
|
||||
console.log(e.detail.value)
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
<!--pages/test.wxml-->
|
||||
<text>pages/test.wxml</text>
|
||||
<slider bindchanging="sliderChanging" show-value />
|
||||
@ -0,0 +1 @@
|
||||
/* pages/test/test.wxss */
|
||||
@ -0,0 +1,52 @@
|
||||
{
|
||||
"description": "项目配置文件",
|
||||
"packOptions": {
|
||||
"ignore": [],
|
||||
"include": []
|
||||
},
|
||||
"setting": {
|
||||
"bundle": false,
|
||||
"userConfirmedBundleSwitch": false,
|
||||
"urlCheck": true,
|
||||
"scopeDataCheck": false,
|
||||
"coverView": true,
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"compileHotReLoad": false,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
"preloadBackgroundData": false,
|
||||
"minified": true,
|
||||
"autoAudits": false,
|
||||
"newFeature": false,
|
||||
"uglifyFileName": false,
|
||||
"uploadWithSourceMap": true,
|
||||
"useIsolateContext": true,
|
||||
"nodeModules": false,
|
||||
"enhance": true,
|
||||
"useMultiFrameRuntime": true,
|
||||
"useApiHook": true,
|
||||
"useApiHostProcess": true,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"packNpmManually": false,
|
||||
"enableEngineNative": false,
|
||||
"packNpmRelationList": [],
|
||||
"minifyWXSS": true,
|
||||
"showES6CompileOption": false,
|
||||
"minifyWXML": true,
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
},
|
||||
"condition": false
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"libVersion": "2.19.4",
|
||||
"appid": "wx0675a52eafd1d039",
|
||||
"projectname": "miniprogram-92",
|
||||
"condition": {},
|
||||
"editorSetting": {
|
||||
"tabIndent": "insertSpaces",
|
||||
"tabSize": 2
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||
"rules": [{
|
||||
"action": "allow",
|
||||
"page": "*"
|
||||
}]
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
const formatTime = date => {
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
|
||||
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
|
||||
}
|
||||
|
||||
const formatNumber = n => {
|
||||
n = n.toString()
|
||||
return n[1] ? n : `0${n}`
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
formatTime
|
||||
}
|
||||
Loading…
Reference in new issue