当前位置:首页 > 新闻动态 > 网站文章

小程序摇一摇抽奖功能

来源: 浏览:107 时间:2023-08-10

本案例需要实现的功能是小程序可以通过摇一摇实现随机抽奖的功能, 微信小程序并没有提供可以摇一摇的API接口,但是提供了一个加速度数据事件wx.onAccelerometerChange(function callback)可以用来模拟摇一摇功能

案例页面展示

具体效果为:通过手机摇一摇,如果摇一摇成功,请求后台接口,后台随机返回抽奖结果(中奖或未中奖),抽奖次数减1,并播放不同的音效,

注意:此功能开发需在开发者工具真机调试,在模拟器中无法正常运行

摇一摇的实现代码,util/shake.js

let shakeInfo = {
  openFlag: false,  // 是否开启摇一摇,如果是小程序全局监听摇一摇,这里默认为true
  shakeSpeed: 110,  //设置阈值,越小越灵敏
  shakeStep: 2000,  //摇一摇成功后间隔
  lastTime: 0,  //此变量用来记录上次摇动的时间
  x: 0,
  y: 0,
  z: 0,
  lastX: 0,
  lastY: 0,
  lastZ: 0, //分别记录对应 x、y、z 三轴的数值和上次的数值
};
//开启摇一摇
function openShakeEvent() {
  shakeInfo.openFlag = true;
}
//关闭摇一摇
function closeShakeEvent() {
  shakeInfo.openFlag = false;
}
//摇一摇成功
function shakeOk() {
  closeShakeEvent();
}
/**
 * 判断是否为摇一摇
 */
function shake(acceleration, successCallback) {
  if (!shakeInfo.openFlag) {
    return;
  }
var nowTime = new Date().getTime(); //记录当前时间
  //如果这次摇的时间距离上次摇的时间有一定间隔 才执行
  if (nowTime - shakeInfo.lastTime > 100) {
    var diffTime = nowTime - shakeInfo.lastTime; //记录时间段
    shakeInfo.lastTime = nowTime; //记录本次摇动时间
    shakeInfo.x = acceleration.x; //获取 x 轴数值
    shakeInfo.y = acceleration.y; //获取 y 轴数值
    shakeInfo.z = acceleration.z; //获取 z 轴数值
    //计算摇一摇的速度
    var speed = Math.abs(shakeInfo.x + shakeInfo.y + shakeInfo.z - shakeInfo.lastX - shakeInfo.lastY - shakeInfo.lastZ) / diffTime * 10000;
    if (speed > shakeInfo.shakeSpeed) { //如果计算出来的摇一摇幅度足够大,那么认为用户摇一摇成功
      successCallback();
    }
    //赋值,为下一次计算做准备
    shakeInfo.lastX = shakeInfo.x;
    shakeInfo.lastY = shakeInfo.y;
    shakeInfo.lastZ = shakeInfo.z; 
  }
}
module.exports = {
  openShakeEvent: openShakeEvent,
  closeShakeEvent: closeShakeEvent,
  shake: shake,
  shakeOk: shakeOk
}
复制代码

摇一摇的方法调用 shake/shake.js

// pages/shake/shake.js
const app = getApp()
const shake = require('../../utils/shake.js');
Page({}
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    shake.openShakeEvent();  //打开摇一摇功能
    this.onAccelerometerChange()  //开启摇一摇
  },
/**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    wx.offAccelerometerChange()  //取消监听加速度数据事件,如果没有取消监听,退出页面后摇一摇事件会继续执行
    shake.closeShakeEvent()  //关闭摇一摇功能
  },
// 开启摇一摇
  onAccelerometerChange() {
    let _this = this
    wx.onAccelerometerChange(function(acceleration) {
      shake.shake(acceleration, function() {
        // 摇一摇成功后执行代码
        _this.playSound('/static/audio/shake.wav') // 播放摇一摇音频
        shake.shakeOk();
//摇一摇成功后调用后台接口获取中奖信息
        ......
        ......
        ......
      });
    });
  },
//播放音频
  playSound = (src) => {
    const innerAudioContext = wx.createInnerAudioContext()
    innerAudioContext.autoplay = true
    //这两句话话一定要在一起,不然ios手机上会有时间放不出声音
    innerAudioContext.src = src
    innerAudioContext.onPlay(() => {
        console.log('开始播放')
    })
    innerAudioContext.onError((res) => {
        console.log(res)
    })
  }
)
复制代码

以上就是实现摇一摇抽奖的功能代码

地址 · ADDRESS

地址:建邺区新城科技园嘉陵江东街18号2层

邮箱:309474043@qq.Com

点击查看更多案例

联系 · CALL TEL

400-8793-956

售后专线:025-65016872

业务QQ:309474043    售后QQ:1850555641

©南京安优网络科技有限公司 版权所有   苏ICP备12071769号-4  网站地图