1年。
微信jssdk签名有效期是1年,用户在微信申请jssdk签名后可以有1年的有效期,在有效期内,该签名都是会显示且有效的。
微信支付JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信支付JS-SDK,网页开发者可借助微信高效地使用微信支付功能,为微信用户提供更优质的网页体验。
我的html结构是这样的
class="app-voice-you" voiceSrc="xxmp3">
class="app-voice-headimg" src="xxpng" />
style="width: 60%;" class="app-voice-state-bg">
class="app-voice-state app-voice-pause">
class="app-voice-time app-voice-unread">
1'6"
id="audio_my" src="">
Your browser does not support the audio tag
核心功能就是语音播放,主要包括了以下几个功能点:
红点表明未听语音,语音听过后,红点会消失;
将“未读”状态的样式独立出来,“已读”的时候,把样式删除就行。结合本地存储处理就搞定了。
//this是点击的语音的document
var app_voice_time = thisgetElementsByClassName("app-voice-time")[0];
if(app_voice_timeclassNameindexOf("app-voice-unread") != -1){
//存在红点时,把红点样式删除
app_voice_timeclassName = app_voice_timeclassNamereplace("app-voice-unread","");
}
第一次听语音,会自动播放下一段语音;
这里主要是使用HTML5的audio控件的“语音播放完”事件
语音播放完,找到下一个语音,播放下一个语音
//语音播放完事件(PAGEaudio是audio控件的document)
PAGEaudioaddEventListener('ended', function () {
//循环获取下一个节点
PAGEpreVoice = PAGEcurrentVoice;
var currentVoice = PAGEcurrentVoice;
while(true){
currentVoice = currentVoicenextElementSibling;//下一个兄弟节点
//已经到达最底部
if(!currentVoice){
PAGEpreVoicegetElementsByClassName("app-voice-state")[0]className = "app-voice-state app-voice-pause";
return false;
}
var voiceSrc = currentVoicegetAttribute("voiceSrc");
if(voiceSrc && voiceSrc != ""){
break;
}
}
if(!PAGEautoNextVoice){
PAGEpreVoicegetElementsByClassName("app-voice-state")[0]className = "app-voice-state app-voice-pause";
return false;
}
PAGEcurrentVoice = currentVoice;
//获取得到下一个语音节点,播放
PAGEaudiosrc = voiceSrc;
PAGEaudioplay();
PAGEEvent_PlayVoice();
}, false);
每段语音可以暂停、继续播放、重新播放;
这个比较简单,但是也是比较多逻辑。需要变换样式告诉用户,怎样是继续播放/重新播放。
播放中的语音有动画,不是播放中的语音则会停止动画。
这里主要是CSS3动画的应用
app-voice-pause,app-voice-play{
height: 18px;
background-repeat: no-repeat;
background-image: url(/img/voicepng);
background-size: 18px auto;
opacity: 05;
}
app-voice-you app-voice-pause{
/从未播放/
background-position: 0px -39px;
}
app-voice-you app-voice-play{
/播放中(不需要过渡动画)/
background-position: 0px -39px;
-webkit-animation: voiceplay 1s infinite step-start;
-moz-animation: voiceplay 1s infinite step-start;
-o-animation: voiceplay 1s infinite step-start;
animation: voiceplay 1s infinite step-start;
}
@-webkit-keyframes voiceplay {
0%,
100% {
background-position: 0px -39px;
}
33333333% {
background-position: 0px -0px;
}
66666666% {
background-position: 0px -197px;
}
}