微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能示例詳解
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中定義如下:
data: { devices: [] },
3、測(cè)試
選擇整機(jī)調(diào)試,效果圖如下:
到此這篇關(guān)于微信小程序——實(shí)現(xiàn)藍(lán)牙設(shè)備搜索及連接功能的文章就介紹到這了,更多相關(guān)微信小程序藍(lán)牙連接內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Js數(shù)組的操作push,pop,shift,unshift等方法詳細(xì)介紹
js中針對(duì)數(shù)組操作的方法還是比較多的,今天突然想到來總結(jié)一下,也算是溫故而知新吧。不過不會(huì)針對(duì)每個(gè)方法進(jìn)行講解,我只是選擇其中的一些來講,感興趣的朋友可以研究一下2012-12-12總結(jié)JavaScript中布爾操作符||與&&的使用技巧
這篇文章主要介紹了總結(jié)JavaScript中布爾操作符||與&&的使用技巧,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-11-11JavaScript字符串操作的四個(gè)實(shí)用技巧
在制作前端頁面的過程中,經(jīng)常需要用到JavaScript進(jìn)行邏輯處理,很多時(shí)候都需要對(duì)字符串進(jìn)行操作,這篇文章主要給大家介紹了關(guān)于JavaScript字符串操作的四個(gè)實(shí)用技巧,需要的朋友可以參考下2021-07-07js實(shí)現(xiàn)網(wǎng)頁自動(dòng)刷新可制作節(jié)日倒計(jì)時(shí)效果
這篇文章主要介紹了通過js實(shí)現(xiàn)的網(wǎng)頁自動(dòng)刷新,利用此功能可制作節(jié)日倒計(jì)時(shí)效果,需要的朋友可以參考下2014-05-05JavaScript中的this例題實(shí)戰(zhàn)總結(jié)詳析
使用JavaScript開發(fā)的時(shí)候,很多人多多少少都會(huì)被this的指向問題搞蒙圈,下面這篇文章主要給大家介紹了關(guān)于JavaScript中this例題實(shí)戰(zhàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06詳解JS如何實(shí)現(xiàn)文字溢出時(shí)用省略號(hào)...顯示
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)當(dāng)文本內(nèi)容過長時(shí),中間顯示省略號(hào)...,兩端正常展示,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02