第一個(gè)搖一搖小程序？在Nodes里搖一搖 Rolan2018-2-8 00:13
|
話說，小程序也能做搖一搖功能，但好像沒怎么看到過有什么小程序做了這個(gè)？（大家如果看到，可以留言推薦一下），按耐不住心中好奇心的花叔這兩天研究了一下。
在說這之前，請?jiān)试S我描述一下Nodes的新功能，因?yàn)橛捎谶@功能，花叔才萌生了研究小程序搖一搖的好奇心。
最近給Nodes加了個(gè)人首頁”的功能，大致的功能點(diǎn)如下：
目前在Nodes的主頁或者某個(gè)思維導(dǎo)圖的詳情頁里，點(diǎn)擊頭像會(huì)去到某個(gè)人的個(gè)人主頁：
這是Nodes一個(gè)新發(fā)明的一個(gè)頁面，大家也可以長按或掃描下圖體驗(yàn)：
這個(gè)頁面主要用于顯示某個(gè)用戶已經(jīng)公開的思維導(dǎo)圖作品（在Nodes的首頁可以進(jìn)行思維導(dǎo)圖的公開操作），這個(gè)頁面涵蓋了三個(gè)功能：
也就是說，用戶訪問另一個(gè)用戶的主頁時(shí)，目前只能有兩種方式：
花叔覺得入口少了點(diǎn)，于是乎，一開始想著做一個(gè)用戶列表頁，然后用戶通過列表訪問某個(gè)用戶的主頁。
方法是可行的，但花叔太懶，不想弄，于是接下來做了一個(gè)挺“反人類”的交互，請看演示（這可是花叔冒著生命危險(xiǎn)錄的demo）：
沒錯(cuò)，演示的頁面就是上面訪問的那個(gè)頁面，只要在那個(gè)頁面進(jìn)行搖一搖，就會(huì)隨機(jī)出現(xiàn)其他用戶的主頁。
這里用了微信小程序的兩個(gè)API：
代碼怎么寫？ 因?yàn)樾〕绦蚶锏募铀俣扔?jì)Accelerometer API跟網(wǎng)頁的很像，唯一不一樣的是小程序中需要主動(dòng)開啟這個(gè)事件的監(jiān)聽（也可以關(guān)閉），所以在網(wǎng)上找一段現(xiàn)成的js代碼改著用就好了。
最后貼一段代碼：
//首先定義一下，全局變量
var lastTime = 0;//此變量用來記錄上次搖動(dòng)的時(shí)間
var x=0,
y = 0,
z=0,
lastX =0,
lastY = 0,
lastZ = 0;//此組變量分別記錄對應(yīng)x、y、z三軸的數(shù)值和上次的數(shù)值
var shakeSpeed = 110;//設(shè)置閾值
//編寫搖一搖方法
function shake(acceleration) {
var nowTime = new Date().getTime();//記錄當(dāng)前時(shí)間
//如果這次搖的時(shí)間距離上次搖的時(shí)間有一定間隔 才執(zhí)行
if (nowTime - lastTime > 100) {
var diffTime = nowTime - lastTime;//記錄時(shí)間段
lastTime = nowTime;//記錄本次搖動(dòng)時(shí)間，為下次計(jì)算搖動(dòng)時(shí)間做準(zhǔn)備
x = acceleration.x;//獲取x軸數(shù)值，x軸為垂直于北軸，向東為正
y = acceleration.y;//獲取y軸數(shù)值，y軸向正北為正
z = acceleration.z;//獲取z軸數(shù)值，z軸垂直于地面，向上為正
//計(jì)算 公式的意思是 單位時(shí)間內(nèi)運(yùn)動(dòng)的路程，即為我們想要的速度
var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
//console.log(speed)
if (speed > shakeSpeed) {//如果計(jì)算出來的速度超過了閾值，那么就算作用戶成功搖一搖
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;//賦值，為下一次計(jì)算做準(zhǔn)備
lastY = y;//賦值，為下一次計(jì)算做準(zhǔn)備
lastZ = z;//賦值，為下一次計(jì)算做準(zhǔn)備
}
}
wx.onAccelerometerChange(shake)
//wx.startAccelerometer()
var audioCtx = wx.createAudioContext('myAudio')
提醒：audio API的src不能用本地地址。 |
