使用微信小程序控制藍(lán)牙小車（微信小程序端）

這篇具有很好參考價值的文章主要介紹了使用微信小程序控制藍(lán)牙小車（微信小程序端）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

使用接口

微信小程序官方開發(fā)文檔

接口	說明
`wx.openBluetoothAdapter`	初始化藍(lán)牙模塊
`wx.closeBluetoothAdapter`	關(guān)閉藍(lán)牙模塊(調(diào)用該方法將斷開所有已建立的連接并釋放系統(tǒng)資源)
`wx.startBluetoothDevicesDiscovery`	開始搜尋附近的藍(lán)牙外圍設(shè)備
`wx.stopBluetoothDevicesDiscovery`	停止搜尋附近的藍(lán)牙外圍設(shè)備。若已經(jīng)找到需要的藍(lán)牙設(shè)備并不需要繼續(xù)搜索時，建議調(diào)用該接口停止藍(lán)牙搜索
`wx.onBluetoothDeviceFound`	監(jiān)聽搜索到新設(shè)備的事件
`wx.createBLEConnection`	連接藍(lán)牙低功耗設(shè)備
`wx.closeBLEConnection`	斷開與藍(lán)牙低功耗設(shè)備的連接
`wx.getBLEDeviceServices`	獲取藍(lán)牙低功耗設(shè)備所有服務(wù)
`wx.getBLEDeviceCharacteristics`	獲取藍(lán)牙低功耗設(shè)備某個服務(wù)中所有特征 (characteristic)
`wx.readBLECharacteristicValue`	讀取藍(lán)牙低功耗設(shè)備特征值的二進(jìn)制數(shù)據(jù)
`wx.writeBLECharacteristicValue`	向藍(lán)牙低功耗設(shè)備特征值中寫入二進(jìn)制數(shù)據(jù)
`wx.showToast`	顯示消息提示框

界面效果

使用微信小程序控制藍(lán)牙小車（微信小程序端）,物聯(lián)網(wǎng),微信小程序,notepad++,小程序,嵌入式,單片機,stm32
圖片素材庫地址

項目目錄列表

界面設(shè)計

在app.json中添加一個新頁面"pages/home/home"

{
  "pages":[
    "pages/home/home",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

設(shè)計界面home.wxml

<!--pages/home/home.wxml-->
<button type="primary" class = "connectBLE" bindtap = "openBluetoothAdapter">連接藍(lán)牙</button>
<button class = "disconnectBLE" bindtap = "closeBluetoothAdapter">斷開藍(lán)牙</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>

畫面渲染home.wxss

/* 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;   /*設(shè)置背景顏色一致*/
  border-color: transparent; /*設(shè)置邊框顏色一致*/
}

.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%;
}

界面邏輯設(shè)計

連接的目標(biāo)藍(lán)牙名稱為ESP_SPP_SERVER

// pages/home/home.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    connected: false,
    serviceId: "",
  },

  //藍(lán)牙初始化
  openBluetoothAdapter() {
    if(this.data.connected)
    {
      return
    }
    wx.openBluetoothAdapter({
      success: (res) => {
        console.log('bluetooth initialization success', res)
        this.startBluetoothDevicesDiscovery()
      },
      fail: (err) => {
        wx.showToast({
          title: '藍(lán)牙適配器初始化失敗',
          icon: 'none'
        })
        return
      }
    })
  },
  //關(guān)閉藍(lán)牙初始化
  closeBluetoothAdapter() {
    wx.closeBluetoothAdapter({
      success: (res) => {
        console.log('bluetooth deinitialization success', res)
      },
      fail: (err) => {
        wx.showToast({
          title: '藍(lán)牙適配器解初始化失敗',
          icon: 'none'
        })
        return
      }
    })
  },
  //開始搜尋附近的藍(lán)牙外圍設(shè)備
  startBluetoothDevicesDiscovery() {
    wx.startBluetoothDevicesDiscovery({
      success: (res) => {
        console.log('startBluetoothDevicesDiscovery success', res)
        this.onBluetoothDeviceFound()
      },
      fail: (err) => {
        wx.showToast({
          title: '藍(lán)牙適配器解初始化失敗',
          icon: 'none'
        })
        return
      }
    })
  },
  //監(jiān)聽搜索到新設(shè)備的事件
  onBluetoothDeviceFound() {
    let found_device = false
    const timer = setTimeout(() => {
      if (!found_device) {
        console.error('未找到設(shè)備');
        wx.showToast({
          title: '未找到設(shè)備',
          icon: 'none'
        })
      }
    }, 2000); // 設(shè)置定時器為10秒
  
    wx.onBluetoothDeviceFound((res) => {
      res.devices.forEach(device => {
        if (device.name === 'ESP_SPP_SERVER') {
          console.log('find target device')
          found_device = true; // 找到目標(biāo)設(shè)備，將標(biāo)志變量設(shè)置為已找到
          clearTimeout(timer); // 取消定時器
          this.createBLEConnection(device.deviceId)
        }
      });
    });
  },
  //連接藍(lán)牙低功耗設(shè)備
  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: '建立藍(lán)牙連接失敗',
          icon: 'none'
        })
      }
    })
  },
  //獲取藍(lán)牙低功耗設(shè)備所有服務(wù)
  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)
      }
    })
  },
  //獲取藍(lán)牙低功耗設(shè)備某個服務(wù)中所有特征
  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)
      }
    })
  },
  //關(guān)閉藍(lán)牙服務(wù)
  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: '藍(lán)牙未連接',
        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)
      }
    })
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {

  },
})

20231113 優(yōu)化改成按下車動，松開車停文章來源地址http://www.zghlxwxcb.cn/news/detail-751472.html

修改文件home.wxml

<!--pages/home/home.wxml-->
<button type="primary" class = "connectBLE" bindtap = "openBluetoothAdapter">連接藍(lán)牙</button>
<button class = "disconnectBLE" bindtap = "closeBluetoothAdapter">斷開藍(lán)牙</button>  

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

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

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

<view>
  <button class="custom-button" style="bottom: 40px; left: 35%" bindtouchstart = "btnClickRight" bindtouchend = "btnClickStop">
    <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>