投票评选活动小程序的分享功能和背景音乐功能实现

投票 评选活动 小程序的分享功能和背景音乐功能实现

投票评选活动过程中，需要转发分享出去，实现投票的效果，那么就需要分享功能，不然怎么实现投票呢，其实这个是最具价值的功能之一。

而背景音乐播放功能，只能算是提升用户体验的一个功能吧，极大的丰富了应用程序的功能和内容，锦上添花。

分享功能

页面分享功能的实现，只需要在button按钮上添加open-type属性，设置其值为share即可。

<button class='cu-btn' open-type='share'>
      分享
</button>

然后.js中还需要添加代码片段：

/**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    },

注意，共有两个地方要设置。

背景音乐功能

使用wx.getBackgroundAudioManager()，获取全局唯一的背景音频管理器。

小程序切入后台，如果音频处于播放状态，可以继续播放。

从微信客户端6.7.2版本开始，若需要在小程序切后台后继续播放音频，需要在 app.json 中配置 requiredBackgroundModes 属性。

BackgroundAudioManager 实例，可通过wx.getBackgroundAudioManager 获取。

src

音频的数据源（2.2.3 开始支持云文件ID）。默认为空字符串，当设置了新的 src 时，会自动开始播放，目前支持的格式有 m4a, aac, mp3, wav。

coverImgUrl

封面图 URL，用于做原生音频播放器背景图。原生音频播放器中的分享功能，分享出去的卡片配图及背景也将使用该图。

title

音频标题，用于原生音频播放器音频标题（必填）。原生音频播放器中的分享功能，分享出去的卡片标题，也将使用该值。

实现代码如下：

 /**
     * 生命周期函数--监听页面初次渲染完成
     */
onReady() {
			this.backgroundAudio = wx.getBackgroundAudioManager();
      this.backgroundAudio.src = "http://tcmmss.cn/1629334773338.mp3";
      this.backgroundAudio.coverImgUrl = "http://tcmmss.cn/index1.jpg",
      this.backgroundAudio.title = "活动序曲";
  		// 监听背景音频播放事件
      this.backgroundAudio.onPlay(()=> {
        console.log("音乐播放开始");
      });
  		// 监听背景音频暂停事件
      this.backgroundAudio.onPause(()=> {
        console.log("音乐播放暂停");
      });
  		// 监听背景音频自然播放结束事件
      this.backgroundAudio.onEnded(()=> {
        console.log("音乐播放结束");
      });
  },