微信小程序实现摇一摇功能

摇一摇一直是微信经典的小功能。具体效果为：如果摇一摇成功，那么播放一段音频。

注意：此功能需要真机支持，在模拟器中无法正常运行

摇一摇的具体实现原理为：利用手机的重力感应机制监听手机摇晃幅度。如果手机摇晃幅度超过一定偏移量就认为摇一摇成功，可以执行具体业务；如果手机摇晃幅度不大就认为不是摇一摇。MINA框架提供的重力感应监听函数为wx.onAccelerometerChange(CALLBACK)。CALLBACK回调函数中将可以获得重力感应在x、y、z轴上的值。

自定义Shake模板

/templates/index.js

exports.Shake = require('./shake/shake')

/templates/index.wxss

@import "shake/shake.wxss";

/templates/shake/shake.wxml

<template name="shake">
  <modal title='摇一摇' confirm-text='确定' no-cancel hidden='{{shakeInfo.gravityModalHidden}}' bindconfirm='shake' confirm-color='#1f4ba5'>
    摇一摇，抢会员卡
  </modal>
</template>

/templates/shake/shake.js

/**
 * 摇一摇
 */
var Shake = {
  shake() {
    var that = this;
    this.gravityModalConfirm(true);
    wx.startAccelerometer()
    wx.onAccelerometerChange(function (res) {
      var x = res.x.toFixed(4),
        y = res.y.toFixed(4),
        z = res.z.toFixed(4);
      var flagX = that.getDelFlag(x, that.data.shakeData.x),
        flagY = that.getDelFlag(y, that.data.shakeData.y),
        flagZ = that.getDelFlag(z, that.data.shakeData.z);
      var shakeData = { x: x, y: y, z: z };
      that.setData({ shakeData: shakeData });
      if ((flagX && flagY) || (flagX && flagZ) || (flagY && flagZ)) {
        //幅度足够大，摇一摇成功
        if (that.data.shakeInfo.enable) {
          that.data.shakeInfo.enable = false;
          //wx.stopAccelerometer()
          that.shakeSuccess();
        }
      }
    });
  },

  //启用或停用摇一摇功能
  gravityModalConfirm(flag) {
    if (flag !== true) {
      flag = false;
    }
    var shakeInfo = { gravityModalHidden: !this.data.shakeInfo.gravityModalHidden, enable: flag };
    this.setData({ shakeInfo: shakeInfo });
  },

  //计算摇一摇的偏移量
  getDelFlag(val1, val2) {
    return (Math.abs(val1 - val2) >= 1);
  },
}

module.exports = Shake;

引用Shake模板

/pages/index/index.wxml

<import src="/templates/shake/shake.wxml" />

<view class='container'>
  <template is="shake" data='{{shakeInfo}}' />
</view>

/pages/index/index.js

//index.js
//获取应用实例
const app = getApp()
var Zan = require('../../templates/index');

Page(Object.assign({
  data: {
    shakeInfo: { gravityModalHidden: false, enable: true },
    shakeData: { x: 0, y: 0, z: 0 },
  },

  onLoad: function () {

  },
}, Zan.Shake, {
  //摇一摇成功后的操作
  shakeSuccess() {
    console.log('Shake Success')
    var that = this;
    wx.playBackgroundAudio({
      dataUrl: 'http://www.yezhou.me/audio/wx_app_shake.mp3',

    })

    wx.onBackgroundAudioStop(function () {
      wx.showToast({
        title: '搖一搖成功',
      });
      var shakeinfo = that.data.shakeInfo;
      shakeinfo = { enable: true, gravityModalHidden: false };
      that.setData({ shakeInfo: shakeinfo });
    })
  },
}))