使用微信小程序控制蓝牙小车(微信小程序端)

目录

使用接口

微信小程序官方开发文档

接口 说明
wx.openBluetoothAdapter 初始化蓝牙模块
wx.closeBluetoothAdapter 关闭蓝牙模块(调用该方法将断开所有已建立的连接并释放系统资源)
wx.startBluetoothDevicesDiscovery 开始搜寻附近的蓝牙外围设备
wx.stopBluetoothDevicesDiscovery 停止搜寻附近的蓝牙外围设备。若已经找到需要的蓝牙设备并不需要继续搜索时,建议调用该接口停止蓝牙搜索
wx.onBluetoothDeviceFound 监听搜索到新设备的事件
wx.createBLEConnection 连接蓝牙低功耗设备
wx.closeBLEConnection 断开与蓝牙低功耗设备的连接
wx.getBLEDeviceServices 获取蓝牙低功耗设备所有服务
wx.getBLEDeviceCharacteristics 获取蓝牙低功耗设备某个服务中所有特征 (characteristic)
wx.readBLECharacteristicValue 读取蓝牙低功耗设备特征值的二进制数据
wx.writeBLECharacteristicValue 向蓝牙低功耗设备特征值中写入二进制数据
wx.showToast 显示消息提示框

界面效果


图片素材库地址

项目目录列表

界面设计

  1. app.json中添加一个新页面"pages/home/home"
