微信h5页面开发遇到那些坑

最新推荐文章于 2025-12-02 08:32:08 发布

原创最新推荐文章于 2025-12-02 08:32:08 发布 · 6.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #android #ios #h5

div+css 专栏收录该内容

89 篇文章

订阅专栏

本文探讨了iOS设备上日期格式的独特性，并提供了使软键盘不顶起页面布局的方法。此外，还介绍了如何在iOS中移除系统alert显示网址的问题及实现音频自动播放的有效方案。

一、首先是ios对时间date()的支持不一样：

var date =new Date("2016-05-31 00:00:00");

这种写法在安卓和pc上都不正常的，唯独在ios手机上会显示Nan，查阅一些资料，经过一番调试发现：

ios上只支持：

var date =new Date("2016/05/31");

这种格式，调试发现 2016/05/31 等同 2016-05-31 00:00:00 ，也就是说ios默认就是从0开始计算的，我们不需要设置后面的时分秒为 00:00:00

二、安卓手机端软键盘弹出顶起页面布局：

BODY被顶起的解决办法：

$('body').height($('body')[0].clientHeight);

三、调用系统自带alert的时候会有网址显示：

去掉网址解决办法：

window.alert = function(name){
		var iframe = document.createElement("IFRAME");
		iframe.style.display="none";
		iframe.setAttribute("src", 'data:text/plain,');
		document.documentElement.appendChild(iframe);
		window.frames[0].window.alert(name);
		iframe.parentNode.removeChild(iframe);
	}

四、音乐视频video与audio不能自动播放：

<audio loop id="audio" src="music/music.mp3" autoplay preload="auto"></audio>

这行代码在pc与安卓手机浏览器上都是正常的，唯独在ios上不能自动播放。

解决方案一：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>

function autoPlayAudio1() {
      wx.config({
         // 配置信息, 即使不正确也能使用 wx.ready
         debug: false,
         appId: '',
         timestamp: 1,
         nonceStr: '',
         signature: '',
         jsApiList: []
      });
      wx.ready(function() {
         document.getElementById('audio').play();
      });
   }

</script>

解决方案二：

document.addEventListener('WeixinJSBridgeReady', function() {
   audio.play();
   }, false);
}

Safari浏览器自动播放

document.addEventListener('touchstart', function(){
   audio.play();
}, false);