uni-app H5解决IOS音频不能自动播放的问题

使用uniapp提供的api，在IOS的微信客户端中audio不能播放，网上有不同的说法，本人首次使用uniapp，摸索了几个小时，终于搞明白通过微信的config接口和ready接口配置才生效

先看uniapp的uni.createInnerAudioContext() 接口示例

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
innerAudioContext.onPlay(() => {
  console.log('开始播放');
});
innerAudioContext.onError((res) => {
  console.log(res.errMsg);
  console.log(res.errCode);
});

这样在pc和安卓微信客户端是可以自动播放的，IOS就不行了。

所以得通过集成微信JS-SDK验证来解决

通过npm安装方式

npm install jweixin-module --save

然后再引用jweixin-module，这个看自己需求，可以再main.js上定义或者再单独页面上，我本次是直接再首页引用

<script>
	var jweixin = require('jweixin-module');
	export default {
		components: {},
		data() {
			return {

			}
		},
		onLoad: function (option) {

		},

		},
		mounted() {
	
		},
		methods: {
			
		}
	}
</script>

接下来直接上整块代码

<script>
	var jweixin = require('jweixin-module');
	export default {
		components: {},
		data() {
			return {}
		},
		onLoad: function (option) { 
			// this.creatAudio();
		},
		created(){

		},
		mounted() {
			this.creatAudio();
		},
		methods: {
			creatAudio(){
				const innerAudioContext = uni.createInnerAudioContext();
                innerAudioContext.autoplay = true;
                innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
                innerAudioContext.onPlay(() => {
                  console.log('开始播放');
                });
                innerAudioContext.onError((res) => {
                  console.log(res);
                });
				
				jweixin.config({});// 不做任何签名验证都可以
				jweixin.ready(function(){
					WeixinJSBridge.invoke('getNetworkType', {}, function(e){  
						innerAudioContext.play();
					})
				})
			},
	
		}
	}
</script>

首次实现，亲测有效，希望能帮到需要的人，本人并非搞前端的，只是自己遇到需要做个H5背景音频自动循环播放的功能，有错误请指正！有用处麻烦点个赞。。。