脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → IOS中遇到的坑

H5混合开发IOS中遇到的坑

 更新时间：2017年12月13日 10:02:11   作者：zhangzhongjie  
本篇文章主要给大家讲述了在用H5混合开发APP时，IOS项目中遇到的坑以及解决办法，需要的朋友参考一下吧。

以下是小编通过整理后得到的在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
}

 

相关文章

  • Objective-C实现无限循环轮播器

    Objective-C实现无限循环轮播器

    这篇文章主要介绍了Objective-C实现无限循环轮播器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • iOS自定义UIDatepicker日期选择器视图分享

    iOS自定义UIDatepicker日期选择器视图分享

    下面小编就为大家分享一篇iOS自定义UIDatepicker日期选择器视图分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • iOS 懒加载的使用实例代码

    iOS 懒加载的使用实例代码

    本篇文章主要介绍了iOS 懒加载的使用实例代码，详细的介绍了什么是懒加载和优点，及其实例。有兴趣的可以了解一下
    2017-05-05
  • iOS如何封装带复制功能的UILabel示例代码

    iOS如何封装带复制功能的UILabel示例代码

    如果是在IOS的应用方面，很多时候我们需要封装UILabel，下面这篇文章主要给大家介绍了关于iOS如何封装带复制功能的UILabel的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
    2018-08-08
  • iOS点击推送消息跳到应用指定页面方法

    iOS点击推送消息跳到应用指定页面方法

    现在的推送用的越来越频繁，几乎每个应用都开始用到了。这篇文章主要介绍了iOS点击推送消息跳到应用指定页面方法，有需要的可以了解一下。
    2016-11-11
  • iOS 修改alertViewController弹框的字体颜色及字体的方法

    iOS 修改alertViewController弹框的字体颜色及字体的方法

    下面小编就为大家分享一篇iOS 修改alertViewController弹框的字体颜色及字体的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • iOS通过http post上传图片

    iOS通过http post上传图片

    这篇文章主要介绍了iOS通过http post上传图片的相关资料,需要的朋友可以参考下
    2016-03-03
  • IOS开发之手势响应事件优先级的实例详解

    IOS开发之手势响应事件优先级的实例详解

    这篇文章主要介绍了IOS开发之手势响应事件优先级的实例详解的相关资料，希望通过本文大家能够掌握手势响应优先级的使用方法，需要的朋友可以参考下
    2017-09-09
  • iOS如何保持程序在后台长时间运行

    iOS如何保持程序在后台长时间运行

    这篇文章主要为大家详细介绍了iOS如何保持程序在后台长时间运行,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • iOS中Navbar设置渐变色效果的方法示例

    iOS中Navbar设置渐变色效果的方法示例

    这篇文章主要给大家介绍了iOS中Navbar设置渐变色效果的方法，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06

最新评论