vue 开发的微信公众号网页添加背景音乐，以及音乐图标旋转动画

这里可以解决你遇到的几个问题

每个页面添加背景音乐
加上一些H5小动画（音乐图标）
页面切换的时候音乐不重新播放
音乐自动播放

首先我的这部分代码是添加到app.vue当中, 也就是主模版文件当中。废话不多说，直接上代码

第一部分模版主要主要实现播放按钮旋转我用了2个keep-alive标签。刚开始把 audio 和 img（播放控制按钮）放在一起，出现了报错，所以就分开放了。

// 文件位置 app.vue
<template><keep-alive><audio style="display:none; height: 0" id="bg-music" preload="auto" src="/static/bgm.mp3" loop="loop"></audio></keep-alive><keep-alive><img :src="src" alt="" width="40px" height="40px" @click="open" class="img" :class="{start: mymove, pause: !mymove}"></keep-alive>
</template><style >
.img {position: fixed !important;left:20px;top:5px;z-index: 1000;
}
.start {animation: mymove 1.5s infinite linear; // 旋转动画部分
}
.pause {z-index: 1000;
}
// css 桢动画
@keyframes mymove{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}
}
</style>

第二部分就是音乐的暂停播放以及进入页面的自动播放

export default {name: 'App',data() {return {checked: true, // 默认开始音乐播放src: require('@/assets/play2.png'), // 注意图片资源的加载方式mymove: true // 控制音乐控制按钮样式};},created() {// 音乐自动播放监听document.addEventListener('DOMContentLoaded', function () {function audioAutoPlay() {var audio = document.getElementById('bg-music');audio.play();document.addEventListener("WeixinJSBridgeReady", function () {audio.play();}, false);}audioAutoPlay();})},methods:{open() {console.log('open')var audio = document.getElementById('bg-music');this.checked = !this.checkedif (this.checked) {this.src = require('@/assets/play2.png')audio.play()this.mymove = true} else {this.src = require('@/assets/pause.png')audio.pause()this.mymove = false}}}
}

本人郑重承诺以上的代码全部是本人验证过的。请有需要的各位放心享用。当然也希望大家能指出问题，一起探讨，一起进步。

vue 开发的微信公众号网页添加背景音乐，以及音乐图标旋转动画相关推荐

vue开发项目微信公众号授权支付开发
一.注册微信公众号服务号并填写企业信息(个人订阅号没有开发微信支付的权限) 链接: https://mp.weixin.qq.com/ 二.在微信公众号内进行微信认证(3-5个工作日) 三.在微信公众 ...
Vue 开发在微信公众号中如何文件下载
通常我们调用下载接口时,我们需要根据后端提供的接口返回信息进行相应的处理操作. 1.接口返回文件路径(部分). window.open('http://192.168.22.246:8080'+ f ...
vue3+vant开发微信公众号网页爬坑不完全指北
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言 8月底的时候接到了一个微信公众号网页开发的任务, 在此之前我从没开发过微信公众号网页的项目, 心想这回又能学到新东西了, 然后又是移 ...
公众号开发(2) —— 盛派.net SDK + vue搭建微信公众号网页开发框架
需求:通过微信公众号菜单跳转到手机端网页,跳转后通过微信授权登录获取微信公众号用户的OpenId(用户关注公众号后,用户在公众号的唯一凭证),通过OpenId和后台数据库用户信息绑定起来并实现一些业务 ...
微信公众号网页在本地开发模式下如何使用正式环境的域名来调试
微信公众号网页在本地开发模式下如何使用正式环境的域名来调试? 鄙人之前也不知道,网上搜了一下,看到的几篇文章都是要使用代理,有用Nginx的,还有自己写代理的.主要是按照步骤做了并不行.于是自己折腾了 ...
微信公众号网页授权--前端获取code及用户信息（vue）
前段时间开发微信公众号网页授权,虽然网上已经有很多关于这方面的博客或者教程,但是第一次开发还是遇到挺多坑的,以下分享一下我的踩坑填坑之路. 一.测试号相关配置首先在你公司申请的测试号上配置好相关信息 ...
php公众号开发配置网页域名,微信公众号网页开发授权配置流程
1.配置 1.1 公众号配置 1.2 开发者账号配置选择开发者工具->web开发者工具->绑定开发者微信账号. 1.3 开发域名配置选择公众号设置->功能设置,根据需求设置:业务 ...
uniapp开发微信公众号网页-微信JSSDK使用
uniapp开发微信公众号网页-微信JSSDK使用一. 安装jweixin-module 二. 新建js文件,把jssdk的接口简单封装,然后挂载到vue实例 1. 在js公共文件夹下创建wecha ...
微信公众号网页开发——实用真机调试
前言微信公众号网页开发的真机调试一直是很头疼的事情. 原因一微信公众号配置的JS安全域名只有三个,一个大中型的公众号这三个JS安全域名都是生产的域名,不可能预留域名用于开发和调试. 原因二在微信 ...
微信公众号菜单添加小程序，miniprogram，pagepath参数详解，php开发公众号
随着微信小程序功能的开发, 已经可以跟公众号打通了, 主要有两种方式: 1) 在公众号文章中插入小程序 2) 在公众号菜单中添加小程序第一种方式, 子恒老师在前面的课程已经详细介绍过, 今天来讲第二 ...

vue 开发的微信公众号网页添加背景音乐，以及音乐图标旋转动画

vue 开发的微信公众号网页添加背景音乐，以及音乐图标旋转动画相关推荐

最新文章

热门文章

vue 开发的微信公众号网页 添加背景音乐，以及音乐图标旋转动画

vue 开发的微信公众号网页 添加背景音乐，以及音乐图标旋转动画相关推荐

最新文章

热门文章

vue 开发的微信公众号网页添加背景音乐，以及音乐图标旋转动画

vue 开发的微信公众号网页添加背景音乐，以及音乐图标旋转动画相关推荐