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

Monstar_0°-蒙

2024-07-02 帮助1人

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

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

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

分享功能

页面分享功能的实现，只需要在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("音乐播放结束");
      });
  },

学新通

页面初次渲染完成，就执行背景音乐播放的功能。

学新通

这篇好文章是转载于：学新通技术网

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

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

分享功能

背景音乐功能

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

TikTok加速器哪个好免费的TK加速器推荐

Android 11 保存文件到外部存储，并分享文件

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

微信运动停用后别人还能看到步数吗