个人中心 | 微信开放社区

wx-open-audio 开发工具和ios均正常，安卓ready事件调用没有反应微信版本：8.0系列（7,8,10,15,16等）安卓版本：安卓10，安卓11等手机型号：华为，oppo，小米等安卓手机测试链接：http://test.kuailetingba.cn/?data=eyJvcGVuaWQiOiJvSzF6NDZzNlZBNFdiMm1MQmhZZnpkckFyLWlrIiwibW9kZWwiOiJhcnRpY2xlIn0=# 测试代码：<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta http-equiv=Content-Security-Policy content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover"> <meta name=apple-mobile-web-app-capable content=yes> <meta name=apple-mobile-web-app-status-bar-style content=default> <meta name=theme-color content=#ff9500> <meta name=format-detection content="telephone=no"> <meta name=msapplication-tap-highlight content=no> <title>狮子老爸</title> <script type=text/javascript src=http://res2.wx.qq.com/open/js/jweixin-1.6.0.js></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> </head> <body> <div id=app> <wx-open-audio id="audio" title="001 补天神石落仙山" style="position:absolute;left: 50%;top: 20px;margin-left: -50px;width:100px;height:100px;background-color:#1c1c1d;z-index:5002;" src="http://qn.kuailetingba.cn/2021/03/03/a21258ae-3af9-4f0d-9177-d036b5332213.mp3" cover="http://qn.kuailetingba.cn/2021/03/01/43571267-f81b-49ab-9bf7-5c3aef4556f3.jpg"> <script type="text/wxtag-template"> <div class="playBackground"></div> </script> <script slot="playing" type="text/wxtag-template"> <div class="pauseBackground"></div> </script> <script slot="style" type="text/wxtag-template"> <style> .playBackground { width: 60px; height: 64px; background-color: #ff9500; cursor: pointer; } .pauseBackground { width: 60px; height: 64px; background-color: #cccccc; cursor: pointer; } </style> </script> </wx-open-audio> </div> <script> // 初始化 var vConsole = new VConsole(); window.onload = () => { axios.post('http://test.kuailetingba.cn/liontest/wechat/signature', { url: window.location.href.split('#')[0], }) .then(function (response) { console.log('response：', response); let result = response.data ? response.data : {}; console.log('result：', result); let params = result.data || {}; console.log('params：', params); wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: params.appid || '', // 必填，公众号的唯一标识 timestamp: params.timestamp || 0, // 必填，生成签名的时间戳 nonceStr: params.noncestr || '', // 必填，生成签名的随机串 signature: params.signature || '',// 必填，签名 jsApiList: [ "chooseWXPay", "closeWindow", "chooseCard", "openCard", "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone", "updateAppMessageShareData", "updateTimelineShareData", ], // 必填，需要使用的JS接口列表 openTagList: [ "wx-open-audio", ], }); }) .catch(function (error) { console.log('error：', error); }); console.log('=========='); wx.ready(() => { const audio = document.getElementById('audio'); // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 console.log("ready================="); console.log("audio", audio); console.log(audio.readyState); audio.addEventListener('ready', (event) => { console.log('audio ready'); console.log('audio readyState', audio.readyState); console.log('event.readyState', event.readyState); }); audio.addEventListener('play', (event) => { console.log('audio play'); }); audio.addEventListener('pause', (event) => { console.log('audio pause'); }); audio.addEventListener('timeupdate', function (event) { console.log('audio timeupdate'); const state = event.detail; console.log(state.src); // 当前音频来源 console.log(state.title); // 当前音频标题 console.log(state.episode); // 当前专辑名称 console.log(state.singer); // 当前歌手名称 console.log(state.cover); // 当前专辑封面 console.log(state.playState); // 播放状态，'playing' | 'pause' | 'seeked' console.log(state.paused); // 是否暂停 console.log(state.buffered); // 已缓冲位置，单位秒 console.log(state.currentTime); // 当前播放位置，单位秒 }); audio.addEventListener('error', function (event) { console.log('audio error'); // 发生错误 const error = event.detail; console.log(error.errMsg); // 1. play:fail（调用play方法失败） // 2. pause:fail（调用pause方法失败） // 3. seek:fail（设置currentTime失败） // 4. ratechange:fail（设置playbackRate失败） }); }); wx.error((err) => { console.log('wx error=', err); }); // 微信版本不支持微信开放标签时的错误信息监听 document.addEventListener('WeixinOpenTagsError', (e) => { // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开发标签，JS-SDK其他功能不受影响 console.error('open tags error====', e.detail.errMsg); this.isWXOpenTagAudio = false; console.log('=======is wx open tag audio ===', this.isWXOpenTagAudio); }); }; </script> </body> </html>

2021-11-05

wx-open-audio 开发工具和ios均正常，但安卓ready事件调用为什么没有反应？

