iphone微信搖一搖失效問題解決

從ios12.2（具體版本可能有些許出入）開始，ios限制http地址的陀螺儀事件，必須https才能夠，咱們的站點必須是https才能正常生效，因而乎一大堆程序員吭哧吭哧的填好了坑。

固然雖然咱們天天如履薄冰，戰戰兢兢，並不能改變線上某功能忽然bug的現象。

因而乎忽然有一天用戶反饋，iphone xr的微信做品搖一搖不生效，在確認https無誤後，便開始痛苦的聯機調試，發現監聽事件devicemotion未生效，從而查閱資料顯示最新版系統陀螺儀功能增長了限制，必須用戶手動受權才能正常，拉起受權的事件爲

DeviceMotionEvent.requestPermission()
    .then( response => {
        if ( response == "granted" ) {
            // 贊成
        } else {
            // 拒絕
        }
    }).catch(() => {
        // 通常爲非用戶主動受權
    })

這裏有幾點須要注意：

1. 整個app生命週期受權僅會被拉起一次，以後再次調用也不回拉起，會沿用以前的受權結果，可經過關閉微信來從新發起受權。
2. 若是爲第一次受權，必須經過用戶交互後方可拉起受權。

所以根據上述狀況，咱們的流程圖大概以下：

function iosCheck() {
    return new Promise((resolve, reject) => {
        if (typeof( DeviceMotionEvent ) !== "undefined" && typeof( DeviceMotionEvent.requestPermission ) === "function") {
            getPermission().then(() => {
                resolve();
            }).catch((e) => {
                // 用戶拒絕
                if (e.type === 1) {
                    // 用戶上次狀態爲拒絕，提示彈窗
                } else if (e.type === 2) { // 用戶首次進入，獲取權限失敗，需手動開啓，彈窗引導
                    // bind event
                    $(modal).on('touchstart', () => {
                            getPermission().then(() => {
                                resolve();
                            }).catch(() => {
                                // 用戶拒絕受權，提示
                            });
                    })
                }
            });
        } else {
            resolve();
        }
    })
}
function getPermission() {
    return new Promise((resolve, reject) => {
        DeviceMotionEvent.requestPermission()
            .then( response => {
                if ( response == "granted" ) {
                    resolve();
                } else {
                    reject({type: 1});
                }
            }).catch(() => {
                reject({type: 2});
            })
    })

}
iosCheck().then(() => {
    window.addEventListener('devicemotion', deviceMotionHandler, false);
})

固然若是更謹慎一些的話，咱們能夠在iosCheck方法中增長當前版本的限制。