微信小程序page的生命周期和音频播放及监听的介绍

1. 微信小程序page的生命周期

微信小程序的page生命周期方法包括onLoad、onShow、onReady、onHide和onUnload。

1.1 onLoad

onLoad是页面被加载时触发的方法。可以在此处进行一些初始化操作。

Page({
  onLoad: function(options) {
    // 从上一个页面传入的参数可以在options中获取
    const param = options.param
    // 调用接口
    wx.request({
      url: 'https://example.com',
      success: function(res) {
        console.log(res.data)
      }
    })
  }
})

在onLoad中可以获取上一个页面传递的参数，并且可以进行网络请求等操作。

1.2 onShow

onShow是页面显示时触发的方法。可以在此处进行一些动态更新数据的操作。

Page({
  onShow: function() {
    // 获取本地存储的数据
    const data = wx.getStorageSync('key')
    // 更新页面数据
    this.setData({
      data: data
    })
  }
})

在onShow中可以获取本地存储的数据，并且可以更新页面数据。

1.3 onReady

onReady是页面初次渲染完成时触发的方法。可以在此处进行一些UI相关的操作。

Page({
  onReady: function() {
    const audio = wx.createInnerAudioContext()
    audio.src = 'https://example.com/audio.mp3'
    audio.play()
  }
})

在onReady中可以创建音频上下文，并且开始播放音频。

1.4 onHide

onHide是页面隐藏时触发的方法。可以在此处进行一些清理工作。

Page({
  onHide: function() {
    // 停止音频播放
    const audio = wx.createInnerAudioContext()
    audio.stop()
  }
})

在onHide中可以停止音频播放等清理操作。

1.5 onUnload

onUnload是页面卸载时触发的方法。可以在此处进行一些清理工作。

Page({
  onUnload: function() {
    // 清空本地存储的数据
    wx.removeStorageSync('key')
  }
})

在onUnload中可以清空本地存储等清理操作。

2. 音频播放及监听

微信小程序提供了创建音频上下文并进行音频播放的功能。下面将介绍如何创建音频上下文、播放音频以及监听音频事件。

2.1 创建音频上下文

可以通过wx.createInnerAudioContext方法创建音频上下文。

const audio = wx.createInnerAudioContext()

可以通过wx.createInnerAudioContext方法创建音频上下文。

2.2 播放音频

可以通过设置音频上下文的src属性来指定要播放的音频文件路径，并调用play方法开始播放音频。

audio.src = 'https://example.com/audio.mp3'
audio.play()

可以通过设置src属性指定要播放的音频文件路径，并调用play方法开始播放音频。

2.3 监听音频事件

可以通过设置音频上下文的事件处理函数来监听音频事件。

audio.onPlay(() => {
  console.log('音频开始播放')
})
audio.onEnded(() => {
  console.log('音频播放结束')
})
audio.onError((err) => {
  console.error(err)
})

可以通过设置onPlay、onEnded和onError等事件处理函数来监听音频播放、播放结束和错误等事件。