wx-open-audio 开发工具和ios均正常，安卓ready事件调用没有反应微信版本：8.0系列（7,8,10,15,16等）安卓版本：安卓10，安卓11等手机型号：华为，oppo，小米等安卓手机测试链接：http://test.kuailetingba.cn/?data=eyJvcGVuaWQiOiJvSzF6NDZzNlZBNFdiMm1MQmhZZnpkckFyLWlrIiwibW9kZWwiOiJhcnRpY2xlIn0=# 测试代码：<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta http-equiv=Content-Security-Policy content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover"> <meta name=apple-mobile-web-app-capable content=yes> <meta name=apple-mobile-web-app-status-bar-style content=default> <meta name=theme-color content=#ff9500> <meta name=format-detection content="telephone=no"> <meta name=msapplication-tap-highlight content=no> <title>狮子老爸</title> <script type=text/javascript src=http://res2.wx.qq.com/open/js/jweixin-1.6.0.js></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> </head> <body> <div id=app> <wx-open-audio id="audio" title="001 补天神石落仙山" style="position:absolute;left: 50%;top: 20px;margin-left: -50px;width:100px;height:100px;background-color:#1c1c1d;z-index:5002;" src="http://qn.kuailetingba.cn/2021/03/03/a21258ae-3af9-4f0d-9177-d036b5332213.mp3" cover="http://qn.kuailetingba.cn/2021/03/01/43571267-f81b-49ab-9bf7-5c3aef4556f3.jpg"> <script type="text/wxtag-template"> <div class="playBackground"></div> </script> <script slot="playing" type="text/wxtag-template"> <div class="pauseBackground"></div> </script> <script slot="style" type="text/wxtag-template"> <style> .playBackground { width: 60px; height: 64px; background-color: #ff9500; cursor: pointer; } .pauseBackground { width: 60px; height: 64px; background-color: #cccccc; cursor: pointer; } </style> </script> </wx-open-audio> </div> <script> // 初始化 var vConsole = new VConsole(); window.onload = () => { axios.post('http://test.kuailetingba.cn/liontest/wechat/signature', { url: window.location.href.split('#')[0], }) .then(function (response) { console.log('response：', response); let result = response.data ? response.data : {}; console.log('result：', result); let params = result.data || {}; console.log('params：', params); wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: params.appid || '', // 必填，公众号的唯一标识 timestamp: params.timestamp || 0, // 必填，生成签名的时间戳 nonceStr: params.noncestr || '', // 必填，生成签名的随机串 signature: params.signature || '',// 必填，签名 jsApiList: [ "chooseWXPay", "closeWindow", "chooseCard", "openCard", "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone", "updateAppMessageShareData", "updateTimelineShareData", ], // 必填，需要使用的JS接口列表 openTagList: [ "wx-open-audio", ], }); }) .catch(function (error) { console.log('error：', error); }); console.log('=========='); wx.ready(() => { const audio = document.getElementById('audio'); // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 console.log("ready================="); console.log("audio", audio); console.log(audio.readyState); audio.addEventListener('ready', (event) => { console.log('audio ready'); console.log('audio readyState', audio.readyState); console.log('event.readyState', event.readyState); }); audio.addEventListener('play', (event) => { console.log('audio play'); }); audio.addEventListener('pause', (event) => { console.log('audio pause'); }); audio.addEventListener('timeupdate', function (event) { console.log('audio timeupdate'); const state = event.detail; console.log(state.src); // 当前音频来源 console.log(state.title); // 当前音频标题 console.log(state.episode); // 当前专辑名称 console.log(state.singer); // 当前歌手名称 console.log(state.cover); // 当前专辑封面 console.log(state.playState); // 播放状态，'playing' | 'pause' | 'seeked' console.log(state.paused); // 是否暂停 console.log(state.buffered); // 已缓冲位置，单位秒 console.log(state.currentTime); // 当前播放位置，单位秒 }); audio.addEventListener('error', function (event) { console.log('audio error'); // 发生错误 const error = event.detail; console.log(error.errMsg); // 1. play:fail（调用play方法失败） // 2. pause:fail（调用pause方法失败） // 3. seek:fail（设置currentTime失败） // 4. ratechange:fail（设置playbackRate失败） }); }); wx.error((err) => { console.log('wx error=', err); }); // 微信版本不支持微信开放标签时的错误信息监听 document.addEventListener('WeixinOpenTagsError', (e) => { // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开发标签，JS-SDK其他功能不受影响 console.error('open tags error====', e.detail.errMsg); this.isWXOpenTagAudio = false; console.log('=======is wx open tag audio ===', this.isWXOpenTagAudio); }); }; </script> </body> </html>

2021-11-05

wx-open-audio 标签，安卓端监听不到ready事件，开发工具，ios均正常

