摇一摇一直是微信经典的小功能。具体效果为：如果摇一摇成功，那么播放一段音频。
注意：此功能需要真机支持，在模拟器中无法正常运行
摇一摇的具体实现原理为：利用手机的重力感应机制监听手机摇晃幅度。如果手机摇晃幅度超过一定偏移量就认为摇一摇成功，可以执行具体业务；如果手机摇晃幅度不大就认为不是摇一摇。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 });
})
},
}))
