使用微信小程序控制蓝牙小车（微信小程序端）

目录

  • 使用接口
  • 界面效果
  • 界面设计
  • 界面逻辑设计

使用接口

微信小程序官方开发文档

接口说明
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"
{"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
<!--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
/* 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

// 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 = falseconst 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 = deviceIdthis._serviceId = serviceIdthis._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 = falseconsole.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) {},
})

20231113 优化改成按下车动，松开车停

  1. 修改文件home.wxml
<!--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" 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/171935.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python--集合----无序，去重，空集合只能用set()方法

Python--集合----无序，去重，空集合只能用set()方法

集合&#xff08;set&#xff09;是一个无序的不重复元素序列。 特点&#xff1a;天生去重 无序 集合定义&#xff1a;在Python中&#xff0c;我们可以使用一对花括号 {} 或者 set()方法 来定义集合&#xff0c; 但是如果你 定义的集合是一个 空集合&#xf…
阅读更多...
任意注册漏洞

任意注册漏洞

目录 一漏洞介绍 二实战演示 三漏洞修复 本文由掌控安全学院 - 小博 投稿 一漏洞介绍 1.未验证邮箱/手机号 情景&#xff1a;应用为了方便用户记录用户名&#xff0c;使用邮箱和手机号作为用户名&#xff08;因此很多应用在注册的时候就要求用户填写&#xff0c;多数时候…
阅读更多...
Linux ____03、文件类型、属性、修改文件属性（更改文件权限）（命令）

Linux ____03、文件类型、属性、修改文件属性（更改文件权限）（命令）

文件类型、属性、修改文件属性 一、文件类型二、文件属性三、修改文件属性1、chgrp&#xff1a;更改文件属组2、chown&#xff1a;更改文件属主&#xff0c;也可以同时更改文件属组3、chmod&#xff1a;更改文件9个属性————————如觉不错&#xff0c;随手点赞&#xff…
阅读更多...
【JavaEE】Servlet API 详解（HttpServletRequest类）

【JavaEE】Servlet API 详解（HttpServletRequest类）

二、HttpServletRequest Tomcat 通过 Socket API 读取 HTTP 请求(字符串), 并且按照 HTTP 协议的格式把字符串解析成 HttpServletRequest 对象&#xff08;内容和HTTP请求报文一样&#xff09; 1.1 HttpServletRequest核心方法 1.2 方法演示 WebServlet("/showRequest&…
阅读更多...
功能强大的国产API管理神器 Eolink，亲测好用

功能强大的国产API管理神器 Eolink，亲测好用

前言 大家好&#xff0c;我是小月&#xff0c;今天给大家讲讲最近很火的Eolink&#xff0c;一款功能强大且非常实用的国产 API管理工具。在我们日常的前端、后端开发测试过程中经常会用到API&#xff0c;特别是在大型项目中API管理工具也就必不可少。工欲善其事必先利其器&…
阅读更多...
SAP 70策略测试简介

SAP 70策略测试简介

在前面的文章中我们已经测试了10、11、20、40、50、52、60、62策略的测试，接下来我们需要对70策略进行测试，很多的项目中也都会用到70策略。 70策略是一种比较常见的、基于按库存且主要用于半成品或者原材料的计划策略。 我们还是按照之前的惯例，先看下70策略的后台配置 我…
阅读更多...
Linux环境实现mysql所在服务器定时同步数据文件到备份服务器（异地容灾备份场景）

Linux环境实现mysql所在服务器定时同步数据文件到备份服务器（异地容灾备份场景）

目录 概述 1、建立ssh连接 1.1、操作mysql所在服务器 1.2、操作备份文件服务器 2、创建脚本实现备份以及传输 3、配置定时任务 概述 应对异地容灾备份场景&#xff0c;mysql所在服务器和备份服务器需要建立ssh连接&#xff0c;每天mysql服务器通过定时任务执行脚本&…
阅读更多...
web3 React dapp进行事件订阅

web3 React dapp进行事件订阅

好啊&#xff0c;上文web3 React Dapp书写订单 买入/取消操作 我们已经写好了 填充和取消订单 这就已经是非常大的突破了 但是 留下了一个问题 那就是 我们执行完之后 订单的数据没有直接更新 每次都需要我们手动刷新 才能看到结果 那么 今天我们就来看解决这个问题的事件订阅 …
阅读更多...
什么是 IT 资产管理(ITAM),以及它如何简化业务

什么是 IT 资产管理(ITAM),以及它如何简化业务

IT 资产管理对任何企业来说都是一项艰巨的任务&#xff0c;但使用适当的工具可以简化这项任务&#xff0c;例如&#xff0c;IT 资产管理软件可以为简化软件和硬件的管理提供巨大的优势。 什么是 IT 资产管理 IT 资产管理&#xff08;ITAM&#xff09;是一组业务实践&#xff…
阅读更多...
大数据-之LibrA数据库系统告警处理（ALM-12045 网络读包丢包率超过阈值）

大数据-之LibrA数据库系统告警处理（ALM-12045 网络读包丢包率超过阈值）

告警解释 系统每30秒周期性检测网络读包丢包率&#xff0c;并把实际丢包率和阈值&#xff08;系统默认阈值0.5%&#xff09;进行比较&#xff0c;当检测到网络读包丢包率连续多次&#xff08;默认值为5&#xff09;超过阈值时产生该告警。 用户可通过“系统设置 > 阈值配置…
阅读更多...
idea生成代码（一）：实现java语言的增删改查功能（基于EasyCode插件）支持自定义模板【非常简单】

idea生成代码（一）：实现java语言的增删改查功能（基于EasyCode插件）支持自定义模板【非常简单】

idea生成代码&#xff08;一&#xff09;&#xff1a;实现java语言的增删改查功能&#xff08;基于EasyCode插件&#xff09;支持自定义模板【非常简单】 idea生成代码&#xff08;二&#xff09;&#xff1a;实现java语言的增删改查功能&#xff08;基于mybatis-plus代码生成器…
阅读更多...
记录：unity脚本的编写6.0

记录：unity脚本的编写6.0

目录 unity UI系统添加ui编写脚本 unity UI系统 在日常的游戏或者别的什么活动中&#xff0c;ui总是必不可少的一项&#xff0c;在java中也有关于GUI的内容&#xff0c;unity也不例外&#xff0c;这次就使用脚本控制在unity添加的各种ui组件&#xff0c;使他们可以完成一些我们…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023