基于ibeacons签到系统

基于ibeacons签到系统
具体功能：
老师：发起签到，结束签到和查看签到人数
学生：进行签到
硬件：ibeacons一个
软件：
整体分为2部分，通过不同的账号登录，区分人员身份，这个主要利用的是全局的变量。在app.js设置具体的变量

globalData: {
    userInfo: null,
    tag:1,//tag代表签到状态  1未发起签到   2是发起签到
    count:0//count代表签到的人数  默认为0
  }

老师部分的代码
（1）wxml

<view class="scan">
    <view class="time-section">
        <view class="time">
            <view class="hourminuts">
                <text>{
   {hours}}:{
   {minutes}}</text>
            </view>
            <view class="seconds">
                <text>{
   {seconds}}</text>
            </view>
        </view>
        <view class="date">
            <text>{
   {month}}月{
   {day}}日  {
   {week}}</text>
        </view>
        
    </view>
    <view class="footer">
        <button class="to-clock" hover-class="hover-to-clock" bindtap="toClock">发起签到</button>
        <button class="to-clock" hover-class="hover-to-clock" bindtap="todistance">结束签到</button>
        <button class="to-clock" hover-class="hover-to-clock" bindtap="todistance1">签到人数</button>
    </view>

     <view class="date">
            <text>{
   {count4}}</text>
        </view>
</view>

（2）js代码
发起签到

//发起签到
toClock(){
  //tag==2发起签到
  app.globalData.tag=2
  console.log(app.globalData.tag)
  wx.showToast({
    title: '发起签到成功',
    icon: 'loading',
    duration: 2000
}) 
  // var that = this
  // that.timing()
  },

结束签到

  todistance(){
    //tag==1结束签到
    app.globalData.tag=1
    console.log(app.globalData.tag) 
    wx.showToast({
      title: '结束签到成功',
      icon: 'loading',
      duration: 2000
  }) 
    // var that = this
    // clearTimeout(that.con)  
  },

查看签到人数

//查看签单人数
  todistance1(){
    var count2=app.globalData.count
    var count3="签到总人数："+count2
    var that=this
    that.setData({
      count4:count3
    })
  },

学生部分代码
（1）wxml

<view class="scan">
    <view class="time-section">
        <view class="time">
            <view class="hourminuts">
                <text>{
   {hours}}:{
   {minutes}}</text>
            </view>
            <view class="seconds">
                <text>{
   {seconds}}</text>
            </view>
        </view>
        <view class="date">
            <text>{
   {month}}月{
   {day}}日  {
   {week}}</text>
        </view>
        
    </view>
    <view class="footer">
        <button class="to-clock" hover-class="hover-to-clock" bindtap="toClock">签到</button>
    </view>

     <view class="date">
            <text>{
   {diatance}}</text>
        </view>
</view>

（2）js代码
这部分代码涉及搜索ibeacons，连接ibeacons，连接成功则签到就成功，人数获取全局的变量+1就可以，代码如下：

  //发现ibeacons
    wx.startBeaconDiscovery({
      //设置ibeacons的参数
      uuids: ['E2C56DB5-DFFB-48D2-B060-D0F5A71096E0'],
      //连接成功
      success: function () {
        console.log("开始扫描设备")
        //监听iBeacon设备的更新事件
        wx.onBeaconUpdate(function (res) {
          if (res && res.beacons && res.beacons.length > 0) {
             console.log("设备的uuid是："+res.beacons[0].uuid)
             console.log("距离ibeacons的距离是："+res.beacons[0].accuracy)
            var distance=res.beacons[0].accuracy
            //距离在3米
            if(distance<3){
              wx.showToast({
                title: '签到成功',
                icon: 'loading',
                duration: 2000
            })   
            //签到成功  人数+1
              app.globalData.count=app.globalData.count+1
              console.log("签到人数"+app.globalData.count)
            }else{
              wx.showToast({
                title: '努力搜索中',
                icon: 'loading',
                duration: 2000
            })        
            }
          }
        })
      },
      fail:function(){
        wx.showToast({
          title: '没进入设备范围',
          icon: 'fail',
          duration: 500
        })
      }
    }),

实现效果和整个案例微信公众号搜索：小白XBIT即可获取