前端移動端問題小結

移動端項目小結

1. 調用微信的接口分享給好友，分享到朋友圈
2. 移動端微信中對於 autoplay 無效時，自動播放MP3音頻，
3. 移動端頁面適配
4. audio 在不一樣的瀏覽器內核有不一樣的支持狀況

1、微信分享

1. 首先引入微信的腳本庫

   <script type="text/JavaScript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js">    </script>

2. 分享到朋友圈，分享給好友

wx.config({
                debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
                appId: '', // 必填，公衆號的惟一標識
                timestamp: '', // 必填，生成簽名的時間戳
                nonceStr: '', // 必填，生成簽名的隨機串
                signature: '', // 必填，簽名
                jsApiList: '' // 必填，須要使用的JS接口列表
            })
        
            wx.ready(() => {
                // 分享到朋友圈
                wx.onMenuShareTimeline({
                    title: 'XXX', // 分享標題
                    link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                    imgUrl: '', // 分享圖標,
                    success: () => {
                        // 分享成功的回調
                    }
                })
                // 分享給好友
                wx.onMenuShareAppMessage({
                    title: '', // 分享標題
                    desc: '', // 分享描述
                    link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
                    imgUrl: '', // 分享圖標
                    success: () => {
                        // 分享成功的回調
                    },
                    cancel: () => {
                        // 用戶取消分享後執行的回調函數
                    }
                })
            })

2、移動端自動播放音樂

iOS 和部分 Android 限制了自動播放音頻視頻等，須要用戶有點擊的動做後才能夠播放。這樣的緣由在於不少用戶流量須要付費，而限制了自動播放能夠避免用戶在不知情的狀況下產生高額的流量費用。

var audio = document.getElementById('music');
    document.addEventListener("WeixinJSBridgeReady", () => {
       audio.play();
    }, false);

3、移動端頁面適配

移動端適配原理大同小異，大部分是經過控制根元素的font-size值實現設備寬度的適配（一般是寬度）

網易移動端適配方案

一、拿到設計稿除以100，獲得寬度rem值

二、經過給html的style設置font-size

document.getElementsByTagName('html')[0].style.fontSize = Math.min(document.getElementsByTagName('html')[0].clientWidth, 750) / 750 * 100 + 'px';

三、設計稿px/100便可換算爲rem

優：經過動態根font-size來作適配，基本無兼容性問題，適配較爲精準，換算簡便。

劣：無viewport縮放，且針對iPhone的Retina屏沒有作適配，致使對一些手機的適配不是很到位。

手淘移動端適配方案

一、拿到設計稿除以10，獲得font-size基準值

二、引入flexible

三、不要設置meta的viewport縮放值

四、設計稿px/ font-size基準值，便可換算爲rem

優：經過動態根font-size、viewpor、dpr來作適配，無兼容性問題，適配精準。

劣：須要根據設計稿進行基準值換算，在不使用sublime text編輯器插件開發時，單位計算複雜。

4、音頻格式

瀏覽器	MP3	WAV	OGG
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

參考文獻

https://www.cnblogs.com/liang...
https://github.com/chesscai/f...
http://www.w3cplus.com/mobile...