zoukankan      html  css  js  c++  java
  • 小程序API(1.1)监听移动设备加速度变化的事件函数wx.onAccelerometerChange的使用

    摇晃手机事件

     点击或者摇晃手机,变脸

    <!--pages/index.wxml-->
    <view class='box'>
      <view class='title'>变脸游戏</view>
      <view>
        <image src="{{imgArr[index]}}" bindtap="changeFace" mode='widthFix'></image>
      </view>
    </view>
    bindtap="changeFace",  宽度全部显示,高度自由显示,保持纵横比
    /* pages/index.wxss */
    
    image {
      margin: 10px;
    }
    margin: 10px;  边距,上下左右十个像素
    // pages/index.js
    function createRandomIndex() { //定义产生随机数的全局函数
      return Math.floor(Math.random() * 10); //产生0—9之间的随机整数,用作数组的下标
    }
    
    Page({
      data: {
        index: 0, //初始化脸谱图片数组下标为0
        imgArr: [ //脸谱图片数组,存放的图片的路径
          '../images/01.jpg',
          '../images/02.jpg',
          '../images/03.jpg',
          '../images/04.jpg',
          '../images/05.jpg',
          '../images/06.jpg',
          '../images/07.jpg',
          '../images/08.jpg',
          '../images/09.jpg',
          '../images/10.jpg',
        ],
      },
    
      changeFace: function() { //点击脸谱图片事件函数
        this.setData({
          index: createRandomIndex() //调用全局函数产生随机数,设置下标为0-9之之间的随机数,随机数产生以后直接渲染到index.wxml文件中,index.wxml文件中的index的值就有了,再去调用imgArr,根据下标确定哪一个图片,然后显示出来
        })
      },
      
      onShow: function() { //生命周期函数,界面显示时调用
        var that = this;//该函数中涉及了回调函数,回调函数中要使用this的时候,就可能使当前对象发生转移,会出现错误,因此只要涉及到回调函数,一般都要把this赋值 给一个定义的变量
        wx.onAccelerometerChange(function(res) { //加速度变化监听函数,用于监听手机晃动,只有一个参数,即一个回调函数,该回调函数能够通过res监测我们手机晃动的加速度的大小,手机一晃动监听到了,那么手机加速度的信息就存储在res里面,存储以后就可以进行判断了
          if (res.x > 0.5 || res.y > 0.5 || res.z > 0.5) { //设置加速度在某个坐标轴方向达到的数值,手机随便一动,都会产生加速度,不限制值的话,没法观察界面变化的情况,效果就不好了,我们加速度的变化一般都在0-1之间,因此设置0.5,效果还是比较适合的
            wx.showToast({ //消息提示框函数
              title: '摇一摇成功', //消息框标题
              icon: 'success', //消息框图标
              duration: 2000 //消息框显示的时间
            })
            that.changeFace() //调用函数进行变脸,显示一个随机的脸谱图片
          }
        })
      }
    })
    Math.random() * 10  得到0-9之间的一个随机数
    Math.floor(Math.random() * 10);  取地板,得到0-9之间的一个整数

    与摇晃手机事件有关的API函数包括:

      wx.onAccelerometerChange(function callback)

      wx.startAccelerometer(Object object)

      wx.stopAccelerometer(Object object)

    wx.onAccelerometerChange(function callback) 用于监听加速度变化事件,其参数为加速度变化事件的回调函数, 该回调函数的参数是对象类型(Object )的res,res的属性如下表所示。

      

       xyz分别表示加速度在x轴y轴和z轴的值

     wx.startAccelerometer(Object object) 用于启动监听加速度变化事件。其参数属性如下表所示。

      

       interval监听onAccelerometerChange函数的变化频率

    wx.stopAccelerometer(Object object) 用于停止监 听加速度变化事件。

  • 相关阅读:
    Redis 集合(Set)
    北京Uber优步司机奖励政策(1月21日)
    成都Uber优步司机奖励政策(1月21日)
    滴滴快车奖励政策,高峰奖励,翻倍奖励,按成交率,指派单数分级(1月21日)
    全国各城市Uber客服联系方式(电话、邮箱、微博)
    成都Uber优步司机奖励政策(1月20日)
    北京Uber优步司机奖励政策(1月20日)
    滴滴快车奖励政策,高峰奖励,翻倍奖励,按成交率,指派单数分级(1月20日)
    Linq聚合函数使用
    Linq查询案例
  • 原文地址:https://www.cnblogs.com/suitcases/p/13601958.html
Copyright © 2011-2022 走看看