H5 简单实现微信公众号摇一摇功能

一、H5实现微信摇一摇功能

https://mp.weixin.qq.com
1、简述：H5实现微信摇一摇主要是需要调用微信获取设备信息的功能。
2、调用微信摇一摇的相关准备工作：
①　开通微信摇一摇

②　在微信摇一摇中添加好设备信息

③　将设备的uuid、major、minor信息配入ibeacon设备中

④　通过微信本身的摇一摇周边**设备
⑤　H5要调用微信摇一摇功能需先配配置js接口安全域名

⑥　H5获取设备信息接口自能获取到分了组的设备信息，分组需要调用接口进行，公众平台网站中没看到分组功能

到此调用微信摇一摇功能的配置已完成。
注：调用接口时所用到的AppID、AppSecret必须与配置的公众号一致。

3、功能实现思路
首先要监听到手机摇晃的动作，h5可实现改功能；
第二、监听到摇晃动作后需调用获取微信设备信息的接口；
第三、获取到设备信息后需选取一条设备信息，调转到需要的界面
注：微信获取设备信息时先要开启查找周边ibeacon设备，这改接口的回调函数中调用监听周边ibeacon设备的接口。获取到设备信息后需要调用关闭查找周边ibeacon设备信息的接口，否者在微信浏览器未关闭时会一直开启监听ibeacon设备信息。另外关闭查找ibeacon设备信息不能与开启查找ibeacon设备放在同一个wx.ready()，否者或先调用wx.stopSearchBeacons，在调用wx.starSearchBeacons，无法起到关闭效果。

h5页面实现摇一摇代码如下

下载微信weixin-js-sdk

npm install weixin-js-sdk --save

下载shake.js

npm install shake.js --save

实现代码如下

<template>
  <div id="yyy"
       :style="{background:bgcolor}">
    <img class="yaoImg"
         src="../../../assets/images/[e-mail]"
         alt=""
         ref="yaoImg">
    <audio src="../../../assets/yaoyiyao.wav"
           ref="shakeAudio">
    </audio>
    <audio src="../../../assets/yaoyiyao_result.wav"
           ref="resultAudio">
    </audio>
    <transition name="bounce">
      <div class="text-con"
           v-show="show"
           @click="tiaozhuan">
        <img class="yuyin-img"
             :src="imgSrc"
             alt="">
        <div class="text">
          <div>{{name}}</div>
          <div>广州动物园</div>
        </div>
      </div>
    </transition>
    <!-- <div class="tips"
         v-show="show2">请点击手机屏幕扫描动物园语音信息！</div> -->
  </div>
</template>

<script>
import Shake from "shake.js";
import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      bgcolor: "#333333",
      show: false,
      name: "大熊猫",
      imgSrc: "",
      animalId: "",
      show2: false,
      defaultImg: "",
      yaoImg: ""
    };
  },
  mounted() {
    // this.$refs.yaoImg.src = require("../../../assets/images/[e-mail]");
    this.show = false;
    // 实例化一个 shake 对象
    let myShakeEvent = new Shake({
      threshold: 20, // 默认摇动阈值
      timeout: 1200 // 默认两次事件间隔时间
    });
    // 监听设备的动作
    myShakeEvent.start();
    // 添加一个事件监听
    window.addEventListener("shake", this.shakeEventDidOccur, false);
  },
  methods: {
    // 摇动的回调函数
    shakeEventDidOccur() {
      var _this = this;
      _this.$refs.yaoImg.src = require("../../../assets/images/yaoyiyao.gif");
      if (window.navigator.vibrate) {
        navigator.vibrate(500);
      }
      // 播放音频
      _this.$refs.shakeAudio.play();
      _this.wx_shake();
    },
    //微信摇一摇
    wx_shake() {
      var _this = this;
      this.$api
        .getWechatConfig({
          isValid: true,
          currentURL: encodeURIComponent(location.href.split("#")[0])
        })
        .then(res => {
          if (res.data.code == 2000) {
            // console.log(res)
            // alert(res.data.data.appId)
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: res.data.data.appId, // 必填，公众号的唯一标识
              timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.data.signature, // 必填，签名，见附录1
              jsApiList: [
                "checkJsApi",
                "startSearchBeacons",
                "stopSearchBeacons"
              ]
            });
            wx.ready(function() {
              // alert('打开微信摇一摇')
              wx.startSearchBeacons({
                complete: function(data) {
                  wx.onSearchBeacons({
                    complete: function(argv) {
                      // alert(JSON.stringify(argv))
                      _this.getByIbeacon(
                        argv.beacons[0].major,
                        argv.beacons[0].minor
                      );
                      // alert('关闭微信摇一摇')
                      wx.stopSearchBeacons({
                        complete: function(res) {
                          //回调函数
                        }
                      });
                    }
                  });
                }
              });
            });
          }
        })
        .catch(err => {
          throw err;
        });
    },
    //拿到一个最近距离的设备信息后跳转
    getByIbeacon(major, minor) {
      var _this = this;
      // alert(major);
      _this.$api
        .getByIbeacon({ major, minor })
        .then(res => {
          console.log(res);
          if (res.data.code == 2000) {
            // alert(res.data.data.voiceExplain.id);
            _this.name = res.data.data.voiceExplain.animalName;
            _this.imgSrc =
              _this.$src + "files/" + res.data.data.voiceExplain.codePath;
            _this.animalId = res.data.data.voiceExplain.animalId;
            _this.$refs.resultAudio.play();
            _this.show = true;
            _this.$refs.yaoImg.src = require("../../../assets/images/[e-mail]");
          }
        })
        .catch(err => {
          throw err;
        });
    },
    tiaozhuan() {
      this.$router.push({
        path: "/bhjy/yyxq/" + this.animalId
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../styles/mixin.scss";
#yyy {
  width: 100%;
  height: 100%;
  text-align: center;
  // background: #2c3030;
}
#yyy .yaoImg {
  width: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
#yyy .text-con {
  width: 80%;
  height: 100px;
  background-color: #3b3c3e;
  border-radius: 5px;
  position: absolute;
  top: 70%;
  left: 10%;
}
.yuyin-img {
  width: 28%;
  height: 80px;
  margin: 10px 0px 0px 10px;
  float: left;
  border: 1px solid #fff;
  border-radius: 5px;
}
.text {
  width: 70%;
  color: #fff;
  font-size: 16px;
  margin-top: 10px;
  line-height: 40px;
}
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
// .bounce-leave-active {
//   animation: bounce-in 0.5s reverse;
// }
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.tips {
  width: 100%;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 5%;
}
</style>