介绍
此微信小程序的后台是基于WeiPHP4.0开发的，众所周知WeiPHP框架坑洞居多，先列举部分我遇到的坑及其解决方案。
数据模型无法新建
1.在建立插件后，数据模型无法新建————数据库引擎问题（具体我也不知道什么鬼情况）
解决方案，卸载3.0安装4.0，所以说我为什么多此一举安装了3.0（我开始还傻乎乎的以为3.0是最新的，后来在他们官网看到都有5.1了，安装后发现内置插件比较少，于是安装的4.0）。
解决方案，卸载3.0安装4.0，所以说我为什么多此一举安装了3.0（我开始还傻乎乎的以为3.0是最新的，后来在他们官网看到都有5.1了，安装后发现内置插件比较少，于是安装的4.0）。
字段数据无法更新
2.在新建数据模型后，设置字段管理时遇到新添加的字段无法进行数据更新————系统缓存问题
解决方案，在weiphp后台里点击清除缓存即可。
解决方案，在weiphp后台里点击清除缓存即可。
同上
3.我为用户信息数据库添加了一个签到标记的字段，也无法进行数据更新————原因同上
......
......
简单介绍一下，这个微信小程序是基于WeiPHP4.0的demo，再结合有赞的vant-weapp微信小程序UI库，最后集成了我写的一点API接口而成。微信小程序的内容布局比较单调，均采用上拉更新数据的列表模式（就是在demo基础上进行了UI美化），我自己新建的页面有music，video，comic，comic_list，search，help......从这里可以看出我小程序文章内容的主要分布。
就对其中几个页面做一下简单介绍，代码不完整，主要是里面还有问题，以后有空再优化优化吧。
音乐Music
一般使用没有问题，歌词播放也是正常，就是退出页面后再进入，音乐播放的监听函数好像就失效了，进度条和歌词列表无法动态刷新，进度条和按钮会绑定当前正在播放的音乐，music.js里面的歌词解析及行数锁定相关代码参考了https://www.cnblogs.com/unpro-mercy/p/11549194.html这篇文章，其次js中使用了vant-weapp的部分组件，组件导入及其相关使用说明可参考官方文档。
music.wxml好像放不上来的样子，故截图示意一下。
//music.js
//获取应用实例
var app = getApp()
const music = wx.getBackgroundAudioManager()
music.autoplay = false
Page({
data: {
toastHidden:true,
music_info: {},
lrcDir: '',
storyContent: [],
currentIndex222: 0,
starttime: '00:00',
duration: '00:00',
changePlay: false,
offset: 0,
start: 0,
max: 100
},
onLoad: function (options) {
//console.log(options)
var that =this
this.getDetail(options.mid, this)
},
/**获取单曲信息 */
getDetail: function (id, obj) {
var that = this
var key = 'music_info_' + id
var key_2 = 'music_lrc_' + id
var music_info = wx.getStorageSync(key)
var music_lrc = wx.getStorageSync(key_2)
if (music_info && music_lrc) {
console.log('data from localCache')
obj.setData({
music_info: music_info,
lrcDir: music_lrc
})
this.setTimeEnd()
return true
}
wx.request({
url: '填获取音乐信息的API',
data: { id: id, type: 'single'},
header: {
'Content-Type': 'application/json'
},
success: function (res) {
obj.setData({ music_info: res.data })
//console.log(key)
wx.setStorageSync(key, res.data)
that.setTimeEnd()
console.log('data from server')
wx.request({
url: res.data.lrc,
header: {
'Content-Type': 'application/json'
},
success: function (res) {
obj.setData({ lrcDir: res.data })
wx.setStorageSync(key_2, res.data)
console.log('data_2 from server')
},
fail: function (res) {
console.log('server error')
}
})
},
fail: function (res) {
console.log('server error')
Toast('当前网络异常，请稍后再试')
obj.setData({ Hidden: false })
}
})
},
/**播放音乐 */
playMusic:function () {
var that = this
music.src = this.data.music_info.url
music.title = this.data.music_info.name
this.setData({//提取歌词到解析数组
storyContent: that.sliceNull(that.parseLyric(that.data.lrcDir))
})
music.play()
music.onTimeUpdate(() => {
that.playLyric()// 动态播放歌词
var duration = music.duration;
var offset = music.currentTime;
var currentTime = parseInt(music.currentTime);
var min = "0" + parseInt(currentTime / 60);
var sec = currentTime % 60;
if (sec < 10) {
sec = "0" + sec;
}
var starttime = min + ':' + sec; /* 00:00 */
that.setData({
offset: currentTime,
starttime: starttime,
changePlay: true
})
})
music.onEnded(() => {
that.setData({
starttime: '00:00',
offset: 0
})
//console.log("音乐播放结束");
})
},
pauseMusic: function () {
music.pause()
},
stopMusic: function () {
music.stop()
this.setData({
starttime: '00:00',
offset: 0
})
},
musicChange: function (e) {
var that = this
var offset = parseInt(e.detail)
music.seek(offset)
//this.playMusic()
//this.liveTimeUpdata()
},
setTimeEnd: function () {
var duration = parseInt(this.data.music_info.dt / 1000);
//console.log(duration)
var min = "0" + parseInt(duration / 60);
var sec = duration % 60;
if (sec < 10) {
sec = "0" + sec;
};
var duration_format = min + ':' + sec; /* 00:00 */
this.setData({
duration: duration_format,
max: duration
})
},
/**运行歌词 */
playLyric: function(){
var that = this
//console.log(that.data.storyContent)//[[time,str],[time,str],......]
var currentIndex = 0;
var len = that.data.storyContent.length
var musicTime = music.currentTime
if (that.data.currentIndex222 != len - 1) {//
var j = 0;//当前行数
//for内取0开始是为了在全部区间匹配
for (j = 0; j < len; j++) { // 当前时间与前，后时间比较
if (that.data.currentIndex222 == len - 2) { //最后一行只能与前一行时间比较
if (parseFloat(musicTime) > parseFloat(that.data.storyContent[len - 1][0])) {
that.setData({
currentIndex222: len - 1
})
return;
}
} else {
if (parseFloat(musicTime) > parseFloat(that.data.storyContent[j][0]) && parseFloat(musicTime) < parseFloat(that.data.storyContent[j + 1][0])) {
that.setData({
currentIndex222: j
})
return;
}
}
}
}
},
/**解析歌词 */
parseLyric: function (text) {
var result = [];
var lines = text.split('\n[') //切割每一行
//去掉不含时间的行
var num = 0
var i
for (i in lines){ //补全被切割的[
if (num == 1) lines[i] = '[' + lines[i]
num = 1
}
//生成数组时，最后一个为空元素，这里可去掉
lines[lines.length - 1].length === 0 && lines.pop();
//console.log(lines)
//匹配[]的时间内容
var pattern = /\[(.+?)\]/g
lines.forEach(function (v /*数组元素值*/, i /*元素索引*/, a /*数组本身*/) {
//提取时间[xx:xx.xx]
var time = v.match(pattern),
//提取歌词
value = v.replace(pattern, '');
//time可能是[xx:xx.xx][xx:xx.xxx][xx:xx.xx]的形式，需要进一步分隔
time.forEach(function (v1, i1, a1) {
//去掉中括号得到xx:xx.xx/x
var t = v1.slice(1, -1).split(':');
result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
});
});
//最后将结果数组中的元素按时间大小排序
result.sort(function (a, b) {
return a[0] - b[0];
});
return result;
},
/**去除歌词空白 */
sliceNull: function (lrc) {
var result = []
for (var i = 0; i < lrc.length; i++) {
if (lrc[i][1] == "") {
} else {
result.push(lrc[i]);
}
}
return result
}
})
视频video
主要是用for渲染了选集的按钮，如图所示，如果需要设置倍速播放，参考一下文档的API调用即可。
搜索search
使用了vant的标签页组件，通过选择组件上面的选项，分类搜索相关信息。
访问小程序
很久没更新了，过来除一下草，浇一下水，自从期末挂了一门课以来，心情较为郁闷。补考的复习又得浪费我一大把时间了。。。