微信小程序手机摇一摇功能

var socketOpen = false;
var count = 0;
var SocketTask;
var url = 'xxxx'; //ws地址
Page({
  data: {

  },
  onLoad: function (options) {
    
  },
  onReady: function () {
    var that = this;
	// 监听协议
    SocketTask.onOpen(res => {
      socketOpen = true;
      console.log('监听 WebSocket 连接打开事件。', res)
    })
    SocketTask.onClose(onClose => {
      console.log('监听 WebSocket 连接关闭事件。', onClose)
      socketOpen = false;
      that.webSocket()
    })
    SocketTask.onError(onError => {
      console.log('监听 WebSocket 错误。错误信息', onError)
      socketOpen = false
    })
    SocketTask.onMessage(res => {
      console.log('监听 WebSocket 连接打开事件。', res) 
    })
  },
  onShow: function () {
    var that = this;  
    that.initAnimation();
    //开始监听加速度数据
    wx.startAccelerometer({
      interval: 'ui'
    });
    //监听加速度数据事件。频率根据 wx.startAccelerometer() 的 interval 参数, 接口调用后会自动开始监听
    wx.onAccelerometerChange(function (e) {
      if (e.x > .7 && e.y > .7) {
        ++count;
        if(count%2==0){
          setTimeout(function () {
             that.shake();
          }, 400);
		  that.sendSocketMessage();
		  console.log(count);
        }        
      }
    });
    if (!socketOpen) {
      that.webSocket()
    }	
  },
  onHide: function () {
    SocketTask.close(function (close) {
        console.log('关闭 WebSocket 连接。', close)
    })		 
    //停止监听加速度数据 
    wx.stopAccelerometer();
  },
  onUnload: function () {
    wx.stopAccelerometer();
  },
  //创建一个动画实例
  initAnimation:function(){
    var that = this;
    that.animation = wx.createAnimation({
       duration: 100,
       timingFunction: "ease",
       delay: 0,
       transformOrigin: 'center bottom',
       success: function (res) {
         console.log(res)
       }
    });
  },
  // 动画
  shake:function(){
    var that = this;
    wx.vibrateLong();
    that.animation
     .translate(25).rotate(20).step()
     .translate(0).step()
     .translate(-25).rotate(-20).step()
     .translate(5).rotate(5).step()
     .translate(0).step()
     .translate(-5).rotate(-5).step()
     .translate(0).rotate(0).step();
    that.setData({
      animation: that.animation.export()
     });
   },
    webSocket:function () {
        // 创建Socket
        SocketTask = wx.connectSocket({
            url: url,
            data: 'data',
            header: {
                'content-type': 'application/json'
            },
            method: 'post',
            success: function (res) {
                console.log('WebSocket连接创建', res)
            },
            fail: function (err) {
                wx.showToast({
                   title: '网络异常!',
                })
                console.log(err)
            },
        })
   },
   // 发送数据
   sendSocketMessage:function() {
       var that = this;
       var message = {
            "user_id": userid,
            "user_name": username,
            "user_avatar": useravatar,
		    "user_phone": userphone
       }	   
       console.log('通过 WebSocket 连接发送数据', JSON.stringify(message))
       SocketTask.send({
       data: JSON.stringify(message)
       }, function (res) {
          console.log('已发送', res)
       })
   },
 })
    <view class="shake_ani" animation="{{animation}}">
      <image src="摇一摇的图片"></image>
    </view>   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值