天天看點

微信小程式搖一搖

方法定義: 

let shakeInfo = {
    openFlag: false,// 是否開啟搖一搖,*****注意:如果是小程式全局監聽搖一搖,這裡預設為true
    shakeSpeed: 110,//設定門檻值,越小越靈敏
    shakeStep: 2000,//搖一搖成功後間隔
    lastTime: 0,//此變量用來記錄上次搖動的時間
    x: 0,
    y: 0,
    z: 0,
    lastX: 0,
    lastY: 0,
    lastZ: 0, //此組變量分别記錄對應 x、y、z 三軸的數值和上次的數值
};

function openShakeEvent() {
    shakeInfo.openFlag = true;
}

function closeShakeEvent() {
    shakeInfo.openFlag = false;
}

function shakeOk() {
    closeShakeEvent();
    setTimeout(function () {
        openShakeEvent();
    }, shakeInfo.shakeStep);
}
/**
 * 判斷是否為搖一搖
 */
function shake(acceleration, successCallback) {
    if (!shakeInfo.openFlag) {
        return;
    }
    var nowTime = new Date().getTime(); //記錄目前時間
    //如果這次搖的時間距離上次搖的時間有一定間隔 才執行
    if (nowTime - shakeInfo.lastTime > 100) {
        var diffTime = nowTime - shakeInfo.lastTime; //記錄時間段
        shakeInfo.lastTime = nowTime; //記錄本次搖動時間,為下次計算搖動時間做準備
        shakeInfo.x = acceleration.x; //擷取 x 軸數值,x 軸為垂直于北軸,向東為正
        shakeInfo.y = acceleration.y; //擷取 y 軸數值,y 軸向正北為正
        shakeInfo.z = acceleration.z; //擷取 z 軸數值,z 軸垂直于地面,向上為正
        //計算 公式的意思是 機關時間内運動的路程,即為我們想要的速度
        var speed = Math.abs(shakeInfo.x + shakeInfo.y + shakeInfo.z - shakeInfo.lastX - shakeInfo.lastY - shakeInfo.lastZ) / diffTime * 10000;
        //console.log(speed)
        if (speed > shakeInfo.shakeSpeed) { //如果計算出來的速度超過了門檻值,那麼就算作使用者成功搖一搖
            successCallback();
        }
        shakeInfo.lastX = shakeInfo.x; //指派,為下一次計算做準備
        shakeInfo.lastY = shakeInfo.y; //指派,為下一次計算做準備
        shakeInfo.lastZ = shakeInfo.z; //指派,為下一次計算做準備
    }
}
           

方法調用,在小程式啟動首頁頁面onLoad添加如下代碼:

/**
     * 生命周期函數--監聽頁面加載
     */
    onLoad: function(options) {
        //
        wx.onAccelerometerChange(function(acceleration) {
            Main.shake(acceleration, function() {
                Main.shakeOk();
                Main.openBarCodeDlg(); // 在這裡調用搖一搖成功後執行的代碼
            });
        });
    }
           

如果是小程式全局都監聽搖一搖,以上代碼就可以實作,如果隻是配置指定某幾個頁面監聽,則需要在監聽的頁面做以下code:

onShow: function() {
    Main.openShakeEvent();
},
onHide: function() {
    Main.closeShakeEvent();
}
           

這樣在跳轉到非監聽頁面時就不會執行你的代碼了