wx-open-audio安卓端监听不到ready事件复现链接：http://test.kuailetingba.cn/?data=eyJvcGVuaWQiOiJvSzF6NDZzNlZBNFdiMm1MQmhZZnpkckFyLWlrIiwibW9kZWwiOiJhcnRpY2xlIn0=#微信客户端版本：8.0.系列（15，16）手机版本：安卓10，安卓11 测试用例页面： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta http-equiv=Content-Security-Policy content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover"> <meta name=apple-mobile-web-app-capable content=yes> <meta name=apple-mobile-web-app-status-bar-style content=default> <meta name=theme-color content=#ff9500> <meta name=format-detection content="telephone=no"> <meta name=msapplication-tap-highlight content=no> <title>狮子老爸</title> <script type=text/javascript src=http://res2.wx.qq.com/open/js/jweixin-1.6.0.js></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> </head> <body> <div id=app> <wx-open-audio id="audio" title="001 补天神石落仙山" style="position:absolute;left: 50%;top: 20px;margin-left: -50px;width:100px;height:100px;background-color:#1c1c1d;z-index:5002;" src="http://qn.kuailetingba.cn/2021/03/03/a21258ae-3af9-4f0d-9177-d036b5332213.mp3" cover="http://qn.kuailetingba.cn/2021/03/01/43571267-f81b-49ab-9bf7-5c3aef4556f3.jpg"> <script type="text/wxtag-template"> <div class="playBackground"></div> </script> <script slot="playing" type="text/wxtag-template"> <div class="pauseBackground"></div> </script> <script slot="style" type="text/wxtag-template"> <style> .playBackground { width: 60px; height: 64px; background-color: #ff9500; cursor: pointer; } .pauseBackground { width: 60px; height: 64px; background-color: #cccccc; cursor: pointer; } </style> </script> </wx-open-audio>     </div> <script> // 初始化 var vConsole = new VConsole(); window.onload = () => { axios.post('http://test.kuailetingba.cn/liontest/wechat/signature', { url: window.location.href.split('#')[0], }) .then(function (response) { console.log('response：', response); let result = response.data ? response.data : {}; console.log('result：', result); let params = result.data || {}; console.log('params：', params); wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: params.appid || '', // 必填，公众号的唯一标识 timestamp: params.timestamp || 0, // 必填，生成签名的时间戳 nonceStr: params.noncestr || '', // 必填，生成签名的随机串 signature: params.signature || '',// 必填，签名 jsApiList: [ "chooseWXPay", "closeWindow", "chooseCard", "openCard", "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone", "updateAppMessageShareData", "updateTimelineShareData", ], // 必填，需要使用的JS接口列表 openTagList: [ "wx-open-audio", ], }); }) .catch(function (error) { console.log('error：', error); }); console.log('=========='); wx.ready(() => { const audio = document.getElementById('audio'); // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 console.log("ready================="); console.log("audio", audio); console.log(audio.readyState); audio.addEventListener('ready', (event) => { console.log('audio ready'); console.log('audio readyState', audio.readyState); console.log('event.readyState', event.readyState); }); audio.addEventListener('play', (event) => { console.log('audio play'); }); audio.addEventListener('pause', (event) => { console.log('audio pause'); }); audio.addEventListener('timeupdate', function (event) { console.log('audio timeupdate'); const state = event.detail; console.log(state.src); // 当前音频来源 console.log(state.title); // 当前音频标题 console.log(state.episode); // 当前专辑名称 console.log(state.singer); // 当前歌手名称 console.log(state.cover); // 当前专辑封面 console.log(state.playState); // 播放状态，'playing' | 'pause' | 'seeked' console.log(state.paused); // 是否暂停 console.log(state.buffered); // 已缓冲位置，单位秒 console.log(state.currentTime); // 当前播放位置，单位秒 }); audio.addEventListener('error', function (event) { console.log('audio error'); // 发生错误 const error = event.detail; console.log(error.errMsg); // 1. play:fail（调用play方法失败） // 2. pause:fail（调用pause方法失败） // 3. seek:fail（设置currentTime失败） // 4. ratechange:fail（设置playbackRate失败） }); }); wx.error((err) => { console.log('wx error=', err); }); // 微信版本不支持微信开放标签时的错误信息监听 document.addEventListener('WeixinOpenTagsError', (e) => { // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开发标签，JS-SDK其他功能不受影响 console.error('open tags error====', e.detail.errMsg); this.isWXOpenTagAudio = false; console.log('=======is wx open tag audio ===', this.isWXOpenTagAudio); }); // const audio1 = document.getElementById('audioTag11'); // if (audio1 != null) { // audio1.addEventListener('ready', () => { // console.log('audio1 ready'); // }); // audio1.addEventListener('play', () => { // console.log('audio1 play'); // }); // audio1.addEventListener('pause', () => { // console.log('audio1 pause'); // }); // } }; </script> </body> </html>

2021-11-05

微信版本8.0.7 部分安卓机型，服务号音频，点击浮窗后，音频播放会被中断

在服务号，音频播放页面，点击右上角，点击浮窗，返回到微信后，音频接着停止播放了，在点击浮窗，点击页面返回系统时，跳转到了系统首页，目前，oppo，vivo，小米，华为手机都出现了问题，投诉接到爆！！

2021-10-14

GitHub账号

选择需要上架的开放服务

案例类型