商城系統(tǒng) 注冊

搖一搖小程序系統(tǒng)開發(fā)

2018-02-09|HiShop
導讀:我們知道微信搖一搖這個功能,但是如果開發(fā)一個搖一搖小程序,要怎么做呢? ...
我們知道微信搖一搖這個功能,但是如果開發(fā)一個搖一搖小程序,要怎么做呢?

 //首先定義一下,全局變量
   var lastTime = 0;//此變量用來記錄上次搖動的時間
   var x=0,
       y = 0,
       z=0,
       lastX =0,
       lastY = 0,
       lastZ = 0;//此組變量分別記錄對應x、y、z三軸的數(shù)值和上次的數(shù)值
   var shakeSpeed = 110;//設置閾值
   //編寫搖一搖方法
   function shake(acceleration) {
     var nowTime = new Date().getTime();//記錄當前時間
     //如果這次搖的時間距離上次搖的時間有一定間隔 才執(zhí)行
     if (nowTime - lastTime > 100) {
       var diffTime = nowTime - lastTime;//記錄時間段
       lastTime = nowTime;//記錄本次搖動時間,為下次計算搖動時間做準備
       x = acceleration.x;//獲取x軸數(shù)值,x軸為垂直于北軸,向東為正
       y = acceleration.y;//獲取y軸數(shù)值,y軸向正北為正
       z = acceleration.z;//獲取z軸數(shù)值,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的src不能用本地地址。


HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。

更多小程序資訊,盡在:m.descansotropical.com/xiaocx/


電話咨詢 預約演示 0元開店