在小程序日常開發中，我們可能會遇到需要通過旋轉手機等方式來觸發某種事件，爲此，就需要調用手機當中的加速度計來爲我們獲取手機的當前狀態了。加速度計的原理很簡單，現在手機裏面基本配備的都是3維線傳感器，也就是說，用來測量x，y，z三個軸上的加速力。加速力就是當物體在加速過程中作用在物體上的力，就好比地球引力，也就是重力。
還好，小程序提供了wx.onAccelerometerChange接口來幫我們解決這些問題，本教程將爲大家介紹wx.onAccelerometerChange在小程序中的基本使用，並通過若干demo做簡單的實驗。
在教程開始之前，需要搭建搭建好小程序的基礎開發環境，關於如何配置，大家可以參考如何入門小程序開發這篇文章的入門教程。
加速度計API調用
調用API很簡單，在開始使用之前，我們直接上代碼吧。打開你的index.js文件，然後寫下下面的代碼。
Page({
onShow: function () {
wx.onAccelerometerChange(function (res) {
console.log(res.x)
console.log(res.y)
console.log(res.z)
})
}
})然後點擊真機調試按鈕，掃描二維碼後晃動手機，你可能會在電腦端看到類似下面的內容。
這裏的數值，就是我們調用小程序的wx.onAccelerometerChange接口，然後通過console.log在控制檯打印出來當前的手機的加速度計狀態。但是這裏數據太亂了，我們根本無法得知那個是x，y，z三個軸上的加速力。優化下代碼，我們將數據傳輸到前端看看。打開index.wxml文件，寫下下面的代碼。
<view>加速度計</view>
<view>x:{{x}}</view>
<view>y:{{y}}</view>
<view>z:{{z}}</view>然後打開index.js文件，將代碼修改如下。
Page({
onShow: function () {
var myThis = this;
wx.onAccelerometerChange(function (res) {
myThis.setData({
x: res.x,
y: res.y,
z: res.z
})
})
}
})現在重新編譯下，你就可以在小程序端查看到當前手機的加速度狀態了。
通過上面的數據，經過推算，我們可以得到這麼一張圖，通過這些數據，我們就可以得到當前手機的狀態了。
除了監聽加速度數據事件wx.onAccelerometerChangeAPI，微信官方還提供了wx.startAccelerometer和wx.stopAccelerometer來開始或停止當前小程序的加速度計的監控。我們可以通過這兩個API，來實現基本的加速度計的控制。修改index.js代碼如下。
Page({
startAccelerometer(){
wx.startAccelerometer({
interval: 'ui'
})
},
stopAccelerometer() {
wx.stopAccelerometer()
},
onShow: function () {
var myThis = this;
wx.onAccelerometerChange(function (res) {
myThis.setData({
x: res.x,
y: res.y,
z: res.z
})
})
}
})然後修改index.wxml文件代碼如下
<view>加速度計</view>
<view>x:{{x}}</view>
<view>y:{{y}}</view>
<view>z:{{z}}</view>
<button type="primary" bindtap="startAccelerometer">打開加速度監聽</button>
<button type="primary" bindtap="stopAccelerometer">關閉加速度監聽</button>這裏我們調用了wx.startAccelerometer()和wx.stopAccelerometer()兩個API，我們先看看wx.startAccelerometer()的官方文檔。
屬性 | 類型 | 必填 | 說明 |
|---|---|---|---|
interval | string | 否 | 監聽加速度數據回調函數的執行頻率，合法值爲 |
success | function | 否 | 接口調用成功的回調函數 |
fail | function | 否 | 接口調用失敗的回調函數 |
complete | function | 否 | 接口調用結束的回調函數（調用成功、失敗都會執行） |
這裏我們僅僅設置了了當前的回調頻率，設置爲ui，也就是60ms更新一次。大家可以按照自己的需求更改。
然後我們在前端通過button按鈕去調用startAccelerometer函數和stopAccelerometer去開啓關閉加速度計。
加速度計3D相冊demo
那麼，有了這些數據，可以做到那些高階玩法呢？我們可以使用小程序來做一個3D相冊。
爲了讓小程序內的圖片動起來，我們需要調用小程序的動畫接口wx.createAnimation。然後使用該函數的.rotate3d等方法讓小程序內的圖片旋轉起來。首先，插入一張圖片，然後設置動畫參數，打開index.wxml，寫下下面的代碼。
<image animation="{{animation}}" src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/230px-Cat03.jpg'></image>我們需要在後端調用動畫，所以還需要編寫後端代碼，打開index.js文件，寫下下面的代碼。
var x = 0
Page({
data: {
animationData: 0
},
onShow: function () {
var myThis = this;
wx.onAccelerometerChange(function (res) {
x = res.x * 180
this.animation = wx.createAnimation()
this.animation.rotate(x).step()
myThis.setData({
animation: this.animation.export()
})
});
}
})現在，左右晃動手機，你會發現圖中的貓咪沿着你晃動手機的方向旋轉。
講講代碼的原理吧，index.wxml文件中，我們定義了貓咪的圖片，並設置了animation屬性，該屬性的參數需要通過後端返回的數據獲取。
index.js文件中，我們將調用onAccelerometerChange的接口，然後獲取加速度計返回值X，因爲返回值爲小數，爲了將圖片旋轉度數變大，將這個值乘以180。然後通過animation接口去設置旋轉動畫。但是這裏僅僅是2D畫面，怎麼設置3D的相冊呢？我們引入另外的變量Y，Z，修改index.js文件。
var x = 0
var y = 0
var z = 0
Page({
data: {
animationData: 0
},
onShow: function () {
var myThis = this;
wx.onAccelerometerChange(function (res) {
x = res.x * 180
y = res.y * 180
z = res.z * 180
console.log(x,y,z)
this.animation = wx.createAnimation()
this.animation.rotate3d(x,y,z,180).step()
myThis.setData({
animation: this.animation.export()
})
});
}
})這裏我們引入了x,y,z三個變量，從而實現使小程序中的圖片變爲3D的效果，如圖。
我們將手機的變量返回給了動畫參數，從而實現圖片隨手機狀態變化而變化。我們甚至可以實現旋轉手機的時候圖片不旋轉。
var xy = 0
Page({
data: {
animationData: 0
},
onShow: function () {
var myThis = this;
wx.onAccelerometerChange(function (res) {
if(res.y < 0){
xy = res.x * -90
}
if(res.y > 0){
xy = res.y * 180
}
this.animation = wx.createAnimation()
this.animation.rotate(xy).step()
myThis.setData({
animation: this.animation.export()
})
});
}
})但是這樣的方式不夠完美，如果要實現較爲流暢的圖片旋轉，我們就需要引入陀螺儀使用的角速度概念，關於陀螺儀的介紹，我們將放在後面的文章做介紹。
總結
現在學會加速度計的使用了嗎？後續我將會對其他組件做詳細的介紹。喜歡的小夥伴請持續關注本專欄。騰訊雲聯合小程序給大家帶來了小程序·雲開發解決方案，爲開發者提供完整的雲端支持，弱化後端和運維操作，使用平臺原生 API 進行核心業務開發，實現快速上線和迭代。歡迎免費使用！