欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

H5混合开发IOS中遇到的坑

程序员文章站 2023-12-19 21:45:22
以下是小编通过整理后得到的在h5混合开发的ios项目中经常遇到的坑: 1. ios系统手机无法自动播放bgm 这个是苹果系统限制,默认不允许自动播放音频,往往需要点一下...

以下是小编通过整理后得到的在h5混合开发的ios项目中经常遇到的坑:

1. ios系统手机无法自动播放bgm

这个是苹果系统限制,默认不允许自动播放音频,往往需要点一下触发play()事件才能播放。
那么我们在页面onload后触发播放事件:

document.getelementbyid('music').play();

 

到这里一般都可以播放音乐了,如果还不行,很有可能是微信的限制。这时需要调用微信接口。
页面先引入:

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

 

然后js写入微信事件:

document.addeventlistener("weixinjsbridgeready", function() {
document.getelementbyid('music').play();
}, false);

 

这样利用微信接口调用play()事件,可以完美解决ios音频无法autoplay的问题。

2. ios系统摇一摇播放音效事件无效

在实现摇晃(引用了封装好的shake.js)手机触发某一音效这个需求时,发现在微信中,音效没有被触发。后面找到原因:在ios里并没有把自定义摇晃事件shake当成交互动作。而要播放音效,需要用户有交互动作。没有交互,音效就没被加载,那么我们先加载音效,结合上面的微信接口:

document.addeventlistener("weixinjsbridgeready", function () {
shakemusic.load();
}, false);

 

load()过之后,再调用play()即可听到音效。

3. ios系统不支持动画暂停样式(animation-play-state)

h5页面一般都会有bgm,也会提供一个旋转的音乐图标供用户开启关闭音乐。我们希望当用户点击音乐按钮时图标停止旋转,再点图标顺着之前停止的位置继续跑动画。animation-play-state是最简便的方式,然而,ios不支持。

目前的解决方案是:音乐图标负责跑动画,图标父级元素负责记录停止时的转动值。

html

<div class="music">
<img class="musicimg" src="/images/music.png">
</div>

 

sass

.music {
position: absolute;
width: rem(64px);
height: rem(64px);
top: rem(66px);
left: rem(15px);
z-index: 1000;
img {
width: 100%;
}
}
.musicrun {
-webkit-animation: music 2.5s infinite linear 0.5s;
animation: music 2.5s infinite linear 0.5s;
}
@-webkit-keyframes music {
0% {}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes music {
0% {}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

 

js

var $img = $('.musicimg')
var music = document.getelementbyid('music');
var isplaying = false
running()
$img.on('click', function() {
!isplaying ? running() : paused()
})
function running() {
music.play();
$img.addclass('musicrun')
isplaying = true
}
function paused() {
music.pause();
var siteimg = $img.css('transform') //获取当前元素的动画改变,transform的值
var sitewp = $('.music').css('transform')
$('.music').css('transform', sitewp === 'none' ? siteimg : siteimg.concat('', sitewp))
//由于父元素没有动画,所以每次赋值的时候,需要将上次父元素的状态加上
$img.removeclass('musicrun')
isplaying = false
}

 

上一篇:

下一篇: