使用APP inventor来制作一个属于自己的蓝牙串口软件

本文详细指导如何使用APPinventor创建蓝牙串口软件,包括界面设置、程序编写和实际操作步骤,带你完成从设备选择到数据传输的全过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用APP inventor来制作一个属于自己的蓝牙串口软件

本文主要讲述蓝牙的发送和接收功能的制作

一、准备

1.APPinventor的网址:http://app.gzjkw.net/

二、蓝牙APP界面的设置

首先我们新建一个项目,在这里我用的是本地服务器,如果没有本地离线版的可以用上面那个网址,用qq登录就行
在这里插入图片描述
接着我们找到水平布局,拖出一个放到屏幕中
在这里插入图片描述
找到用户界面中的列表选择框和按钮,拖出来放到刚刚的水平布局中,其中列表选择框的作用是选择要连接的蓝牙,按钮的作用是用作断开连接
在这里插入图片描述
点击列表选择框1,找到右侧属性面板中的显示文本,将其改为选择设备
在这里插入图片描述
在这里插入图片描述
接着将按钮1的文本设置为断开连接,方法同上
在这里插入图片描述
选择水平布局,在右侧的属性中将宽度设置为充满
在这里插入图片描述
接着选择列表选择框1和按钮1,将宽度都设为充满
在这里插入图片描述
好,到此蓝牙连接与断开部分的界面就好了,接着我们来设置一个标签,用于指示蓝牙连接状态,从用户界面找到标签,将标签拖入屏幕中,将宽度设置为充满,文本对齐设置为居中,显示文本设为蓝牙连接状态
在这里插入图片描述

接下来制作蓝牙发送数据的框和发送按钮,找到布局组件中的水平布局,拖出来,将宽度设置为充满
在这里插入图片描述
找到文本输入框和按钮,将他们拖入水平布局二中
在这里插入图片描述
将文本输入框1的宽度设置为充满,按钮2的显示文本设为发送,到此蓝牙发送界面完成
在这里插入图片描述
接下来制作蓝牙接收界面,找到用户界面中的标签,拖出来,将显示文本设为接收数据,这个标签的作用是提示下面的数据是接收到的数据
在这里插入图片描述
再从用户界面中找到一个标签,拖出来,将高度设置为60像素,宽度设为充满,将显示文本删除,背景颜色为橙色,这个标签是用来显示接收到的数据
在这里插入图片描述
到此蓝牙的接收界面完成,我们再设置一个按钮来清除接收到的数据,在用户界面中找到一个按钮,将显示文本设为清除数据,宽度设为充满
在这里插入图片描述
在通信连接中找到蓝牙客户端,拖入屏幕
在这里插入图片描述
在传感器中找到计时器,拖入屏幕,将计时间隔设置为500
在这里插入图片描述

三程序的编写

我们找到screen1中的当Screen1初始化这个模块,这个模块的意思是当屏幕初始化时执行
在这里插入图片描述

接着找到蓝牙客户端1中的蓝牙客户端断开已连接设备
在这里插入图片描述
下面的步骤都是一样的,找到图中的模块,然后拖到screen1初始化中。
这一段代码的意思是,当屏幕初始化,也就是你刚打开应用时,蓝牙断开连接,计时器停止,选择设备的列表启用,可以开始选择要连接的设备,按钮1按钮2,也就是断开连接的按键和发送数据的按键都没有启用,然后连接状态显示为未连接
在这里插入图片描述

接下来完成这段代码,意思是当你选择要连接的是那个设备时,选择框中出现的是你连接过的和你周围的蓝牙地址和名称
在这里插入图片描述
这一段代码的意思是当选择了要连接的是那个设备之后,蓝牙客户端连接设备,然后连接你所选择的设备,接着连接设备的选择框禁用,断开连接和发送按钮启用,蓝牙连接状态标签显示已连接,开启启用定时器
在这里插入图片描述
这一段代码的意思是当断开连接按钮被点击时,蓝牙断开连接,禁用计时器,连接设备的下拉框启用,可以再次选择需要连接的设备,断开连接和发送按钮禁用,连接状态显示为未连接
在这里插入图片描述
这一段代码的意思时当发送按钮被点击时,让蓝牙发送文本输入框1中的内容
在这里插入图片描述
这一段代码的意思是每隔500ms就去检测一下是否收到了消息,如果收到了消息就在接收数据的显示框中显示接收的数据
在这里插入图片描述
这一段代码的意思是当清除数据的按钮被按下时,将接收数据的显示框中的数据变成空,也就是清空数据的效果
在这里插入图片描述
总体文件
在这里插入图片描述
aia文件项目下载

四、效果以及测试

找到编译中的下载到本地,将APP下载到电脑,然后发给手机
在这里插入图片描述
已经制作好的APP下载
软件界面
在这里插入图片描述
首先打开手机蓝牙,注意:我们制作的软件不能自动打开蓝牙和关闭蓝牙,所以需要自己手动去打开和关闭
点选择设备,然后选择所需要连接的设备

在这里插入图片描述
连接好后的界面
在这里插入图片描述
接着打开电脑上的串口软件
在这里插入图片描述

手机端发送数据,可以看到电脑端可以收到数据
在这里插入图片描述
在这里插入图片描述

电脑端发送数据,可以看到手机端也可以接收到数据
在这里插入图片描述
在这里插入图片描述
点击手机端的清除数据,可以看到数据被清除
在这里插入图片描述
到此,大功告成,蓝牙APP制作完成,当然,你也可以在这个蓝牙APP的基础上增加一些东西,比如说按键的图片,布局,还有APP的名字,图标等等

### 如何使用 UniApp 开发蓝牙相关的应用程序 #### 1. **UniApp 的基础概念** UniApp一个基于 Vue.js 构建的应用开发框架,允许开发者编写一次代码即可部署至多个平台,包括 iOS、Android 和各类小程序[^3]。这种多端适配能力使得 UniApp 成为了许多开发者的首选工具。 #### 2. **蓝牙功能的支持与实现** 在 UniApp 中,蓝牙功能主要依赖于原生 API 或第三方插件来完成。以下是具体的操作流程: - **初始化蓝牙模块** 需要先调用 `uni.openBluetoothAdapter` 方法开启蓝牙适配器。此方法用于启动设备的蓝牙功能,并为后续操作提供支持[^1]。 ```javascript uni.openBluetoothAdapter({ success(res) { console.log('蓝牙已打开', res); }, fail(err) { console.error('蓝牙打开失败', err); } }); ``` - **扫描蓝牙设备** 使用 `uni.startBluetoothDevicesDiscovery` 启动蓝牙设备发现过程。可以通过回调函数获取附近可用的蓝牙设备列表。 ```javascript uni.startBluetoothDevicesDiscovery({ success(res) { console.log('开始扫描蓝牙设备'); } }); uni.onBluetoothDeviceFound((devices) => { devices.devices.forEach(device => { console.log(`找到设备 ${device.name} (${device.deviceId})`); }); }); ``` - **连接目标设备** 找到目标设备后,可以利用 `uni.createBLEConnection` 建立与指定设备的连接关系。 ```javascript const deviceId = 'your-device-id'; uni.createBLEConnection({ deviceId, success() { console.log('成功连接到设备:', deviceId); }, fail(err) { console.error('连接失败:', err); } }); ``` - **数据交互** 连接建立完成后,可通过读取或写入特征值的方式实现数据通信。这通常涉及 `notifyBLECharacteristicValueChange` 和 `writeBLECharacteristicValue` 等方法[^4]。 ```javascript const serviceId = 'service-id'; // 替换为目标服务ID const characteristicId = 'characteristic-id'; // 替换为目标特征值ID // 订阅通知 uni.notifyBLECharacteristicValueChange({ state: true, // 是否启用 notify serviceId, characteristicId, success() { console.log('订阅通知成功'); } }); // 发送数据 const buffer = new ArrayBuffer(1); // 创建缓冲区 const dataView = new DataView(buffer); dataView.setUint8(0, 65); // 设置发送的数据内容 (ASCII码A) uni.writeBLECharacteristicValue({ deviceId, serviceId, characteristicId, value: buffer, success() { console.log('数据发送成功'); } }); ``` #### 3. **注意事项** - 大部分小型无线蓝牙打印机采用的是较老的蓝牙协议版本(如蓝牙 3.0),因此某些高级特性可能无法被充分利用[^2]。 - 如果需要更复杂的蓝牙控制逻辑,建议引入专门的插件(例如 `Zhimi-BLE` 插件)以简化开发工作流。 --- ###
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值