我的小程序开发——音乐播放和搜索及登录

1.日期处理类库

Moment.js

下载安装 npm install moment

当引用时报错，小程序加载第三方的包它一定会去miniprogram_npm下面去找，如果有就用，没有就会当前位置查找

moment下载至node_modules中了，所以我们还需要通过构建的方式将其构建到miniprogram_npm中

步骤：工具-->构建npm

使用moment

 // songData.songs[0].dt 单位ms
   let durationTime = moment(songData.songs[0].dt).format('mm：ss');

2.音乐实时播放时间格式化显示

API：BackgroundAudioManager.onTimeUpdate(function callback)
监听背景音频播放进度更新事件，只有小程序在前台时会回调,单位是s

// 监听音乐实时播放的进度
this.backgroundAudioManager.onTimeUpdate(()=>{
    // console.log("总时长",this.backgroundAudioManager.duration);
    let currentTime = moment(this.backgroundAudioManager.currentTime*1000).format('mm:ss');
    this.setData({
      currentTime
    })
  })
  }

监听音乐的播放进度

// 计算实时进度条,用百分比
    let  currentWidth = (this.backgroundAudioManager.currentTime/this.backgroundAudioManager.duration)*100

监听音乐自动播放完毕

// 监听音乐播放自然结束并切歌
  this.backgroundAudioManager.onEnded(()=>{
    // 暂停上一首
    this.backgroundAudioManager.stop();
    // 订阅消息获得recommend发布的 musicId
    PubSub.subscribe('musicId',(msg,musicId)=>{
    // 更新列表
    this.getMusicInfo(musicId);
    // 取消订阅
    PubSub.unsubscribe('musicId');
    // 歌曲自动播放
   this.musicControl(true,musicId);
  })
  // 发布消息数据给recommendSong页面，触发自定义消息
  PubSub.publish('switchType','next');
    // 将实时精度条还原成0,播放时间还原成0
    this.setData({
      currentWidth:0,
      currentTime:'00:00'
    })
    // console.log("播放进度条",this.data.currentWidth);
  })

3.右边固定左边自适应布局

//html布局
<!-- 头部搜索 -->
<view class="header">
<!-- 搜索框 -->
  <view class="searchInput">
    <text class="iconfont icon-sousuo searchIcon"></text>
    <!-- 输入框样式类的创建 -->
    <input type="text" placeholder="搜索歌曲名称" class="input" placeholder-class="placeholder"/>
  </view>
<!-- 取消按钮 -->
  <text class="cancel">取消</text>
</view>

/* 右侧固定左侧自适应 */
.header{
  display: flex;
  height: 60rpx;
  line-height: 60rpx;
  padding: 10rpx;
}
.searchInput{
  display: flex;
  //核心
  flex:1;
  background:rgba(237,237,237,0.3);
  border-radius: 30rpx;
}
.searchInput input {
  margin-left: 50rpx;
  height: 60rpx;
  line-height: 60rpx;
}
.placeholder{
  color: red;
  font-size: 28rpx;
}
.searchIcon {
  position: relative;
  left: 15rpx;
  font-size: 48rpx;
}
//先固定右边的宽度在左边宽度自适应
.cancel{
  width: 100rpx;
  text-align: center;
}

4.输入框实现节流事件

1.input事件：表单项内容改变就会触发
2.change事件：失去焦点后触发
3.节流

// 输入框改变的回调
  isSent: false,//是否发送中  节流
  handleInputChange(event){
    let containt = event.detail.value;
    this.setData({
      // 去空格
      searchContent : containt.trim()
    })
    // 节流
    if(this.isSent) return;
    else{
      this.isSent = true;
      setTimeout(()=>{
        // 搜索获取数据
        this.isSent = false;
        this.getSearchList();
      },1000)
    }
  }

5.小程序获取用户的唯一标识

wx.login(Object,Object)获取用户登录凭证（code)

获取appsecret

Fly.js 不可以使用Axios，因为Axios是基于浏览器XmlHttpRequest

npm install flyio

1.引入fly

var Fly = require("flyio/src/node")
var fly = new Fly

6.为用户加密

jsonwebtoken包的使用 下载安装

npm install jsonwebtoken

1.引入jwt

var jwt = require('jsonwebtoken')
var token = jwt.sign({foo:'bar'},'shhhhh');//加密的一个密钥

7.小程序的分包

1.小程序如果包大于2M则需要分包进行上传

目前小程序分包大小有以下限制：

• 整个小程序所有分包大小不超过 20M
• 单个分包/主包大小不能超过 2M

常规分包

独立分包

8.小程序支付流程

参考文档
pay.weixin.qq.com/wiki/doc/ap…
pay.weixin.qq.com/wiki/doc/ap…

支付流程