總結微信公眾平臺網頁開發中遇到的ios的相容問題

1. ios中音頻不自動播放；

原因：出於節省流量的初衷，ios系統禁止音視頻自動播放。

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

DEMO：

先引入微信的JS-SDK，

1 <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

然後在wx.ready中調用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. 微信升級到7.0版本以後，填寫表單信息彈出鍵盤會把頁面頂上去，鍵盤消失的時候頁面不自動下來；

解決方案：使用onblur方法在表單失去焦點的時候讓頁面滾動到最頂部。

DEMO：

1 <form class="form" action="" method="">
2             <div><label for="idNumber">身份證號</label><input type="text" name="idNumber" onblur="window.scrollTo(0, 0);" id="idNumber"></div>
3         </form>

3. 去除移動端點擊時的背景；

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

4. 去掉input框的預設樣式；

1 input {
2     background-color: transparent;/*背景變透明*/
3     filter: alpha(opacity=0); /*androd*/
4     appearance: none;  /*去除系統預設appearance的樣式,常用於IOS下移除原生樣式(下拉框去掉右側圖標等)*/
5     -moz-appearance: none;
6     -webkit-appearance: none;
7 }