開發 | 在小程序里也能搖一搖？調用介面就能做

文 | 花叔

小程序也能做搖一搖功能，但好像沒怎麼看到過有什麼小程序做？

按耐不住好奇心的花叔，在這兩天研究了一下。

在說這之前，請允許我描述一下 Nodes的新功能——個人主頁功能。因為這個功能，花叔才萌生了研究小程序搖一搖的好奇心。

在 Nodes 的主頁或者某個思維導圖的詳情頁里，點擊頭像會跳轉到某個人的個人主頁。

這個頁面主要用於顯示某個用戶已經公開的思維導圖作品（在 Nodes 的首頁可以進行思維導圖的公開操作）。

這個頁面涵蓋了三個功能：

• 查詢或篩選該用戶已經公開的思維導圖作品。
• 更改頭部 banner 圖（右上角有個鏈接）。
• 根據 banner 圖生成該頁面的朋友圈分享圖（在 banner 的右下角）。

也就是說，按平常的情況而言，用戶去訪問另一個用戶的主頁，只能有兩種方式：

• 訪問該用戶的某個思維導圖，點擊用戶的頭像
• 掃描或識別對應的菊花碼圖片

我覺得，入口少了點。於是乎，就在思考如何增加訪問他人主頁的方式。

一開始想著做一個用戶列表頁，然後用戶通過列表訪問某個用戶的主頁。方法是可行的，但實在太懶，不想弄。

於是接下來，做了一個挺「反人類」的交互，請看演示（這可是冒著生命危險錄的）：

沒錯，演示的頁面就是上面訪問的那個頁面。只要在個人主頁搖一搖，就會隨機出現其他用戶的主頁。

這裡用了微信小程序的兩個 API：

• 加速度計 API，偵測手機物理狀態。
• 音頻 API，在用戶搖晃手機的時候播放音頻。

代碼怎麼寫？

因為小程序里的加速度計 Accelerometer API 跟 web 開發的很像，唯一不一樣的是，小程序中需要主動開啟這個事件的監聽（也可以關閉）。

所以，我就在網上找一段現成的 JS 代碼，改著用就好了。

最後貼一段代碼：

//首先定義一下，全局變數
var lastTime = 0; //此變數用來記錄上次搖動的時間
var x = 0,
y = 0,
z = 0,
lastX = 0,
lastY = 0,
lastZ = 0; //此組變數分別記錄對應x、y、z三軸的數值和上次的數值
var shakeSpeed = 110; //設置閾值
//編寫搖一搖方法
function shake(acceleration) {
var nowTime = new Date.getTime; //記錄當前時間
//如果這次搖的時間距離上次搖的時間有一定間隔 才執行
if (nowTime - lastTime > 100) {
var diffTime = nowTime - lastTime; //記錄時間段
lastTime = nowTime; //記錄本次搖動時間，為下次計算搖動時間做準備
x = acceleration.x; //獲取x軸數值，x軸為垂直於北軸，向東為正
y = acceleration.y; //獲取y軸數值，y軸向正北為正
z = acceleration.z; //獲取z軸數值，z軸垂直於地面，向上為正
//計算 公式的意思是 單位時間內運動的路程，即為我們想要的速度
var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
//console.log(speed)
if (speed > shakeSpeed) { //如果計算出來的速度超過了閾值，那麼就算作用戶成功搖一搖
wx.stopAccelerometer
self.setData({
hasInit: false,
canvas: {}
})
audioCtx.setSrc("http://123.207.0.183/application/images/s.mp3")
audioCtx.play
wx.showLoading({
title: "尋找大神中..."
})
config.request({
// 要請求的地址
url: config.service.taRan,
success(e) {
setTimeout(function {
//console.log(e.data)
audioCtx.setSrc("http://123.207.0.183/application/images/r.mp3")
audioCtx.play
self.uid = e.data
self.con = ""
self.onInitShow
}, 2000)
}
})
}
lastX = x; //賦值，為下一次計算做準備
lastY = y; //賦值，為下一次計算做準備
lastZ = z; //賦值，為下一次計算做準備
}
}
wx.onAccelerometerChange(shake)
//wx.startAccelerometer
var audioCtx = wx.createAudioContext("myAudio")

還需額外注意的是，小程序的 Audio API 只能使用網路音頻資源。

原文地址：http://mp.weixin.qq.com/s/VB1-1n4Fo-3EM5o5ZXAZbA

「Nodes」小程序使用鏈接 https://minapp.com/miniapp/2629/

關注「知曉程序」公眾號，在微信後台回復「開發」，獲取小程序開發文章推薦。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！