小程序点击“申请蓝牙”按钮,调用api获取蓝牙列表。
微信开发者工具需要真机调试才能用,开发者工具预览的没用。
本来想在点击按钮后增加一个遮罩,蓝牙列表查完后关掉。但是没能有效实现,大神可以补充下。
<template>
<view style="height: 100vh; padding-top: 80rpx;">
<button @click="applyBluetooth" style="margin-top: 80px;">申请蓝牙</button>
<view class="table-body">
<view class="table-item" v-for="(item,index) in bluetoothList" :key="index">
{{item.name}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bluetoothList: []
}
},
methods: {
/** 申请蓝牙 */
async applyBluetooth() {
await this.$modal.loading("正在搜索蓝牙设备");
await this.openBluetoothAdapter(this).then(() => {
this.$modal.closeLoading()
});
},
/** 初始化蓝牙模块 */
async openBluetoothAdapter(_this) {
await uni.openBluetoothAdapter({
// 蓝牙已打开
success: (res) => {
// 获取本机蓝牙适配器状态
_this.getBluetoothAdapterState(_this);
},
// 蓝牙未打开
fail: err => {
this.$modal.msg("请检查手机蓝牙是否打开");
}
})
},
/** 获取本机蓝牙适配器状态 */
async getBluetoothAdapterState(_this) {
await uni.getBluetoothAdapterState({
success: (res) => {
// 开始搜索蓝牙设备
_this.startBluetoothDevicesDiscovery(_this);
},
fail: err => {
this.$modal.msg("请检查手机蓝牙是否打开");
}
});
},
/** 开始搜寻附近的蓝牙外围设备 */
async startBluetoothDevicesDiscovery(_this) {
await uni.startBluetoothDevicesDiscovery({
success: (res) => {
// 延迟一秒获取蓝牙列表
setTimeout(() => {
// 获取设备列表
_this.getBluetoothDevices(_this);
}, 1000);
},
fail: (err) => {
console.log(err);
}
})
},
/** 获取在蓝牙模块生效期间所有已发现的蓝牙设备 */
async getBluetoothDevices(_this) {
await uni.getBluetoothDevices({
success: function (res) {
_this.bluetoothList = res.devices;
},
fail: function () {
this.$modal.msg("搜索蓝牙设备失败或附件暂无开启的蓝牙设备");
},
complete: function () {
// 停止搜寻附近的蓝牙外围设备
_this.stopBluetoothDevicesDiscovery();
}
})
},
/** 停止搜寻附近的蓝牙外围设备 */
async stopBluetoothDevicesDiscovery() {
await uni.stopBluetoothDevicesDiscovery({
success(res) {
}
})
}
}
}
</script>
<style lang="scss" scoped>
.table-body {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30rpx;
height: calc(100vh - 350rpx);
overflow: scroll;
.table-item {
width: 650rpx;
height: 90rpx;
line-height: 90rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 30rpx 14rpx rgba(236, 235, 236, 0.25);
border-radius: 45rpx;
padding-left: 50rpx;
margin-bottom: 20rpx;
}
}
</style>