快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能示例詳解

更新時(shí)間：2023年06月12日 10:56:51 作者：Java?Fans

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1、在小程序的app.json文件中添加藍(lán)牙權(quán)限

在app.json中寫入如下代碼

  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息將用于小程序定位"
    },
    "scope.bluetooth": {
      "desc": "你的藍(lán)牙信息將用于小程序連接設(shè)備"
    }
  },

2、新建一個(gè)展示藍(lán)牙列表的界面 index

在pages目錄下，新建一個(gè)Page，命名為index，生成如下文件：

2.1、在index.wxml文件中，添加如下代碼：

<view class="container">
  <view class="title">藍(lán)牙設(shè)備列表</view>
  <view class="list">
    <block wx:for="{{devices}}" wx:key="index">
      <view class="item" bindtap="connectDevice" data-device="{{item}}">
        <view class="name">{{item.name}}</view>
        <view class="rssi">信號(hào)強(qiáng)度：{{item.RSSI}}</view>
      </view>
    </block>
  </view>
</view>

2.2、在index.wxss文件中添加如下代碼：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.list {
  width: 100%;
}
.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.name {
  font-size: 16px;
  font-weight: bold;
}
.rssi {
  font-size: 14px;
  color: #999;
}

2.3、在index.js文件中相關(guān)代碼及說明

第一步：藍(lán)牙初始化，wx.openBluetoothAdapter(Object object);

初始化藍(lán)牙模塊。iOS 上開啟主機(jī)/從機(jī)（外圍設(shè)備）模式時(shí)需分別調(diào)用一次，并指定對(duì)應(yīng)的 mode。

  // 第一步，藍(lán)牙初始化成功
  onLoad: function () {
    wx.openBluetoothAdapter({
      success: (res) => {
        console.log('第一步，藍(lán)牙初始化成功', res)
        //開始搜索附近藍(lán)牙
        this.startBluetoothDevicesDiscovery()
      },
      fail: (res) => {
        console.log("第一步、藍(lán)牙初始化失敗", res);
        wx.showToast({ title: '藍(lán)牙初始化失敗', icon: 'none' })
      }
    })
  },

注意

其他藍(lán)牙相關(guān) API 必須在 wx.openBluetoothAdapter 調(diào)用之后使用。否則 API 會(huì)返回錯(cuò)誤（errCode=10000）。

在用戶藍(lán)牙開關(guān)未開啟或者手機(jī)不支持藍(lán)牙功能的情況下，調(diào)用 wx.openBluetoothAdapter 會(huì)返回錯(cuò)誤（errCode=10001），表示手機(jī)藍(lán)牙功能不可用。此時(shí)小程序藍(lán)牙模塊已經(jīng)初始化完成，可通過 wx.onBluetoothAdapterStateChange 監(jiān)聽手機(jī)藍(lán)牙狀態(tài)的改變，也可以調(diào)用藍(lán)牙模塊的所有API。

第二步：開始搜索附近的藍(lán)牙設(shè)備，wx.startBluetoothDevicesDiscovery(Object object)

開始搜尋附近的藍(lán)牙外圍設(shè)備。

此操作比較耗費(fèi)系統(tǒng)資源，請(qǐng)?jiān)谒阉鞯叫枰脑O(shè)備后及時(shí)調(diào)用 wx.stopBluetoothDevicesDiscovery 停止搜索

  // 第二步 開始搜索附近的藍(lán)牙設(shè)備
  startBluetoothDevicesDiscovery() {
    wx.startBluetoothDevicesDiscovery({
      allowDuplicatesKey: false,
      success: (res) => {
        console.log('開始搜索附近的藍(lán)牙設(shè)備', res)
        this.onBluetoothDeviceFound()
      },
    })
  },

注意

考慮到藍(lán)牙功能可以間接進(jìn)行定位，安卓 6.0 及以上版本，無定位權(quán)限或定位開關(guān)未打開時(shí)，無法進(jìn)行設(shè)備搜索。這種情況下，安卓 8.0.16 前，接口調(diào)用成功但無法掃描設(shè)備；8.0.16 及以上版本，會(huì)返回錯(cuò)誤。

第三步：監(jiān)聽發(fā)現(xiàn)附近的藍(lán)牙設(shè)備，wx.onBluetoothDeviceFound(function listener)

監(jiān)聽搜索到新設(shè)備的事件

  // 第三步 監(jiān)聽發(fā)現(xiàn)附近的藍(lán)牙設(shè)備
  onBluetoothDeviceFound() {
    wx.onBluetoothDeviceFound((res) => {
      res.devices.forEach(device => {
        if (!device.name && !device.localName) { return }
        console.log("發(fā)現(xiàn)的藍(lán)牙設(shè)備", device)
        this.data.devices.push(device)
        this.setData({ devices: this.data.devices })
      })
    })
  },

注意

若在 wx.onBluetoothDeviceFound 回調(diào)了某個(gè)設(shè)備，則此設(shè)備會(huì)添加到 wx.getBluetoothDevices 接口獲取到的數(shù)組中。

第四步：建立連接，wx.createBLEConnection(Object object)

連接藍(lán)牙低功耗設(shè)備。

若小程序在之前已有搜索過某個(gè)藍(lán)牙設(shè)備，并成功建立連接，可直接傳入之前搜索獲取的 deviceId 直接嘗試連接該設(shè)備，無需再次進(jìn)行搜索操作。

  // 第四步、 建立連接
  connectDevice: function (e) {
    const device = e.currentTarget.dataset.device
    wx.createBLEConnection({
      deviceId: device.deviceId,
      success: (res) => {
        console.log('createBLEConnection success', res)
        wx.showToast({ title: '藍(lán)牙連接成功', icon: 'none' })
        this.stopBluetoothDevicesDiscovery()
        wx.navigateTo({
          url: '/pages/main/main?deviceId=' + device.deviceId
        })
      },
      fail: (res) => {
        wx.showToast({ title: '藍(lán)牙連接失敗', icon: 'none' })
      }
    })
  },

注意

請(qǐng)保證盡量成對(duì)的調(diào)用 wx.createBLEConnection 和 wx.closeBLEConnection 接口。安卓如果重復(fù)調(diào)用 wx.createBLEConnection 創(chuàng)建連接，有可能導(dǎo)致系統(tǒng)持有同一設(shè)備多個(gè)連接的實(shí)例，導(dǎo)致調(diào)用 closeBLEConnection 的時(shí)候并不能真正的斷開與設(shè)備的連接。

藍(lán)牙連接隨時(shí)可能斷開，建議監(jiān)聽 wx.onBLEConnectionStateChange 回調(diào)事件，當(dāng)藍(lán)牙設(shè)備斷開時(shí)按需執(zhí)行重連操作。

若對(duì)未連接的設(shè)備或已斷開連接的設(shè)備調(diào)用數(shù)據(jù)讀寫操作的接口，會(huì)返回 10006 錯(cuò)誤，建議進(jìn)行重連操作。

第五步：停止搜索，wx.stopBluetoothDevicesDiscovery(Object object)

停止搜尋附近的藍(lán)牙外圍設(shè)備。若已經(jīng)找到需要的藍(lán)牙設(shè)備并不需要繼續(xù)搜索時(shí)，建議調(diào)用該接口停止藍(lán)牙搜索。

  // 第五步、 停止搜索
  stopBluetoothDevicesDiscovery(){
    wx.stopBluetoothDevicesDiscovery({
      success: function(res) {
        console.log('停止搜索成功');
      },
      fail: function(res) {
        console.log('停止搜索失敗');
      }
    });
  }

其中，devices在data中定義如下：