脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → 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
}

 

相关文章

  • 仿iOS图标抖动

    仿iOS图标抖动

    最近闲来无聊，研究了一下IPhone桌面图标的抖动，网上有一个类似的事例，但是我看来效果实在不佳，自己也来写一个玩玩，有需要的小伙伴可以参考下。
    2015-05-05
  • iOS如何封装带复制功能的UILabel示例代码

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

    如果是在IOS的应用方面，很多时候我们需要封装UILabel，下面这篇文章主要给大家介绍了关于iOS如何封装带复制功能的UILabel的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
    2018-08-08
  • IOS 开发之ObjectiveC的变量类型的字符代表

    IOS 开发之ObjectiveC的变量类型的字符代表

    这篇文章主要介绍了IOS 开发之ObjectiveC的变量类型的字符代表的相关资料,这里举例说明如何使用Objective的变量类型的字符，帮助大家学习理解这部分内容，需要的朋友可以参考下
    2017-08-08
  • IOS实现聊天界面底部菜单栏效果

    IOS实现聊天界面底部菜单栏效果

    本文给大家分享的是放boss直聘当中的聊天信息界面，主要思路是约束动画，实现代码比较简单，下面小编通过本文给大家分享IOS实现聊天界面底部菜单栏效果，需要的的朋友参考下吧
    2017-09-09
  • iOS11和iPhoneX适配的一些坑

    iOS11和iPhoneX适配的一些坑

    前阵子项目开发忙成狗，就一直没做iOS11的适配，直到XcodeGM版发布后，我胸有成竹的在iPhoneX上跑起项目，整个人都凉透了...下面总结一下我遇到的坑，感兴趣的朋友一起看看吧
    2017-09-09
  • IOS 单击手势的添加实现代码

    IOS 单击手势的添加实现代码

    这篇文章主要介绍了IOS 单击手势的添加实现代码的相关资料,需要的朋友可以参考下
    2017-05-05
  • Flutter CustomPaint绘制widget使用示例

    Flutter CustomPaint绘制widget使用示例

    这篇文章主要为大家介绍了Flutter CustomPaint绘制widget使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 一篇文章搞定iOS的Cookie存取

    一篇文章搞定iOS的Cookie存取

    Cookie中文名称叫做“小型文本文件”，指某些网站为了辨别用户身份而存储在用户本地终端上的数据（通常经过加密），下面这篇文章主要给大家介绍了关于iOS的Cookie存取的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-12-12
  • iOS 适配iPhone X的方法

    iOS 适配iPhone X的方法

    下面小编就为大家分享一篇iOS 适配iPhone X的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • IOS框架Spring常用的动画效果

    IOS框架Spring常用的动画效果

    本文给大家介绍的是在IOS开发中常用的动画效果以及自定义转场动画特效的代码，非常的简单实用，有需要的小伙伴可以参考下
    2016-03-03

最新评论