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

news2024/12/27 11:46:54

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

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

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

分享功能

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/616966.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

路径规划算法:基于静电放电优化的路径规划算法- 附代码

路径规划算法&#xff1a;基于静电放电优化的路径规划算法- 附代码 文章目录 路径规划算法&#xff1a;基于静电放电优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要&#xff1a;本文主要介绍利用智能优化…

Qt/GUI/布局/实现窗口折叠效果/且在操作时父窗口尺寸跟随变动

文章目录 概述无法resize到小尺寸可行方案其他方案 概述 本文旨在&#xff0c;实现如下所示的显示或隐藏 ‘附加选项’ 的效果&#xff0c;以折的不常用信息和操作项&#xff0c;减少普通用户负担&#xff0c;提升用户体验。在某些软件中此类窗口折叠效果&#xff0c;常用 “……

SpringCloud断路器

SpringCloud断路器 Hystrix 简介 hystrix对应的中文名字是“豪猪”&#xff0c;豪猪周身长满了刺&#xff0c;能保护自己不受天敌的伤害&#xff0c;代表了一种防御机制。 这与hystrix本身的功能不谋而合&#xff0c;因此Netflix团队将该框架命名为Hystrix&#xff0c;并使用…

2023最详细的接口测试用例设计教程,详细文档等你来拿

目录 一、接口测试流程 二、分析接口文档元素 三、如何设计接口测试用例 四、常用的接口测试用例覆盖方法 五、接口测试接口优先级 六、接口测试的设计思路分析 七、接口测试返回结果的比较 一、接口测试流程 1、需求讨论 2、需求评审 3、场景设计 4、数据准备 5、测试执…

sdf与timingCheck和后仿真

目录 1.Distributed delays 2.specify--endspecify 1.1 specify内部语法 2.sdf 2.1 sdf的格式 3.timingCheck和网表后仿真 4.关于负值delay sdf和 module 里面的specify--endspecify都可以对路径延时进行赋值和检查&#xff1b;HDL语言中的‘#()’也可以描述延时【叫做D…

没事千万别动生产服数据库 - 来自小菜鸟的忠告

阿里云官方参考文档 目录 背景一、环境部署二、目录规划三、操作步骤FAQ 背景 今天把一张 5500 多万条记录的表进行按年度拆分&#xff0c;本来打算将表数据拆分为 2020 年、2021 年、2022 年三张新表&#xff0c;提升原表查询效率&#xff0c;仅保留 2023 年数据。表拆分完毕…

【SpinalHDL快速入门】4.1、基本类型之Bool

Tips1&#xff1a; 由于SpinalHDL是基于Scala构建的&#xff0c;Scala本身自带类似变量Boolean&#xff0c;故在此要认准SpinalHDL中采用的是Bool而非Boolean&#xff1a; Bool&#xff08;大写的True和False&#xff09;&#xff1a;True表示1&#xff0c;False表示0Boolean&…

Vue3搭建

Vue3项目搭建全过程 vue create 项目名 选择手动吗&#xff0c;自定义安装 选择vue3 是否选择class风格组件 选择ts处理工具和css预处理器 Y 是否使用router的history模式 Y 选择css预处理语言 ;less 9.选择lint的检查规范 只使用EsLint官网推荐规范 使用EsLint官网推荐规…

MyBatis-plus(1)

基本概念: 一)开发效率也就是我们使用这款框架开发的速度快不快&#xff0c;是否简单好用易上手。从这个角度思考&#xff0c;每当我们需要编写一个SQL需求的时候&#xff0c;我们需要做几步 1)Mapper接口提供一个抽象方法 2)Mapper接口对应的映射配置文件提供对应的标签和SQL语…

论文笔记--LLaMA: Open and Efficient Foundation Language Models

论文笔记--LLaMA: Open and Efficient Foundation Language Models 1. 文章简介2. 文章概括3 文章重点技术3.1 数据集3.2 模型训练 4. 数值实验5. 文章亮点6. 原文传送门7. References 1. 文章简介 标题&#xff1a;LLaMA: Open and Efficient Foundation Language Models作者…

