微信小程序搜索蓝牙设备

上一篇 微信小程序初始化蓝牙模块

本片介绍微信小程序怎么去搜索蓝牙设备。

一、data 里面定义三个参数：isStartBluetoothdeviceDiscovery是开已经开始搜索蓝牙设备，blueName是指定要搜索蓝牙设备名（可以指定多个）主要是过滤蓝牙设备，bluetoothDeviceList是搜索到的蓝牙设备的列表用于页面展示搜索到的蓝牙设备

isStartBluetoothdeviceDiscovery: false, //是否开始搜索蓝牙设备

blueName:['S5-4'], //指定搜索蓝牙名称

bluetoothDeviceList:[],  //搜索的蓝牙设备列表

deviceId:'', //连接的蓝牙设备id

二、onload 中自定义搜索到新设备的事件的全部监听 onBluetoothDeviceFoundCallback 代码，这里需要注意到一个问题：安卓和IOS的 搜索到的蓝牙设备ID不一样的问题，我的代码是做了特殊处理显示成一样的MAC地址

    //搜索到新设备的事件的全部监听
    Bluetooth.onBluetoothDeviceFoundCallback = function(res){
      console.log('监听搜索到新设备的事件', res);
      Bluetooth.getBluetoothDevices().then(
        function(res) {
          //console.log('获取蓝牙设备列表', res);
          // 获取设备MAC地址
          //获取设备基础信息
          let deviceInfo = wx.getDeviceInfo();
          let platform = deviceInfo.platform;
          let iosDevice = (platform=='ios');
          var bluetoothDeviceList = that.data.bluetoothDeviceList; //数据列表，可以自己定义
          for (var i = 0; i < res.devices.length; i++) {
            let device = res.devices[i];
            if (device) {
              let deviceName = device.name || device.localName;
              let isTrue = false;
              let blueName = that.data.blueName;
              if(blueName.length>0)
              {
                blueName.forEach(item=>{
                  if(deviceName.startsWith(item))
                  {
                    isTrue = true;
                  }
                })
              }
              else
              {
                isTrue = true;
              }
              if (isTrue)
              {
                // 获取设备MAC地址(这里保持IOS和安卓一致)
                let deviceMac = '';
                if(iosDevice)
                {
                  if(deviceName.startsWith('S5-4'))
                  {
                    deviceMac = util.ab2hex(device.advertisData.slice(2, 8), ':').toUpperCase();
                  }
                }
                else
                {
                  deviceMac = device.deviceId
                }
                const idx = util.inArray(bluetoothDeviceList, 'deviceId', device.deviceId)
                if (idx === -1) {
                  device.deviceMac = deviceMac;
                  bluetoothDeviceList.push(device);
                } 
                console.log('设备已搜索到', deviceName, deviceMac, device, util.ab2hex(device.advertisData, ':'));
                that.setData({ bluetoothDeviceList: bluetoothDeviceList });
              }
            }
          }
        }
      )
    };

 三、搜索设备和停止搜索按钮事件的代码

  //搜索设备
  startBluetoothdeviceDiscovery(){
    var that=this;
    that.seeConsole('开始搜索设备');
    Bluetooth.startBluetoothdeviceDiscovery().then(
      function(res){
        that.setData({
          isStartBluetoothdeviceDiscovery:true
        });
        //监听搜索到新设备的事件
        Bluetooth.onBluetoothDeviceFound();
      },
      function(err){
        
      }
    );
  },
  //搜索设备 按钮事件
  searchDeviceClick()
  {
    var that=this;
    Bluetooth.CheckSystemInfo().then(res=>{
      if(res)
      {
        that.setData({
          bluetoothDataList:[]
        })
        that.startBluetoothdeviceDiscovery();
      }
    });
  },
  //停止搜索
  stopBluetoothDevicesDiscovery()
  {
    var that=this;
    that.seeConsole('停止搜索设备')
    Bluetooth.stopBluetoothDevicesDiscovery().then(
      function(res){
        that.setData({
          isBluetoothDevicesDiscovery: false
        });
        //移除搜索到新设备的事件的全部监听函数
        Bluetooth.offBluetoothDeviceFound();
      },
      function(err){
        
      }
    );
  },
  //停止搜索 按钮事件
  stopSearchDeviceClick()
  {
    var that=this;
    let isStartBluetoothdeviceDiscovery = that.data.isStartBluetoothdeviceDiscovery;
    if(isStartBluetoothdeviceDiscovery)
    {
      Bluetooth.CheckSystemInfo().then(res=>{
        if(res)
        {
          that.stopBluetoothDevicesDiscovery();
        }
      });
    }
    else
    {
      wx.showModal({
        content: '请先点击搜索设备',
        showCancel:false,
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
          } 
        }
      });
    }
  },
  //选择设备
  selectDevice(e){
    var deviceId = e.currentTarget.dataset.id;
    //console.log(deviceId);
    this.setData({deviceId:deviceId});
  },

四、页面相关代码

 <view class="event-bar" list-item>
    <view class="view_left">
      <button class="btn_bg" bindtap="searchDeviceClick">搜索设备</button>
    </view>
    <view class="view_right">
      <button class="btn_bg" bindtap="stopSearchDeviceClick">停止搜索</button>
    </view>
  </view>
  <view class="scan-list" list-item>
    <view class="list_view {{item.deviceId==deviceId?'list_view_select':'list_view_no'}}" wx:for="{{bluetoothDeviceList}}" wx:for-item="item" wx:key="unique" data-id="{{item.deviceId}}" bindtap="selectDevice">
      <view class='list-group'>
        <view class='list-left'>
          <image src='../../images/bluetooth.png' class='img'></image>
        </view>
        <view class='list-right'>
          <view>
            <view class='title'>
              <view class="name">{{item.name? item.name : item.localname}}</view>
              <view class="rssi">信号强度: {{(item.RSSI + 100)>0?(item.RSSI + 100):0}}%</view>
            </view>
            <view class='title'>{{item.model}}</view>
          </view>
          <view class='desc'>{{item.deviceMac}}</view>
        </view>
      </view>
    </view>
  </view>

五、样式相关代码

.event-bar{
  display: flex;
  flex-flow: nowrap;
  justify-content: center;
}
.btn_bg {
  width: 100%!important;
  background-color: #f8f8f8;
  color: #000;
  text-align: center;
  padding: 10rpx;
  border:1rpx #ccc solid;
}
.view_left{
  flex-grow: 1;
  padding: 10rpx;
}
.view_right{
  flex-grow: 1;
  padding: 10rpx;
}
.scan-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.list_view{
  border-radius: 20rpx;
  /* border: 1rpx solid #ccc; */
  margin: 5rpx 5rpx 0rpx 5rpx;
}

.list_view_no {
  background-color: white;
}
.list_view_select {
  background-color: rgb(235, 231, 231);
}

.list-group {
  display: flex;
  padding: 5px 5px;
  align-items: center;
}

.list-left {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  font-size:12px;
}
.list-right {
  flex:1;
}

.radio_group{
  display: flex;
  flex-direction: column;
}
.radio-label{
  display: flex;
  padding: 5px 0px;
}
.radio-text{
  flex: 1;
  font-size: 12px;
  margin-top: 5px;
  color: #7a7a7a;
}
.img{
  width:70%;
  height:70%;
 }
.title {
  font-size: 14px;
  /* display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.name {
  font-weight: bold;
}
.rssi {
  color: #999;
}
.desc {
  font-size: 12px;
  color: #7a7a7a;
  margin-top: 3px;
}

下一篇将继续介绍 微信小程序连接蓝牙设备