<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>html5+ android蓝牙操作</title>
</head>
<body>
<div id="app">
<input type="button" name="" id="" value="打开蓝牙" @click="turnOnBluetooth" />
<input type="button" name="" id="" value="关闭蓝牙" @click="turnOffBluetooth" />
<input type="button" name="" id="" value="已配对的设备" @click="getPairedDevices" />
<input type="button" name="" id="" value="搜索蓝牙设备" @click="discoveryNewDevice" />
<div>
蓝牙状态：
<pre>{{bluetoothState}}</pre>
</div>
<div>
消息：{{msg}}
</div>
<div>
<input type="button" value="断开连接" @click="disConnDevice" />
</div>
已配对的设备：
<br>
<ul>
<li v-for="device in pairedDevices">
名称：{{device.name}}<br> 地址：{{device.address}}
<br>
<input type="button" value="连接" @click="connDevice(device.address)" />
</li>
</ul>
发现的设备：<br>
<ul>
<li v-for="device in newDevices">
名称：{{device.name}}<br> 地址：{{device.address}}<br>
<input type="button" value="连接" @click="connDevice(device.address)" />
</li>
</ul>
<div>
发送数据：
<textarea cols="20" rows="4" v-model="sendData"></textarea>
<input type="button" value="发送" @click="onSendData" />
</div>
<br>
<div style="margin-bottom: 100px;">接收的数据：
<input type="button" value="清空" @click="receiveDataArr = [];" />
<div style="width: 100%;min-height: 50px;">byte数组:
<span v-for="data in receiveDataArr">
{{data}}
</span>
</div>
<div style="width: 100%;min-height: 50px;word-wrap:break-word;">
对应的string字符串:<br> {{receiveDataStr}}
</div>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/BluetoothTool.js"></script>
<script type="text/javascript">
// 监听plusready事件
document.addEventListener("plusready", function() {
var bluetoothTool = null;
var vm = new Vue({
"el": "#app",
data: function() {
return {
bluetoothState: {},
pairedDevices: [],
newDevices: [],
receiveDataArr: [],
sendData: "",
msg: ""
}
},
computed: {
receiveDataStr: function() {
return String.fromCharCode.apply(String, this.receiveDataArr);
},
bluetoothStatusDesc: function() {
return this.bluetoothStatus ? "已开启" : "已关闭";
}
},
created: function() {
let that = this;
bluetoothTool = BluetoothTool();
this.bluetoothState = bluetoothTool.state;
bluetoothTool.init({
listenBTStatusCallback: function(state) {
that.msg = "蓝牙状态: " + state;
},
discoveryDeviceCallback: function(newDevice) {
that.newDevices.push(newDevice);
},
discoveryFinishedCallback: function() {
that.msg = "搜索完成";
},
readDataCallback: function(dataByteArr) {
if(that.receiveDataArr.length >= 200) {
that.receiveDataArr = [];
}
that.receiveDataArr.push.apply(that.receiveDataArr, dataByteArr);
},
connExceptionCallback: function(e) {
console.log(e);
that.msg = "设备连接失败";
}
});
},
methods: {
turnOnBluetooth: function() {
bluetoothTool.turnOnBluetooth();
},
turnOffBluetooth: function() {
bluetoothTool.turnOffBluetooth();
},
getPairedDevices: function() {
this.pairedDevices = bluetoothTool.getPairedDevices();
},
discoveryNewDevice: function() {
this.newDevices = [];
bluetoothTool.discoveryNewDevice();
},
cancelDiscovery: function() {
bluetoothTool.cancelDiscovery();
},
connDevice: function(address) {
bluetoothTool.connDevice(address);
},
disConnDevice: function() {
bluetoothTool.disConnDevice();
},
onSendData: function() {//sendData
bluetoothTool.sendData(this.sendData);
},
}
});
}, false);
</script>
</body>
</html>
扫一扫
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
