第一个微信小程序

介绍

此微信小程序的后台是基于WeiPHP4.0开发的,众所周知WeiPHP框架以坑洞居多,先列举部分我遇到的坑及其解决方案。

数据模型无法新建
1.在建立插件后,数据模型无法新建————数据库引擎问题(具体我也不知道什么鬼情况)
解决方案,卸载3.0安装4.0,所以说我为什么多此一举安装了3.0(我开始还傻乎乎的以为3.0是最新的,后来在他们官网看到都有5.1了,安装后发现内置插件比较少,于是安装的4.0)。
字段数据无法更新
2.在新建数据模型后,设置字段管理时遇到新添加的字段无法进行数据更新————系统缓存问题
解决方案,在weiphp后台里点击清除缓存即可。
同上
3.我为用户信息数据库添加了一个签到标记的字段,也无法进行数据更新————原因同上
......

简单介绍一下,这个微信小程序是基于WeiPHP4.0的demo,再结合有赞的vant-weapp微信小程序UI库,最后集成了我写的一点API接口而成。微信小程序的内容布局比较单调,均采用上拉更新数据的列表模式(就是在demo基础上进行了UI美化),我自己新建的页面有music,video,comic,comic_list,search,help......从这里可以看出我小程序文章内容的主要分布。

就对其中几个页面做一下简单介绍,代码不完整,主要是里面还有问题,以后有空再优化优化吧。

音乐Music

一般使用没有问题,歌词播放也是正常,就是退出页面后再进入,音乐播放的监听函数好像就失效了,进度条和歌词列表无法动态刷新,进度条和按钮会绑定当前正在播放的音乐,music.js里面的歌词解析及行数锁定相关代码参考了简书上面的一篇文章,其次js中使用了vant-weapp的部分组件,组件导入及其相关使用说明可参考官方文档。

music.wxml好像放不上来的样子,故截图示意一下。
music页面


//music.js
//获取应用实例
var app = getApp()
const music = wx.getBackgroundAudioManager()
music.autoplay = false

Page({
  data: {
    toastHidden:true,
    music_info: {},
    lrcDir: '',
    storyContent: [],
    marginTop: 0, //文稿滚动距离
    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的标签页组件,通过选择组件上面的选项,分类搜索相关信息。

搜索页面

很久没更新了,过来除一下草,浇一下水,自从期末挂了一门课以来,心情较为郁闷。补考的复习又得浪费我一大把时间了。。。

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注