移动端H5制作安卓和IOS的坑 持续更新...
移动端H5制作安卓和IOS的坑 持续更新...
前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑。踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来,持续收集更新,于己利人,抛砖引玉。
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
}
4.安卓微信打开页面时动画静止
H5页面动画很重要。当我布好了动画样式,用安卓微信打开发现页面静止不动,动画没有生效。新进入页面没效果,刷新一下就恢复。
最直接了当的解决方案:把动画提取出来,例如提到一个running样式中,然后在页面load完了再把这个 动画值赋上去。
window.onload = function() {
$('.index').addClass('running')
};
移动端H5制作安卓和IOS的坑 持续更新...的更多相关文章
- 前端H5与安卓和ios之间通信
在一些app场景中,经常看到app里面嵌套H5页面, 安卓和ios提供一个空壳子,方法两者互相调用.上一周就是写H5页面让安卓和ios调用使用,中间传参,接受参数.通过 window.wx 对象调用一 ...
- app内嵌vue h5,安卓和ios拦截H5点击事件
安卓和ios拦截h5点击事件,这个函数事件必须是暴漏在window下的 安卓和ios拦截普通h5函数: <div onclick = "show(),window.android.sh ...
- H5与安卓、IOS的交互,判断微信、移动设备、安卓、ios
一.通过用户代理可以判断网页当前所在的环境 var browser={ versions:function(){ var u = navigator.userAgent, app = navigato ...
- h5与安卓、ios交互
1.安卓交互 h5调用安卓方法 window.webview.xxx() 安卓调用h5方法, 方法需要在全局注册 window['showUnreadMsg'] = () => { this.$ ...
- <精华篇>:iOS视频大全-持续更新
注意:新浪微博分享的资料和简书分享的资料,略有不同! 小码哥swift3.0版 斗鱼项目视频:点击下载 iOS开发25个项目实战:点击下载 2016PHP全套下载:点击下载 黑马刀哥iOS视频精选 ...
- 移动端web开发安卓和ios客户端在时间转换上的差异性问题
作为一名移动前端开发的人员,平时遇到的兼容性问题不在少数.那么,今天就来说一下最近遇到的一个小坑(关于Android和ios在时间转换上的差异性问题)话不多说,直接上重点. 最近接到了一个需求,很简单 ...
- 爆炸!iOS资源大礼包(持续更新...)
今天为大家整理了一些关于iOS学习的干货,献给正在奋斗的你们,首先声明一下,在整理的过程中参考了大量的博客和文章,知识的分享终究会增值,在此表示感谢,希望这篇文章给大家带来帮助. 基础部分: C语言教 ...
- iOS开发资源(持续更新)
vm10虚拟机安装Mac OS X10.10教程 马上着手开发 iOS 应用程序 (Start Developing iOS Apps Today) Xcode使用教程详细讲解 (上) Xcode使用 ...
- iOS 常用三方(持续更新)
iOS 常用三方 1.ZWMSegmentController 分页控制器 https://github.com/weiming4219/ZWMSegmentController
随机推荐
- 如何内网搭建NuGet服务器
NuGet 是.NET程序员熟知的给.NET项目自动配置安装library的工具,它可以直接安装开源社区中的各个公用组件,可以说是非常方便.不过,有些时候,公司内部的公用的基础类库,各个项目都有引用, ...
- webpack安装教程及实例
在控制台输入: npm install webpack -g 这是全局的安装,如果需要局部安装,在控制台cd 打开到指定目录,输入: npm install webpack --save-dev 即可 ...
- mysql服务处理流程
先把错误日志定位 就是找的错误日志 然后必要的时候 重新启动服务器 排除其他的干扰 把错误日志 挪到旧文件 清空错误日志 然后试着启动 看干净的错误日志 然后 问题就解决了
- C++ primer第五版随笔--2015年1月6日
记录自己看这本书时的一些内容. 一.引用(reference) 引用为对象起了另外一个名字.例如: int ival=1024: int &relVal1=ival;//对,注意尽量不要用这方 ...
- two.js之实现动画效果
一.什么是two.js? Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁 ...
- Problem H: STL——括号匹配
Description 给出一堆括号,看其是否匹配,例如 ().()().(()) 这样的括号就匹配, )(.)()) 而这样的括号就不匹配 Input 每一行代表一组测试样例,每组测试样 ...
- How to set up Dynamics CRM 2011 development environment
Recently I have been starting to learn Microsoft Dynamics CRM 2011 about implement plugin and workfl ...
- no suitable driver found for jdbc:mysql//localhost:3306/..
出现这样的情况,一般有四种原因(网上查的): 一:连接URL格式出现了问题(Connection conn=DriverManager.getConnection("jdbc:mysql ...
- c#控件攻略宝典之ListBox控件
ListBox控件的使用: 1)控件属性 Items SelectedItems SelectioModes 2)数据绑定 DataSoure DisplayMember ValueMenber 3) ...
- C#中消息的工作流程
C#中的消息被Application类从应用程序消息队列中取出,然后分发到消息对应的窗体,窗体对象的第一个响应函数是对象中的protected override void WndProc(ref Sy ...