mpvue 微信小程序设置背景音乐

在mpvue小程序项目中，设置背景音乐：

1、在公共js中设置一个变量，创建背景音乐

例，我的是在utils文件下的global.js

//背景音乐
const bgrAudioContext = wx.createInnerAudioContext();export default {bgrAudioContext:bgrAudioContext
}

2、根目录下的main.js文件引入global.js

import Vue from 'vue'
import App from './App'
import global from '@/utils/global'
import store from '@/store/store'Vue.config.productionTip = false
App.mpType = 'app'const app = new Vue(App)
app.$mount()Vue.prototype.$global = global
Vue.prototype.$store = store

3、在根目录components文件夹中创建music.vue自定义组件

<template><!-- 背景音乐组件 --><view class="music-container"><view class="music"><img @tap="is_on=false" v-if="is_on == true" class="img move"  :src="img_on"/><img @tap="is_on=true" v-if="is_on == false" class="img"  :src="img_off"/></view></view>
</template><script>export default {data() {return {is_on : true,bgm_src:'https://jm-images.oss-cn-beijing.aliyuncs.com/307ec69373af473cbecaccffe22c05a4.mp3',//音乐地址img_on: 'https://jm-images.oss-cn-beijing.aliyuncs.com/f7c60875b0ab408ea2be3e38b50a7e41.PNG',img_off: 'https://jm-images.oss-cn-beijing.aliyuncs.com/d5101cc5d46a497da80e7e8d5a255613.PNG',}},methods: {createBgm() {this.$global.bgrAudioContext.autoplay = true;this.$global.bgrAudioContext.src = this.bgm_src;this.$global.bgrAudioContext.loop = true;},tigger(){if(!this.is_on){this.is_on = false;this.$global.bgrAudioContext.pause()}else{this.is_on = true;this.$global.bgrAudioContext.play()}wx.setStorageSync('is_on',this.is_on)},getIsOn(){if(wx.getStorageSync('is_on') == false || wx.getStorageSync('is_on') == true){this.is_on =  wx.getStorageSync('is_on')}else{this.is_on = true;this.is_on =  wx.setStorageSync('is_on',true)}this.tigger()}},onLoad() {this.createBgm()},onShow(){this.getIsOn()},onUnload(){},created() {this.getIsOn()},watch:{'is_on':function(newVal,oldVal){if(newVal!=oldVal){this.tigger()}}}}
</script><style>.music-container{position: fixed;top:10rpx;left:10rpx;color:#fff;z-index: 99999;}.music .img{width:44rpx;height:44rpx;}.move{transform-origin: center center;animation: myMove 4s linear infinite;-webkit-animation: myMove 4s linear infinite;}@keyframes myMove{0%{transform: rotate(0deg);}100% {transform: rotate(360deg);}}@-webkit-keyframes myMove{0%{transform: rotate(0deg);}100% {transform: rotate(360deg);}}
</style>

4、在组件中使用

<template><Music></Music>
</template><script>import Music from "@/components/music"export default {components: {Music},data() {}}
</script>

以上是本人项目中的应用，亲测有效。欢迎评论交流。

mpvue 微信小程序设置背景音乐相关推荐

mpvue微信小程序http请求-fly.js
mpvue微信小程序http请求-fly.js fly.js是什么? 一个支持所有JavaScript运行环境的基于Promise的.支持请求转发.强大的http请求库.可以让您在多个端上尽可能大限度 ...
家用电脑设置成小程序服务器,电脑微信小程序设置全屏的方法是什么
电脑微信小程序设置全屏的方法是什么方法:首先配置小程序resizeable的参数设置为true,这样操作可以在电脑端打开一个较大的横向窗口显示,屏幕大小是1024乘以768的,然后再按下全屏按钮,便 ...
微信小程序设置背景图片
经常为微信小程序设置颜色背景,突然发现一张好看的图片怎么把它设置为背景呢? 以下总结了三种方法: css中通过url获取网络图片微信小程序中不能使用本地图片 background-image:url ...
微信小程序设置启动页面
微信小程序设置启动页面微信小程序运行成功需要跳转到启动页面: 微信小程序跳转启动页面主要有两种方法: 1.通过配置全局文件page.json进行配置在app.json文件中,pages数组,设置在 ...
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...
微信小程序设置高度占满屏幕
因为有个页面需要改变背景颜色,所以要高度占满. 微信小程序设置高度占满屏幕: /*设置根节点,高度占满整个屏幕 */ page{height: 100%; } /*然后设置子节点高度100%*/ .c ...
微信小程序设置倒计时效果
效果微信小程序设置倒计时步骤 1.设置一个定时器,然后将时间设为一秒 2.在这个函数里将当前时间距终止的时间,的时间戳的差值减一 3.计算剩余的时间,还剩的时分秒等 4.将计算的时间保存到data中 ...
微信小程序设置swiper圆角在ios上失效解决
今天在给轮播图添加圆角的时候,发现在安卓机上是有圆角的,但是在苹果手机上圆角却失效了,后来翻阅了文档发现这是个bug.下面是两种解决方案:第一种:-webkit-backface-visibility ...
在uniapp/微信小程序设置scrollTop初始值
一.概述使用HTML5在浏览器设置scrollTop初始值初始值,由于可以通过dom树定位.操作元素,实现相对比较简单. 而在vue等框架中,由于对dom树的淡化,导致通过dom树设置scrollT ...

mpvue 微信小程序设置背景音乐

mpvue 微信小程序设置背景音乐相关推荐

最新文章

热门文章