javascript 复制代码
{
  "pages":[
    "pages/home/home",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
  1. 设计界面home.wxml
xml 复制代码
<!--pages/home/home.wxml-->
<button type="primary" class = "connectBLE" bindtap = "openBluetoothAdapter">连接蓝牙</button>
<button class = "disconnectBLE" bindtap = "closeBluetoothAdapter">断开蓝牙</button>  

<button class="custom-button" style="bottom: -395px" bindtap = "btnClickDown">
  <image class="button-image" src="/image/doubledown.png"></image>
</button>

<button class="custom-button" style="bottom: -15px" bindtap = "btnClickUp">
  <image class="button-image" src="/image/doubleup.png"></image>
</button>

<view>
  <button class="custom-button" style="bottom: -60px; left: -35%" bindtap = "btnClickLeft">
    <image class="button-image-1" src="/image/doubleleft.png"></image>
  </button>
</view>

<view>
  <button class="custom-button" style="bottom: 40px; left: 35%" bindtap = "btnClickRight">
    <image class="button-image-1" src="/image/doubleright.png"></image>
  </button>
</view>

<view>
  <button class="custom-button" style="bottom: 134px; left: 0%" bindtap = "btnClickStop">
    <image class="button-image-2" src="/image/remove.png"></image>
  </button>
</view>
  1. 画面渲染home.wxss
css 复制代码
/* pages/home/home.wxss */
.connectBLE {
  width: 49% !important;
  float: left;
  font-size: 100;
}

.disconnectBLE {
  width: 49% !important;
  float: right;
  font-size: 100;
  color: red;
}

.custom-button {
  position: relative;
  width: 100px;
  height: 100px;
  border: none;
  padding: 0;
  overflow: hidden;
  background: transparent;   /*设置背景颜色一致*/
  border-color: transparent; /*设置边框颜色一致*/
}

.button-image {
  object-fit: contain;
  width: 75%;
  height: 110%;
}

.button-image-1 {
  object-fit: contain;
  width: 75%;
  height: 110%;
}

.button-image-2 {
  object-fit: contain;
  width: 60%;
  height: 100%;
}

界面逻辑设计

连接的目标蓝牙名称为ESP_SPP_SERVER

javascript 复制代码
// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    connected: false,
    serviceId: "",
  },

  //蓝牙初始化
  openBluetoothAdapter() {
    if(this.data.connected)
    {
      return
    }
    wx.openBluetoothAdapter({
      success: (res) => {
        console.log('bluetooth initialization success', res)
        this.startBluetoothDevicesDiscovery()
      },
      fail: (err) => {
        wx.showToast({
          title: '蓝牙适配器初始化失败',
          icon: 'none'
        })
        return
      }
    })
  },
  //关闭蓝牙初始化
  closeBluetoothAdapter() {
    wx.closeBluetoothAdapter({
      success: (res) => {
        console.log('bluetooth deinitialization success', res)
      },
      fail: (err) => {
        wx.showToast({
          title: '蓝牙适配器解初始化失败',
          icon: 'none'
        })
        return
      }
    })
  },
  //开始搜寻附近的蓝牙外围设备
  startBluetoothDevicesDiscovery() {
    wx.startBluetoothDevicesDiscovery({
      success: (res) => {
        console.log('startBluetoothDevicesDiscovery success', res)
        this.onBluetoothDeviceFound()
      },
      fail: (err) => {
        wx.showToast({
          title: '蓝牙适配器解初始化失败',
          icon: 'none'
        })
        return
      }
    })
  },
  //监听搜索到新设备的事件
  onBluetoothDeviceFound() {
    let found_device = false
    const timer = setTimeout(() => {
      if (!found_device) {
        console.error('未找到设备');
        wx.showToast({
          title: '未找到设备',
          icon: 'none'
        })
      }
    }, 2000); // 设置定时器为10秒
  
    wx.onBluetoothDeviceFound((res) => {
      res.devices.forEach(device => {
        if (device.name === 'ESP_SPP_SERVER') {
          console.log('find target device')
          found_device = true; // 找到目标设备,将标志变量设置为已找到
          clearTimeout(timer); // 取消定时器
          this.createBLEConnection(device.deviceId)
        }
      });
    });
  },
  //连接蓝牙低功耗设备
  createBLEConnection(deviceId) {
    wx.createBLEConnection({
      deviceId,
      success:() => {
        this.setData({
          connected: true,
        })
        console.log('connect device success')
        this.getBLEDeviceServices(deviceId)
        wx.stopBluetoothDevicesDiscovery()
      },
      fail:(err) => {
        wx.showToast({
          title: '建立蓝牙连接失败',
          icon: 'none'
        })
      }
    })
  },
  //获取蓝牙低功耗设备所有服务
  getBLEDeviceServices(deviceId) {
    wx.getBLEDeviceServices({
      deviceId,
      success:(res) => {
        for (let i = 0; i < res.services.length; i++) {
          if(res.services[i].isPrimary) {
            this.getBLEDeviceCharacteristics(deviceId, res.services[i].uuid)
            return
          }
        }
      },
      fail:(res) => {
        console.log('getBLEDeviceServices fail', res.errMsg)
      }
    })
  },
  //获取蓝牙低功耗设备某个服务中所有特征
  getBLEDeviceCharacteristics(deviceId, serviceId) {
    wx.getBLEDeviceCharacteristics({
      deviceId,
      serviceId,
      success: (res) => {
        for (let i = 0; i < res.characteristics.length; i++) {
          let item = res.characteristics[i]
          if(item.properties.read) {
            wx.readBLECharacteristicValue({
              deviceId,
              serviceId,
              characteristicId: item.uuid,
            })
          }
          if(item.properties.write)
          {
            this._deviceId = deviceId
            this._serviceId = serviceId
            this._characteristicId = item.uuid
          }
        }
      },
      fail:(res) => {
        console.log('get characteristicId fail', res.errMsg)
      }
    })
  },
  //关闭蓝牙服务
  closeBluetoothAdapter() {
    wx.closeBLEConnection({
      deviceId: this._deviceId,
      success: (res) => {
        console.log('disconnect success')
      },
      fail: (res) => {
        console.log('disconnect fail',res.errMsg)
      }
    })
    wx.closeBluetoothAdapter({
      success: (res) => {
        console.log('close success')
      },
      fail: (res) => {
        console.log('close fail',res.errMsg)
      }
    })
    this.data.connected = false
    console.log('close connection')
  },

  btnClickDown() {
    this.tipsBluetoothWarn()
    this.writeBluetoothValue('down')
    console.log('click down')
  },
  btnClickUp() {
    this.tipsBluetoothWarn()
    this.writeBluetoothValue('up')
    console.log('click up')
  },
  btnClickLeft() {
    this.tipsBluetoothWarn()
    this.writeBluetoothValue('left')
    console.log('click left')
  },
  btnClickRight() {
    this.tipsBluetoothWarn()
    this.writeBluetoothValue('right')
    console.log('click right')
  },
  btnClickStop() {
    this.tipsBluetoothWarn()
    this.writeBluetoothValue('stop')
    console.log('click stop')
  },
  tipsBluetoothWarn()
  {
    if(!this.data.connected)
    {
      wx.showToast({
        title: '蓝牙未连接',
        icon: 'none'
      })
    }
  },
  writeBluetoothValue(value) {
    if(!this.data.connected)
    {
      return
    }
    const buffer = new ArrayBuffer(value.length)
    const dataView = new DataView(buffer)
    for (let i = 0; i < value.length; i++) {
      dataView.setUint8(i, value.charCodeAt(i))
    }
    wx.writeBLECharacteristicValue({
      deviceId: this._deviceId,
      serviceId: this._serviceId,
      characteristicId: this._characteristicId,
      value: buffer,
      success (res) {
        console.log('writeBLECharacteristicValue success', res.errMsg)
      },
      fail (res) {
        console.log('writeBLECharacteristicValue fail', res.errMsg, res.errCode)
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
})
相关推荐
Hello_Embed14 小时前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
破无差16 小时前
《赛事报名系统小程序》
小程序·html·uniapp
矢志不移79216 小时前
裸机开发 时钟配置,EPIT
单片机·嵌入式硬件
清风66666617 小时前
基于STM32的APP遥控视频水泵小车设计
stm32·单片机·mongodb·毕业设计·音视频·课程设计
00后程序员张17 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬18 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063218 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI19 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_1772972206920 小时前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld20 小时前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