總結(jié)微信公眾平臺(tái)網(wǎng)頁(yè)開發(fā)中遇到的ios的兼容問題

番茄西紅柿發(fā)布于2019-04-23 11:45 / 3705人閱讀

摘要：解決方案使用微信的。先引入微信的，然后在中調(diào)用方法播放。配置信息即使不正確也能使用微信升級(jí)到版本以后，填寫表單信息彈出鍵盤會(huì)把頁(yè)面頂上去，鍵盤消失的時(shí)候頁(yè)面不自動(dòng)下來(lái)解決方案使用方法在表單失去焦點(diǎn)的時(shí)候讓頁(yè)面滾動(dòng)到最頂部。

1. ios中音頻不自動(dòng)播放；

原因：出于節(jié)省流量的初衷，ios系統(tǒng)禁止音視頻自動(dòng)播放。

解決方案：使用微信的JS-SDK。

DEMO：

先引入微信的JS-SDK，

然后在wx.ready中調(diào)用play方法播放。

 1 var audio = document.getElementById(bgmusic);
 2     autoPlayAudio();
 3     function autoPlayAudio() {
 4         wx.config({
 5             // 配置信息, 即使不正確也能使用 wx.ready
 6             debug: false,
 7             appId: ,
 8             timestamp: 1,
 9             nonceStr: ,
10             signature: ,
11             jsApiList: []
12         });
13         wx.ready(function() {
14             audio.play();
15         });
16     }

2. 微信升級(jí)到7.0版本以后，填寫表單信息彈出鍵盤會(huì)把頁(yè)面頂上去，鍵盤消失的時(shí)候頁(yè)面不自動(dòng)下來(lái)；

解決方案：使用onblur方法在表單失去焦點(diǎn)的時(shí)候讓頁(yè)面滾動(dòng)到最頂部。

DEMO：

1 
2             for="idNumber">身份證號(hào)onblur="window.scrollTo(0, 0);" id="idNumber">
3

3. 去除移動(dòng)端點(diǎn)擊時(shí)的背景；

1 *{
2     -webkit-tap-highlight-color: rgba(0,0,0,0);
3     -webkit-tap-highlight-color:transparent;
4 }

4. 去掉input框的默認(rèn)樣式；

1 input {
2     background-color: transparent;/*背景變透明*/
3     filter: alpha(opacity=0); /*androd*/
4     appearance: none;  /*去除系統(tǒng)默認(rèn)appearance的樣式,常用于IOS下移除原生樣式(下拉框去掉右側(cè)圖標(biāo)等)*/
5     -moz-appearance: none;
6     -webkit-appearance: none;
7 }