<template>
|
<view class="container">
|
<view class="area">
|
<view class="label">基本操作</view>
|
<view class="btn-group">
|
<button class="btn-item" @click="handleDevice" size="mini">获取设备</button>
|
<button class="btn-item" @click="handleConnect" size="mini">打开设备</button>
|
<button class="btn-item" @click="handleRead" size="mini">读取数据</button>
|
<button class="btn-item" @click="handleDisconnect" size="mini">关闭设备</button>
|
</view>
|
</view>
|
<view class="cell">
|
<view class="area">
|
<view class="label">设备订阅</view>
|
<view class="btn-group">
|
<button class="btn-item" @click="handleSubscribeUsb" size="mini">订阅</button>
|
<button class="btn-item" @click="handleUnsubscribeUsb" size="mini">取消订阅</button>
|
</view>
|
</view>
|
<view class="area">
|
<view class="label">消息订阅</view>
|
<view class="btn-group">
|
<button class="btn-item" @click="handleSubscribeMsg" size="mini">订阅</button>
|
<button class="btn-item" @click="handleUnsubscribeMsg" size="mini">取消订阅</button>
|
</view>
|
</view>
|
</view>
|
|
|
<view class="table">
|
<view class="th">
|
<text class="td">设备名称</text>
|
<text class="td">设备ID</text>
|
<text class="td">vendorId(VID)</text>
|
<text class="td">产品名称</text>
|
<text class="td">productId(PID)</text>
|
</view>
|
<view>
|
<view class="tr" v-for="(item,i) in list" :key="i">
|
<text class="td">{{item.deviceName}}</text>
|
<text class="td">{{item.deviceId}}</text>
|
<text class="td">{{item.vendorId}}</text>
|
<text class="td">{{item.productName}}</text>
|
<text class="td">{{item.productId}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="result">
|
<view class="result-btn">
|
<view class="title">输出：</view>
|
<button class="btn-item" @click="handleClear" size="mini">清除</button>
|
</view>
|
<textarea class="output" v-model="output" disabled></textarea>
|
</view>
|
</view>
|
</template>
|
<script>
|
// 引入插件
|
import {
|
UsbSerial
|
} from '@/uni_modules/shmily-usb-serial';
|
let usbSerial;
|
export default {
|
data() {
|
return {
|
list: [],
|
output: ''
|
};
|
},
|
mounted() {
|
// 实例化
|
usbSerial = new UsbSerial();
|
this.handleDevice();
|
},
|
methods: {
|
// 订阅消息，收到数据自动执行回调
|
handleSubscribeMsg() {
|
const { success, message } = usbSerial.subscribe({
|
dataType: 'HEX',
|
// dataType: 'ASCII',
|
bufferSize: 64
|
}, (data) => {
|
console.log(data.trim());
|
});
|
if (success) {
|
this.updateOutput('消息订阅成功');
|
} else {
|
this.updateOutput(message);
|
}
|
},
|
// 取消消息订阅
|
handleUnsubscribeMsg() {
|
usbSerial.unsubscribe();
|
this.updateOutput('取消消息订阅成功');
|
},
|
// 订阅设备，设备连接自动执行回调
|
handleSubscribeUsb() {
|
usbSerial.registerUsbAttach((action) => {
|
this.updateOutput(action ? '设备插入' : '设备移除');
|
this.handleDevice();
|
});
|
this.updateOutput('设备订阅成功');
|
},
|
// 取消设备订阅
|
handleUnsubscribeUsb() {
|
usbSerial.unregisterUsbAttach();
|
this.updateOutput('取消设备订阅成功');
|
},
|
// 查询设备
|
handleDevice() {
|
this.list = usbSerial.getDeviceList();
|
this.updateOutput('设备获取成功');
|
},
|
// 打开设备
|
handleConnect() {
|
const success = usbSerial.connect({
|
vendorId: 6790, // 请填写实际值
|
productId: 29987, // 请填写实际值
|
baudRate: 115200, // 请填写实际值
|
dataBits: 8, // 请填写实际值
|
stopBits: 1, // 请填写实际值
|
parity: 0, // 请填写实际值
|
}, ({ success, message}) =>{
|
console.log(message);
|
this.updateOutput(message);
|
if (success) {
|
this.handleSubscribeMsg();
|
}
|
});
|
},
|
// 读取数据
|
handleRead() {
|
const { data, success, message } = usbSerial.read('ASCII');
|
if (success) {
|
this.updateOutput(`读取数据：${data}`);
|
} else {
|
this.updateOutput(message);
|
}
|
},
|
// 关闭连接
|
handleDisconnect() {
|
usbSerial.disconnect(({success, message}) => {
|
this.updateOutput(message);
|
});
|
},
|
handleClear() {
|
this.output = '';
|
},
|
updateOutput(msg) {
|
this.output += `${msg}\n`;
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.container {
|
padding: 20rpx;
|
font-size: 14px;
|
}
|
|
.cell {
|
display: flex;
|
justify-content: space-between;
|
column-gap: 15rpx;
|
|
.area {
|
flex: 1;
|
}
|
}
|
|
.area {
|
padding: 10rpx 10rpx 20rpx;
|
border: 1px dashed #cccccc;
|
margin-bottom: 20rpx;
|
|
&+& {
|
margin-left: 15rpx;
|
}
|
|
.label {
|
width: fit-content;
|
margin-top: -30rpx;
|
background-color: white;
|
}
|
}
|
|
.btn-group {
|
width: fit-content;
|
display: flex;
|
margin-top: 15rpx;
|
}
|
|
.btn-item {
|
width: fit-content;
|
font-size: 12px;
|
|
&+& {
|
margin-left: 15rpx;
|
}
|
}
|
|
.table {
|
min-height: 200rpx;
|
border: 1px solid #cccccc;
|
|
.th {
|
border-bottom: 1px solid #cccccc;
|
}
|
|
.tr+.tr {
|
border-top: 1px dashed #cccccc;
|
}
|
|
.th,
|
.tr {
|
display: flex;
|
align-items: center;
|
font-size: 12px;
|
|
|
.td {
|
flex: 1;
|
text-align: center;
|
max-width: 25%;
|
word-break: break-all;
|
padding: 8px 4px;
|
}
|
}
|
}
|
|
.result {
|
margin-top: 20rpx;
|
|
.result-btn {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.btn-item {
|
margin: initial;
|
}
|
}
|
|
.output {
|
font-size: 13px;
|
line-height: 1.5;
|
margin-top: 20rpx;
|
height: 500rpx;
|
width: 100%;
|
background-color: #333333;
|
color: white;
|
padding: 20rpx;
|
border-radius: 8rpx;
|
box-sizing: border-box;
|
}
|
}
|
</style>
|
