H5混合开发IOS中遇到的坑
时间:2019-04-11
本文章向大家介绍H5混合开发IOS中遇到的坑,主要包括H5混合开发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 }
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- 【赵渝强老师】Docker的日志
- 超全递归技巧整理,这次一起拿下递归
- [译] React 测试驱动开发:从用户故事到产品
- 计算机基础之位运算 | 按位取反
- 关于php的ini文件相关操作函数浅析
- PHP中的输出缓冲控制
- SpringCloud微服务:基于Nacos组件,整合Dubbo框架
- [译] 使用 microbundle 打包 TypeScript 组件库
- 3分钟短文 | Laravel 获取模型查询生成的SQL语句
- 基于git的测试用例管理方案
- 【赵渝强老师】MongoDB管理用户的认证机制
- 使用Microsoft Teams Updater执行代码
- 腾讯云 Serverless 云函数实现 CKafka 数据转存到 ES
- 软硬件都开源!基于千兆以太网的温度传感应用
- 【赵渝强老师】使用Docker Compose进行服务编排