您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
第一個(gè)搖一搖小程序?在Nodes裡搖一搖
發表時間:2021-3-26
發布人:葵宇科技
浏覽次數:26
話說,小程序也能做搖一搖功能,但好像沒怎麼看到過有什麼小程序做了這個(gè)?(大家如(rú)果看到,可(kě)以留言推薦一下(xià)),按耐不住心中(zhōng)好奇心的花(huā)叔這兩天研究了一下(xià)。
在說這之前,請允許我描述一下(xià)Nodes的新功能,因為由于這功能,花(huā)叔才萌生了研究小程序搖一搖的好奇心。
最近給Nodes加了個(gè)人首頁”的功能,大緻的功能點如(rú)下(xià):
目前在Nodes的主頁或者某個(gè)思維導圖的詳情頁裡,點擊頭像會去到某個(gè)人的個(gè)人主頁:
這是Nodes一個(gè)新發明的一個(gè)頁面,大家也可(kě)以長按或掃描下(xià)圖體驗:
這個(gè)頁面主要用于顯示某個(gè)用戶已經公開的思維導圖作品(在Nodes的首頁可(kě)以進行思維導圖的公開操作),這個(gè)頁面涵蓋了三個(gè)功能:
- 查詢或篩選該用戶已經公開的思維導圖作品
- 更改頭部banner圖(右上角有個(gè)鍊接)
- 根據banner圖生成該頁面的朋友圈分享圖(在banner的右下(xià)角)
也就是說,用戶訪問(wèn)另一個(gè)用戶的主頁時,目前隻能有兩種方式:
- 訪問(wèn)該用戶的某個(gè)思維導圖,點擊用戶的頭像
- 掃描或識别對應的菊花(huā)碼圖片
花(huā)叔覺得入口少(shǎo)了點,于是乎,一開始想着做一個(gè)用戶列表頁,然後用戶通(tōng)過列表訪問(wèn)某個(gè)用戶的主頁。
方法是可(kě)行的,但花(huā)叔太懶,不想弄,于是接下(xià)來做了一個(gè)挺“反人類”的交互,請看演示(這可(kě)是花(huā)叔冒着生命危險錄的demo):
沒錯,演示的頁面就是上面訪問(wèn)的那個(gè)頁面,隻要在那個(gè)頁面進行搖一搖,就會随機出現其他用戶的主頁。
這裡用了微信小程序的兩個(gè)API:
- 加速度計API,用來模拟搖一搖的
- 音頻api,用來播放音頻的
代碼怎麼寫?
因為小程序裡的加速度計Accelerometer API跟網頁的很像,唯一不一樣的是小程序中(zhōng)需要主動(dòng)開啟這個(gè)事件的監聽(也可(kě)以關(guān)閉),所以在網上找一段現成的js代碼改着用就好了。
最後貼一段代碼:
//首先定義一下(xià),全局變量
var lastTime = 0;//此變量用來記錄上次搖動(dòng)的時間
var x=0,
y = 0,
z=0,
lastX =0,
lastY = 0,
lastZ = 0;//此組變量分别記錄對應x、y、z三軸的數值和(hé)上次的數值
var shakeSpeed = 110;//設置阈值
//編寫搖一搖方法
function shake(acceleration) {
var nowTime = new Date().getTime();//記錄當前時間
//如(rú)果這次搖的時間距離(lí)上次搖的時間有一定間隔 才執行
if (nowTime - lastTime > 100) {
var diffTime = nowTime - lastTime;//記錄時間段
lastTime = nowTime;//記錄本次搖動(dòng)時間,為下(xià)次計算搖動(dòng)時間做準備
x = acceleration.x;//獲取x軸數值,x軸為垂直于北軸,向東為正
y = acceleration.y;//獲取y軸數值,y軸向正北為正
z = acceleration.z;//獲取z軸數值,z軸垂直于地面,向上為正
//計算 公式的意思是 單位時間内運動(dòng)的路(lù)程,即為我們想要的速度
var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
//console.log(speed)
if (speed > shakeSpeed) {//如(rú)果計算出來的速度超過了阈值,那麼就算作用戶成功搖一搖
wx.stopAccelerometer()
self.setData({
hasInit: false,
canvas:{}
})
audioCtx.setSrc('http://123.207.0.183/application/images/s.mp3')
audioCtx.play()
wx.showLoading({
title: '尋找大神中(zhōng)...'
})
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;//賦值,為下(xià)一次計算做準備
lastY = y;//賦值,為下(xià)一次計算做準備
lastZ = z;//賦值,為下(xià)一次計算做準備
}
}
wx.onAccelerometerChange(shake)
//wx.startAccelerometer()
var audioCtx = wx.createAudioContext('myAudio')
提醒:audio API的src不能用本地地址。
本文(wén)作者:花(huā)叔
原文(wén)地址:第一個(gè)搖一搖小程序?在Nodes裡搖一搖