前言
目前公司Vue H5項(xiàng)目，用webview打包成APP，現(xiàn)產(chǎn)品提出這樣打包出來的app運(yùn)行較慢，需要用uniapp方式（即使用HBuilder編輯器來打包H5）來打包，那需要的基座就不是安卓的基座而是uniapp的基座，而H5項(xiàng)目實(shí)現(xiàn)手機(jī)掃描功能就需要調(diào)用uniapp的基座的方法。
需求&流程說明
Vue2 開發(fā)的移動(dòng)端項(xiàng)目（H5項(xiàng)目及ipad端項(xiàng)目），需要連接藍(lán)牙設(shè)備打印
需求說明：
1、點(diǎn)擊打印按鈕時(shí)，先判斷當(dāng)前設(shè)備是否已連接過藍(lán)牙（即是否存在藍(lán)牙設(shè)備ID）
a、若已連接過：直接調(diào)用打印配置（即：type:bluetoothPrint）
b、若未連接過：1、先獲取當(dāng)前設(shè)備的所有藍(lán)牙list(即：type:getBluetoothList)
2、選中設(shè)備后調(diào)用藍(lán)牙連接（即：type:connBluetooth）
3、連接成功后存儲(chǔ)已連接的設(shè)備ID（即選中的設(shè)備）
具體步驟
一、Uniapp Webview 源碼
<template>
<view>
<web-view :src="src" @message="showMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
src: 'http://******/', // H5項(xiàng)目地址
qrCodeWv: null,
devices: [],
currDev: null,
connId: '',
}
},
onReady() {
// #ifdef APP-PLUS
let currentWebview = this.$scope.$getAppWebview()
setTimeout(() => {
this.wv = currentWebview.children()[0]
this.qrCodeWv = currentWebview.children()[0]
this.wv.setStyle({ scalable: true })
}, 1000)
// #endif
},
methods: {
showMessage(event) {
if (event.detail.data && event.detail.data.length > 0) {
let dataInfo = event.detail.data[0]
console.log(dataInfo)
let type = dataInfo.type
if (type === 'getBluetoothList') {
this.getBluetoothList()
}
if (type === 'connBluetooth') {
console.log(dataInfo.params)
let args = dataInfo.params;
let deviceId = args.deviceId;
let device = this.devices.find((item) => {
return item.deviceId == deviceId;
})
console.log(device)
this.connBluetooth(device)
}
if (type === 'bluetoothPrint') {
let args = dataInfo.params;
let deviceId = args.deviceId;
let command = args.command;
let device = this.devices.find((item) => {
return item.deviceId == deviceId;
})
//當(dāng)設(shè)備沒有連接時(shí)需要重新連接設(shè)備
if (this.connId == '') {
this.initBluetoothList();
this.connBluetooth(device);
}
let serviceId = this.currDev.services[0].serviceId;
let characteristicId = this.currDev.services[0].characteristicId;
this.senBlData(deviceId, serviceId, characteristicId, command);
}
}
},
// 獲取藍(lán)牙設(shè)備list
getBluetoothList() {
this.initBluetoothList();
const data = JSON.stringify(this.devices)
console.log('獲取藍(lán)牙設(shè)備list', data)
this.qrCodeWv.evalJS(`appBluetoothListResult('${data}')`)
},
initBluetoothList() {
this.searchBle();
setTimeout(() => {
this.stopFindBule();
}, 10000)
},
// 查找藍(lán)牙設(shè)備
searchBle() {
var self = this
console.log("initBule")
uni.openBluetoothAdapter({
success(res) {
console.log("打開 藍(lán)牙模塊")
console.log(res)
self.onDevice()
uni.getBluetoothAdapterState({
success: function (res) {
console.log(res)
if (res.available) {
if (res.discovering) {
self.stopFindBule()
}
//搜索藍(lán)牙
//開始搜尋附近的藍(lán)牙外圍設(shè)備
console.log("開始搜尋附近的藍(lán)牙外圍設(shè)備")
uni.startBluetoothDevicesDiscovery({
success(res) {
console.log(res)
}
})
} else {
console.log('本機(jī)藍(lán)牙不可用')
}
},
})
}
})
},
onDevice() {
console.log("監(jiān)聽尋找到新設(shè)備的事件---------------")
var self = this
//監(jiān)聽尋找到新設(shè)備的事件
uni.onBluetoothDeviceFound(function (devices) {
//獲取在藍(lán)牙模塊生效期間所有已發(fā)現(xiàn)的藍(lán)牙設(shè)備
console.log('--------------new-----------------------' + JSON.stringify(devices))
var re = JSON.parse(JSON.stringify(devices))
let name = re.devices[0].name
if (name != "未知設(shè)備" && name.length != 0) {
console.log(name.length)
let deviceId = re.devices[0].deviceId
//信號(hào)過濾。大于50
//如果已經(jīng)存在也不用加入
if (re.devices[0].RSSI > self.filterRSSI) {
if (!self.devices.some(v => v.deviceId == deviceId)) {
self.devices.push({
name: name,
deviceId: deviceId,
services: []
})
}
}
}
})
},
stopFindBule() {
console.log("停止搜尋附近的藍(lán)牙外圍設(shè)備---------------")
uni.stopBluetoothDevicesDiscovery({
success(res) {
console.log(res)
}
})
},
// 連接藍(lán)牙
connBluetooth(device) {
this.onConn(device);
},
// 連接藍(lán)牙
onConn(item) {
var self = this
console.log(`連接藍(lán)牙---------------${item.deviceId}`)
let deviceId = item.deviceId
uni.createBLEConnection({
deviceId: deviceId,
complete(res) {
let result = false;
if (res.errMsg == "createBLEConnection:ok") {
plus.nativeUI.toast(`設(shè)備:${item.name} 已連接`, {
verticalAlign: 'center'
})
self.connId = deviceId;
self.currDev = item,
setTimeout(function () {
self.getBLEServices(deviceId)
}, 2000)
result = true;
} else {
plus.nativeUI.toast(`設(shè)備: ${item.name} 連接失敗。請(qǐng)重試!`, {
verticalAlign: 'center',
})
//切換異常時(shí)釋放掉鏈接
if (self.connId != '') {
uni.closeBLEConnection({
deviceId: self.connId,
success(res) {
console.log(res)
}
})
}
}
//連接成功 關(guān)閉搜索
self.stopFindBule()
//發(fā)生是否成功結(jié)果
var data = {};
data.result = result;
var data1 = JSON.stringify(data)
self.wv.evalJS(`appConnBluetoothResult('${data1}')`)
},
})
},
getBLEServices(_deviceId) {
var self = this;
let deviceId = _deviceId
console.log("獲取藍(lán)牙設(shè)備所有服務(wù)(service)。---------------")
uni.getBLEDeviceServices({
// 這里的 deviceId 需要已經(jīng)通過 createBLEConnection 與對(duì)應(yīng)設(shè)備建立鏈接
deviceId: deviceId,
complete(res) {
console.log(res)
let serviceId = ""
for (var s = 0; s < res.services.length; s++) {
console.log(res.services[s].uuid)
let serviceId = res.services[s].uuid
uni.getBLEDeviceCharacteristics({
// 這里的 deviceId 需要已經(jīng)通過 createBLEConnection 與對(duì)應(yīng)設(shè)備建立鏈接
deviceId: deviceId,
// 這里的 serviceId 需要在 getBLEDeviceServices 接口中獲取
serviceId: serviceId,
success(res) {
var re = JSON.parse(JSON.stringify(res))
console.log(`deviceId =[${deviceId}] serviceId = [${serviceId}]`)
for (var c = 0; c < re.characteristics.length; c++) {
if (re.characteristics[c].properties.write == true) {
let uuid = re.characteristics[c].uuid
console.log(`deviceId =[${deviceId}] serviceId = [${serviceId}] characteristics=[${uuid}]`)
for (var index in self.devices) {
if (self.devices[index].deviceId == deviceId) {
self.devices[index].services.push({
serviceId: serviceId,
characteristicId: uuid
})
break
}
}
console.log(JSON.stringify(self.devices))
}
}
}
})
}
},
fail(res) {
console.log(res)
},
})
},
senBlData(deviceId, serviceId, characteristicId, uint8Array) {
var uint8Buf = Array.from(uint8Array);
function split_array(datas, size) {
var result = {};
var j = 0
if (datas.length < size) {
size = datas.length
}
for (var i = 0; i < datas.length; i += size) {
result[j] = datas.slice(i, i + size)
j++
}
//result[j] = datas
console.log(result)
return result
}
var sendloop = split_array(uint8Buf, 20);
// console.log(sendloop.length)
function realWriteData(sendloop, i) {
var data = sendloop[i]
if (typeof (data) == "undefined") {
return
}
//console.log("第【" + i + "】次寫數(shù)據(jù)"+data)
var buffer = new ArrayBuffer(data.length)
var dataView = new DataView(buffer)
for (var j = 0; j < data.length; j++) {
dataView.setUint8(j, data[j]);
}
uni.writeBLECharacteristicValue({
deviceId,
serviceId,
characteristicId,
value: buffer,
success(res) {
console.log('發(fā)送成功', i)
setTimeout(() => {
realWriteData(sendloop, i + 1);
}, 100)
},
fail(e) {
console.log('發(fā)送數(shù)據(jù)失敗')
console.log(e)
}
})
}
var i = 0;
realWriteData(sendloop, i);
},
}
}
</script>
二、H5 Vue項(xiàng)目引入js
1、在public新建js文件夾uni.webview.1.5.4.js文件，其源碼地址
https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js
2、index.html 引入 public/js 下文件
<script src="<%= BASE_URL %>js/uni.webview.1.5.4.js"></script>
3、main.js 定義回調(diào)方法和對(duì)象
// 藍(lán)牙設(shè)備列表
window.appBluetoothListResult = function (val) {
window.appBluetoothListResultString = val
window.dispatchEvent(new CustomEvent('bluetoothListResult'))
}
// 藍(lán)牙連接成功或失敗
window.appConnBluetoothResult = function (val) {
window.appConnBluetoothResultString = val
window.dispatchEvent(new CustomEvent('connBluetoothResult'))
}
4、Vue掃碼頁(yè)面代碼
1、在mixins文件夾下新建bluetoothMixins.js：代碼如下
export default {
data() {
return {
bluetoothShow: false, // 藍(lán)牙設(shè)備彈窗
deviceId: '', // 藍(lán)牙設(shè)備ID
listArr: [] // 獲取所有藍(lán)牙設(shè)備
}
},
created() {
window.addEventListener('bluetoothListResult', this.handleBluetoothList, false)
window.addEventListener('connBluetoothResult', this.handleConnBluetoothResult, false)
},
beforeDestroy() {
window.removeEventListener('bluetoothListResult', this.handleBluetoothList)
window.removeEventListener('connBluetoothResult', this.handleConnBluetoothResult)
},
methods: {
handleConnBluetoothResult() {
const result = window.appConnBluetoothResultString
console.log('返回藍(lán)牙是否連接成功', result)
if (JSON.parse(result).result) {
console.log('連接成功')
const deviceId = localStorage.getItem('bluetoothDeviceId')
localStorage.setItem('bluetoothDeviceId', deviceId || this.deviceId)
// alert(`${this.deviceId}---設(shè)置值選中的值`)
// alert(`${deviceId}---設(shè)置值緩存的值`)
this.bluetoothShow = false
}
},
handleBluetoothList() {
const result = window.appBluetoothListResultString
console.log('返回藍(lán)牙list', result)
if (result) {
this.bluetoothShow = true
this.listArr = JSON.parse(result)
}
},
// 選中設(shè)備
selectBluetooth(item) {
console.log('選中設(shè)備', item)
this.deviceId = item.deviceId
uni.postMessage({
data: {
action: 'connBluetooth',
params: { deviceId: this.deviceId }
}
})
}
}
}
2、實(shí)際Vue頁(yè)面：如下
import BluetoothMixins from '@/mixins/bluetoothMixins'
export default {
mixins: [BluetoothMixins],
methods: {
// 點(diǎn)擊打印按鈕
async print(deliveryNo) {
console.log('配送單deliveryNo----', deliveryNo)
// 獲取藍(lán)牙打印參數(shù)
const res = await this.$api.getDeliveryPrintParam({ deliveryNo })
if (res.success) {
// 判斷之前是否有連接過藍(lán)牙
const deviceId = localStorage.getItem('bluetoothDeviceId')
// alert(`${deviceId}---配送單緩存值`)
if (deviceId) {
// 連接過直接打印
uni.postMessage({
data: {
action: 'bluetoothPrint',
params: { deviceId, command: JSON.parse(res.data) }
}
})
} else {
// 沒有連接過，先去獲取藍(lán)牙設(shè)備數(shù)據(jù)（list）
uni.postMessage({
data: {
action: 'getBluetoothList'
}
})
}
}
}
}
}
相關(guān)文章
基于ElementUi再次封裝基礎(chǔ)組件文檔
基于ant-design-vue再次封裝基礎(chǔ)組件文檔文章來源：http://www.zghlxwxcb.cn/news/detail-831298.html
vue3+ts基于Element-plus再次封裝基礎(chǔ)組件文檔文章來源地址http://www.zghlxwxcb.cn/news/detail-831298.html
到了這里，關(guān)于Vue H5項(xiàng)目，怎么引入uni.webview sdk，調(diào)用uni postMessage實(shí)現(xiàn)手機(jī)藍(lán)牙連接打印功能（uniapp）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
