欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

H5混合開發(fā)IOS中遇到的坑

 更新時間:2017年12月13日 10:02:11   作者:zhangzhongjie  
本篇文章主要給大家講述了在用H5混合開發(fā)APP時,IOS項目中遇到的坑以及解決辦法,需要的朋友參考一下吧。

以下是小編通過整理后得到的在H5混合開發(fā)的IOS項目中經(jīng)常遇到的坑:

1. ios系統(tǒng)手機無法自動播放BGM

這個是蘋果系統(tǒng)限制,默認(rèn)不允許自動播放音頻,往往需要點一下觸發(fā)play()事件才能播放。
那么我們在頁面onload后觸發(fā)播放事件:

document.getElementById('music').play();

 

到這里一般都可以播放音樂了,如果還不行,很有可能是微信的限制。這時需要調(diào)用微信接口。
頁面先引入:

<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);

 

這樣利用微信接口調(diào)用play()事件,可以完美解決ios音頻無法autoplay的問題。

2. ios系統(tǒng)搖一搖播放音效事件無效

在實現(xiàn)搖晃(引用了封裝好的shake.js)手機觸發(fā)某一音效這個需求時,發(fā)現(xiàn)在微信中,音效沒有被觸發(fā)。后面找到原因:在ios里并沒有把自定義搖晃事件shake當(dāng)成交互動作。而要播放音效,需要用戶有交互動作。沒有交互,音效就沒被加載,那么我們先加載音效,結(jié)合上面的微信接口:

document.addEventListener("WeixinJSBridgeReady", function () {
shakeMusic.load();
}, false);

 

load()過之后,再調(diào)用play()即可聽到音效。

3. ios系統(tǒng)不支持動畫暫停樣式(animation-play-state)

H5頁面一般都會有BGM,也會提供一個旋轉(zhuǎn)的音樂圖標(biāo)供用戶開啟關(guān)閉音樂。我們希望當(dāng)用戶點擊音樂按鈕時圖標(biāo)停止旋轉(zhuǎn),再點圖標(biāo)順著之前停止的位置繼續(xù)跑動畫。animation-play-state是最簡便的方式,然而,ios不支持。

目前的解決方案是:音樂圖標(biāo)負(fù)責(zé)跑動畫,圖標(biāo)父級元素負(fù)責(zé)記錄停止時的轉(zhuǎn)動值。

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') //獲取當(dāng)前元素的動畫改變,transform的值
var siteWp = $('.music').css('transform')
$('.music').css('transform', siteWp === 'none' ? siteImg : siteImg.concat('', siteWp))
//由于父元素沒有動畫,所以每次賦值的時候,需要將上次父元素的狀態(tài)加上
$img.removeClass('musicRun')
isPlaying = false
}

 

相關(guān)文章

  • Objective-C實現(xiàn)無限循環(huán)輪播器

    Objective-C實現(xiàn)無限循環(huán)輪播器

    這篇文章主要介紹了Objective-C實現(xiàn)無限循環(huán)輪播器的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-05-05
  • iOS自定義UIDatepicker日期選擇器視圖分享

    iOS自定義UIDatepicker日期選擇器視圖分享

    下面小編就為大家分享一篇iOS自定義UIDatepicker日期選擇器視圖分享,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • iOS 懶加載的使用實例代碼

    iOS 懶加載的使用實例代碼

    本篇文章主要介紹了iOS 懶加載的使用實例代碼,詳細(xì)的介紹了什么是懶加載和優(yōu)點,及其實例。有興趣的可以了解一下
    2017-05-05
  • iOS如何封裝帶復(fù)制功能的UILabel示例代碼

    iOS如何封裝帶復(fù)制功能的UILabel示例代碼

    如果是在IOS的應(yīng)用方面,很多時候我們需要封裝UILabel,下面這篇文章主要給大家介紹了關(guān)于iOS如何封裝帶復(fù)制功能的UILabel的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2018-08-08
  • iOS點擊推送消息跳到應(yīng)用指定頁面方法

    iOS點擊推送消息跳到應(yīng)用指定頁面方法

    現(xiàn)在的推送用的越來越頻繁,幾乎每個應(yīng)用都開始用到了。這篇文章主要介紹了iOS點擊推送消息跳到應(yīng)用指定頁面方法,有需要的可以了解一下。
    2016-11-11
  • iOS 修改alertViewController彈框的字體顏色及字體的方法

    iOS 修改alertViewController彈框的字體顏色及字體的方法

    下面小編就為大家分享一篇iOS 修改alertViewController彈框的字體顏色及字體的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • iOS通過http post上傳圖片

    iOS通過http post上傳圖片

    這篇文章主要介紹了iOS通過http post上傳圖片的相關(guān)資料,需要的朋友可以參考下
    2016-03-03
  • IOS開發(fā)之手勢響應(yīng)事件優(yōu)先級的實例詳解

    IOS開發(fā)之手勢響應(yīng)事件優(yōu)先級的實例詳解

    這篇文章主要介紹了IOS開發(fā)之手勢響應(yīng)事件優(yōu)先級的實例詳解的相關(guān)資料,希望通過本文大家能夠掌握手勢響應(yīng)優(yōu)先級的使用方法,需要的朋友可以參考下
    2017-09-09
  • iOS如何保持程序在后臺長時間運行

    iOS如何保持程序在后臺長時間運行

    這篇文章主要為大家詳細(xì)介紹了iOS如何保持程序在后臺長時間運行,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • iOS中Navbar設(shè)置漸變色效果的方法示例

    iOS中Navbar設(shè)置漸變色效果的方法示例

    這篇文章主要給大家介紹了iOS中Navbar設(shè)置漸變色效果的方法,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。
    2017-06-06

最新評論