小程序API（1.1）監聽移動設備加速度變化的事件函數wx.onAccelerometerChange的使用

搖晃手機事件

 

 點擊或者搖晃手機，變臉

<!--pages/index.wxml-->
<view class='box'>
  <view class='title'>變臉游戲</view>
  <view>
    <image src="{{imgArr[index]}}" bindtap="changeFace" mode='widthFix'></image>
  </view>
</view>

bindtap="changeFace"，　　寬度全部顯示，高度自由顯示，保持縱橫比

/* pages/index.wxss */

image {
  margin: 10px;
}

margin: 10px;　　邊距，上下左右十個像素

// pages/index.js
function createRandomIndex() { //定義產生隨機數的全局函數
  return Math.floor(Math.random() * 10); //產生0—9之間的隨機整數，用作數組的下標
}

Page({
  data: {
    index: 0, //初始化臉譜圖片數組下標為0
    imgArr: [ //臉譜圖片數組，存放的圖片的路徑
      '../images/01.jpg',
      '../images/02.jpg',
      '../images/03.jpg',
      '../images/04.jpg',
      '../images/05.jpg',
      '../images/06.jpg',
      '../images/07.jpg',
      '../images/08.jpg',
      '../images/09.jpg',
      '../images/10.jpg',
    ],
  },

  changeFace: function() { //點擊臉譜圖片事件函數
    this.setData({
      index: createRandomIndex() //調用全局函數產生隨機數，設置下標為0-9之之間的隨機數，隨機數產生以后直接渲染到index.wxml文件中，index.wxml文件中的index的值就有了，再去調用imgArr,根據下標確定哪一個圖片，然后顯示出來
    })
  },
  
  onShow: function() { //生命周期函數，界面顯示時調用
    var that = this;//該函數中涉及了回調函數，回調函數中要使用this的時候，就可能使當前對象發生轉移，會出現錯誤，因此只要涉及到回調函數，一般都要把this賦值 給一個定義的變量
    wx.onAccelerometerChange(function(res) { //加速度變化監聽函數，用於監聽手機晃動，只有一個參數，即一個回調函數，該回調函數能夠通過res監測我們手機晃動的加速度的大小，手機一晃動監聽到了，那么手機加速度的信息就存儲在res里面，存儲以后就可以進行判斷了
      if (res.x > 0.5 || res.y > 0.5 || res.z > 0.5) { //設置加速度在某個坐標軸方向達到的數值，手機隨便一動，都會產生加速度，不限制值的話，沒法觀察界面變化的情況，效果就不好了，我們加速度的變化一般都在0-1之間，因此設置0.5，效果還是比較適合的
        wx.showToast({ //消息提示框函數
          title: '搖一搖成功', //消息框標題
          icon: 'success', //消息框圖標
          duration: 2000 //消息框顯示的時間
        })
        that.changeFace() //調用函數進行變臉，顯示一個隨機的臉譜圖片
      }
    })
  }
})

Math.random() * 10　　得到0-9之間的一個隨機數

Math.floor(Math.random() * 10);　　取地板，得到0-9之間的一個整數

與搖晃手機事件有關的API函數包括：

　　wx.onAccelerometerChange(function callback)

　　wx.startAccelerometer(Object object)

　　wx.stopAccelerometer(Object object)

wx.onAccelerometerChange(function callback) 用於監聽加速度變化事件，其參數為加速度變化事件的回調函數， 該回調函數的參數是對象類型（Object ）的res，res的屬性如下表所示。

　　

 　　xyz分別表示加速度在x軸y軸和z軸的值

 wx.startAccelerometer(Object object) 用於啟動監聽加速度變化事件。其參數屬性如下表所示。

　　

 　　interval監聽onAccelerometerChange函數的變化頻率

wx.stopAccelerometer(Object object) 用於停止監 聽加速度變化事件。