时间:2021-05-20
以下是小编通过整理后得到的在H5混合开发的IOS项目中经常遇到的坑:
1. ios系统手机无法自动播放BGM
这个是苹果系统限制,默认不允许自动播放音频,往往需要点一下触发play()事件才能播放。
那么我们在页面onload后触发播放事件:
到这里一般都可以播放音乐了,如果还不行,很有可能是微信的限制。这时需要调用微信接口。
页面先引入:
然后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 = falserunning()$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}声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
为什么要学习Android与H5互调?微信,QQ空间等大量软件都内嵌了H5,不得不说是一种趋势。Android与H5互调可以让我们的实现混合开发,至于混合开发就
H5网站开发成本是多少,哪些因素会影响H5网站开发的价格?现在的H5网站开发商城H5网站开发公司很多,整个H5网站商城的竞争非常大。当前,企业开发H5网站的
混合开发是指在开发一款App产品的时候,为了提高效率、节省成本而利用原生与H5的开发技术的混合应用。混合开发是一种取长补短的开发模式,原生代码部分利用WebVi
一、需要实现的功能:用H5实现的App中需要在H5获取手机中的照片或者视频文件上传到服务器。二、分析实现方法:由于不懂前端开发,不知道H5中有inputfile
现在H5网站开发商场的H5网站开发公司是十分多的,整个H5网站商场竞争是十分大的。现在企业开发开发一个H5网站的需求是十分大的,这是H5网站开发商场公司多的原因