【自动化测试】--JUnit5

前言 小亭子正在努力的学习编程&#xff0c;接下来将开启软件测试的学习~~ 分享的文章都是学习的笔记和感悟&#xff0c;如有不妥之处希望大佬们批评指正~~ 同时如果本文对你有帮助的话&#xff0c;烦请点赞关注支持一波, 感激不尽~~ 目录 前言 Junit5简介 什么是Junit5 JU…

tomcat和undertow、jetty、netty的区别

记录一下&#xff0c;最近发现的几个容器的区别 tomcat简介 Tomcat&#xff1a;免费开源&#xff0c;轻量级应用服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和调试JSP 程序的首选。实际上Tomcat 部分是Apache 服务器的扩展&am…

十年历程:下定决心转向自动化测试/开发

目录 前言&#xff1a; 十年测试心路历程&#xff1a; 放弃了年薪二十万的offer&#xff0c;挑战自动化测试&#xff1a; 自动化测试心得&#xff1a; 自动化测试没用的误解&#xff1f; 关于测试开发 测试行业的现状 那么如何来全面的学习自动化测试呢&#xff1f; 前言&…

4.2 synchronized 解决方案

4.2 synchronized 解决方案 1、应用之互斥2、synchronized3、思考4、面向对象改进 1、应用之互斥 为了避免临界区的竞态条件发生&#xff0c;有多种手段可以达到目的。 阻塞式的解决方案&#xff1a;synchronized&#xff0c;Lock非阻塞式的解决方案&#xff1a;原子变量 本…

Linux网络基础 — 应用层

目录 应用层 再谈 "协议" 网络版计算器 HTTP协议 认识URL urlencode和urldecode HTTP协议格式 HTTP请求 HTTP响应 HTTP的方法 HTTP的状态码 HTTP常见Header 拓展知识&#xff08;了解&#xff09; 长链接 http周边会话保持 基本工具(http) 应用层 程序…

MOS管电源开关电路的缓启动功能是怎么实现的

先看一个电路&#xff1a; 其主要设计思路是使用MOS管来做一个开关&#xff0c;控制电源输出&#xff1b; 为什么选用MOS管&#xff1f; 这就涉及到MOS管的两个重要特性&#xff1a; 1.MOS管的导通电流大&#xff1b; 2.MOS管导通时内阻小&#xff0c;内部功耗低&#xff1b…

Probit模型、Logit模型、IV-Probit模型、IV-Probit模型

概述 Y β 1 X 1 β 2 X 2 ϵ i Y\beta_1X_1\beta_2X_2\epsilon_i Yβ1​X1​β2​X2​ϵi​ 边际效应&#xff1a;就是系数&#xff0c;即 β 1 \beta_1 β1​ 、 β 2 \beta_2 β2​ 解释&#xff1a;如&#xff0c;在控制其他变量&#xff08;条件&#xff09;不变的情况…

常用设计模式之单例模式

文章目录 饿汉式和懒汉式多线程中的懒汉式单例模式内存释放问题单例模式优缺点单例应用场景测试代码 饿汉式和懒汉式 单例模式是指在任何时候都保证只有一个类实例&#xff0c;并提供一个访问它的全局访问节点。 单例模式结构图&#xff1a; 解释&#xff1a;单例模式就是一…

罗湖区田心村旧改确认实施主体的公示,华润集团开发

深圳市罗湖区城市更新和土地整备局发布关于罗湖区笋岗街道田心村改造项目一期子项目2&#xff08;1-14、1-16、1-17地块&#xff09;确认实施主体的公示。 田心村改造项目位于罗湖区笋岗街道田心村&#xff0c;2012年4月&#xff0c;深圳市城市规划委员会建筑与环境艺术委员会2…

关于ElementPlus中的表单验证

关于ElementPlus中表单的校验规则&#xff0c;官网文档已经给出了&#xff0c;但是没有说明性文字&#xff0c;所以我想来记录一下&#xff0c;给出一些文字说明 ElementPlus中的简单校验 ElementPlus的表单的一般结构是&#xff1a; <el-form><el-form-item>&l…