Vue H5项目，怎么引入uni.webview sdk，调用uni postMessage实现手机蓝牙连接打印功能（uniapp）

前言

目前公司Vue H5项目，用webview打包成APP，现产品提出这样打包出来的app运行较慢，需要用uniapp方式（即使用HBuilder编辑器来打包H5）来打包，那需要的基座就不是安卓的基座而是uniapp的基座，而H5项目实现手机扫描功能就需要调用uniapp的基座的方法。

需求&流程说明

Vue2 开发的移动端项目（H5项目及ipad端项目），需要连接蓝牙设备打印

需求说明：

1、点击打印按钮时，先判断当前设备是否已连接过蓝牙（即是否存在蓝牙设备ID）

a、若已连接过：直接调用打印配置（即：type:bluetoothPrint）
b、若未连接过：

1、先获取当前设备的所有蓝牙list(即：type:getBluetoothList)

在这里插入图片描述
2、选中设备后调用蓝牙连接（即：type:connBluetooth）
3、连接成功后存储已连接的设备ID（即选中的设备）

具体步骤

一、Uniapp Webview 源码

<template><view><web-view :src="src" @message="showMessage"></web-view></view>
</template><script>
export default {data() {return {src: 'http://******/', // H5项目地址qrCodeWv: null,devices: [],currDev: null,connId: '',}},onReady() {// #ifdef APP-PLUSlet 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.typeif (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;})//当设备没有连接时需要重新连接设备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);}}},// 获取蓝牙设备listgetBluetoothList() {this.initBluetoothList();const data = JSON.stringify(this.devices)console.log('获取蓝牙设备list', data)this.qrCodeWv.evalJS(`appBluetoothListResult('${data}')`)},initBluetoothList() {this.searchBle();setTimeout(() => {this.stopFindBule();}, 10000)},// 查找蓝牙设备searchBle() {var self = thisconsole.log("initBule")uni.openBluetoothAdapter({success(res) {console.log("打开 蓝牙模块")console.log(res)self.onDevice()uni.getBluetoothAdapterState({success: function (res) {console.log(res)if (res.available) {if (res.discovering) {self.stopFindBule()}//搜索蓝牙//开始搜寻附近的蓝牙外围设备console.log("开始搜寻附近的蓝牙外围设备")uni.startBluetoothDevicesDiscovery({success(res) {console.log(res)}})} else {console.log('本机蓝牙不可用')}},})}})},onDevice() {console.log("监听寻找到新设备的事件---------------")var self = this//监听寻找到新设备的事件uni.onBluetoothDeviceFound(function (devices) {//获取在蓝牙模块生效期间所有已发现的蓝牙设备console.log('--------------new-----------------------' + JSON.stringify(devices))var re = JSON.parse(JSON.stringify(devices))let name = re.devices[0].nameif (name != "未知设备" && name.length != 0) {console.log(name.length)let deviceId = re.devices[0].deviceId//信号过滤。大于50//如果已经存在也不用加入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("停止搜寻附近的蓝牙外围设备---------------")uni.stopBluetoothDevicesDiscovery({success(res) {console.log(res)}})},// 连接蓝牙connBluetooth(device) {this.onConn(device);},// 连接蓝牙onConn(item) {var self = thisconsole.log(`连接蓝牙---------------${item.deviceId}`)let deviceId = item.deviceIduni.createBLEConnection({deviceId: deviceId,complete(res) {let result = false;if (res.errMsg == "createBLEConnection:ok") {plus.nativeUI.toast(`设备:${item.name} 已连接`, {verticalAlign: 'center'})self.connId = deviceId;self.currDev = item,setTimeout(function () {self.getBLEServices(deviceId)}, 2000)result = true;} else {plus.nativeUI.toast(`设备: ${item.name} 连接失败。请重试!`, {verticalAlign: 'center',})//切换异常时释放掉链接if (self.connId != '') {uni.closeBLEConnection({deviceId: self.connId,success(res) {console.log(res)}})}}//连接成功 关闭搜索self.stopFindBule()//发生是否成功结果var data = {};data.result = result;var data1 = JSON.stringify(data)self.wv.evalJS(`appConnBluetoothResult('${data1}')`)},})},getBLEServices(_deviceId) {var self = this;let deviceId = _deviceIdconsole.log("获取蓝牙设备所有服务(service)。---------------")uni.getBLEDeviceServices({// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接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].uuiduni.getBLEDeviceCharacteristics({// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接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].uuidconsole.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 = 0if (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] = datasconsole.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 + "】次写数据"+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('发送成功', i)setTimeout(() => {realWriteData(sendloop, i + 1);}, 100)},fail(e) {console.log('发送数据失败')console.log(e)}})}var i = 0;realWriteData(sendloop, i);},}
}
</script>

二、H5 Vue项目引入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 定义回调方法和对象

// 蓝牙设备列表
window.appBluetoothListResult = function (val) {window.appBluetoothListResultString = valwindow.dispatchEvent(new CustomEvent('bluetoothListResult'))
}// 蓝牙连接成功或失败
window.appConnBluetoothResult = function (val) {window.appConnBluetoothResultString = valwindow.dispatchEvent(new CustomEvent('connBluetoothResult'))
}

4、Vue扫码页面代码

1、在mixins文件夹下新建bluetoothMixins.js：代码如下
export default {data() {return {bluetoothShow: false, // 蓝牙设备弹窗deviceId: '', // 蓝牙设备IDlistArr: [] // 获取所有蓝牙设备}},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.appConnBluetoothResultStringconsole.log('返回蓝牙是否连接成功', result)if (JSON.parse(result).result) {console.log('连接成功')const deviceId = localStorage.getItem('bluetoothDeviceId')localStorage.setItem('bluetoothDeviceId', deviceId || this.deviceId)// alert(`${this.deviceId}---设置值选中的值`)// alert(`${deviceId}---设置值缓存的值`)this.bluetoothShow = false}},handleBluetoothList() {const result = window.appBluetoothListResultStringconsole.log('返回蓝牙list', result)if (result) {this.bluetoothShow = truethis.listArr = JSON.parse(result)}},// 选中设备selectBluetooth(item) {console.log('选中设备', item)this.deviceId = item.deviceIduni.postMessage({data: {action: 'connBluetooth',params: { deviceId: this.deviceId }}})}}
}
2、实际Vue页面：如下
import BluetoothMixins from '@/mixins/bluetoothMixins'
export default {mixins: [BluetoothMixins],methods: {// 点击打印按钮async print(deliveryNo) {console.log('配送单deliveryNo----', deliveryNo)// 获取蓝牙打印参数const res = await this.$api.getDeliveryPrintParam({ deliveryNo })if (res.success) {// 判断之前是否有连接过蓝牙const deviceId = localStorage.getItem('bluetoothDeviceId')// alert(`${deviceId}---配送单缓存值`)if (deviceId) {// 连接过直接打印uni.postMessage({data: {action: 'bluetoothPrint',params: { deviceId, command: JSON.parse(res.data) }}})} else {// 没有连接过，先去获取蓝牙设备数据（list）uni.postMessage({data: {action: 'getBluetoothList'}})}}}}}

相关文章

基于ElementUi再次封装基础组件文档

基于ant-design-vue再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档

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

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

相关文章

使用BeautifulSoup 4和Pillow合并网页图片到一个PDF：一种高效的方式来处理网页图像

使用BeautifulSoup 4和Pillow合并网页图片到一个PDF：一种高效的方式来处理网页图像

背景 ​ 网页上的培训材料&#xff0c;内容全是PPT页面图片。直接通过浏览器打印&#xff0c;会存在只打印第一页&#xff0c;并且把浏览器上无效信息也打印出来情况。但目标是希望将页面图片全部打印为pdf形式。 实现方案 利用网页“另存为”&#xff0c;将页面内所有图片资…
阅读更多...
散点图直方图折线图的替代

散点图直方图折线图的替代

散点图直方图折线图的替代 seaborn官网 数据科学数据可视化&#xff0c;散点图 直方图 折线图的新方法 1.hexbinplot https://seaborn.pydata.org/examples/hexbin marginals.html相当于散点图做了聚合/分箱&#xff0c;使数据的分布展示更明显。Library: seaborn 2.瀑布图展示…
阅读更多...
大数据可视化推荐项目——基于Python/Django的电影评论可视化分析推荐系统的设计与实现

大数据可视化推荐项目——基于Python/Django的电影评论可视化分析推荐系统的设计与实现

大数据可视化推荐项目——基于Python/Django的电影评论可视化分析推荐系统的设计与实现 技术栈&#xff1a;大数据爬虫/机器学习算法/数据分析与挖掘/大数据echarts可视化/Django框架/Mysql 摘要&#xff1a;本文介绍了一个基于大数据可视化的电影评论分析推荐系统&#xff0…
阅读更多...
Go语言学习：第1天

Go语言学习：第1天

一、为什么开始学go语言 我自己是做测试的&#xff0c;所测试项目使用的是go语言。开始学习go语言的原因有两个&#xff1a;一方面&#xff0c;为了更好的做好工作&#xff1b; 另一方面&#xff0c;为了提高自己的核心竞争力。 二、第1天学习到的内容 2.1 Go是怎么解决包依…
阅读更多...
.NET 材料检测系统崩溃分析

.NET 材料检测系统崩溃分析

Windbg 分析 1. 到底是哪里的崩溃 一直跟踪我这个系列的朋友应该知道分析崩溃第一个命令就是 !analyze -v &#xff0c;让windbg帮我们自动化异常分析。 0:033> !analyze -v CONTEXT: (.ecxr) rax00000039cccff2d7 rbx00000039c85fc2b0 rcx00000039cccff2d8 rdx000000000…
阅读更多...
超卓航科引领冷喷涂增材制造革新，推动先进核反应堆发展

超卓航科引领冷喷涂增材制造革新，推动先进核反应堆发展

近日&#xff0c;超卓航科凭借其卓越的冷喷涂增材制造技术&#xff0c;成为推动核能领域创新的重要力量。该公司利用冷喷涂工程技术&#xff0c;或为核反应堆的制造和修复开辟了全新的道路。 冷喷涂技术是一种颇具前景的固态粉末沉积方法&#xff0c;可用于涂层制造、增材制造和…
阅读更多...
HTML2

HTML2

1 HTML 1.1 骨架 <!DOCTYPE html> //html5版本标识<html><head></head><body></body> </html> 网页的根主体&#xff0c;有且仅有一个&#xff0c;HTML负责结构&#xff0c;无需关注表现&#xff0c;CSS负责表现 标签有两种表现形…
阅读更多...
启动cad显示丢失mfc140u.dll怎么办？mfc140u.dll丢失有效解决方法分享

启动cad显示丢失mfc140u.dll怎么办？mfc140u.dll丢失有效解决方法分享

在CAD软件或其他软件中&#xff0c;有时候会出现由于找不到mfc140u.dll文件而无法执行代码的错误提示。这个问题可能是由于多种原因引起的&#xff0c;例如文件损坏、缺失或被病毒感染等。下面将介绍五个常见的解决方法&#xff0c;并解释mfc140u.dll丢失的原因以及该文件对CAD…
阅读更多...
智慧水利-城市防汛调度大屏提升防汛工作的效率和准确性

智慧水利-城市防汛调度大屏提升防汛工作的效率和准确性

近年来&#xff0c;水利自然灾害一直以层出不穷的强度和频率摧毁我们人类的家园。国内每年夏天的洪涝灾害一直困扰着长江流域地区&#xff0c;每年夏天微博上关于洪涝的热门新闻也是层出不穷。以近期出现的山西大雨为例&#xff0c;异常降雨造成山西省11个市76个县&#xff08;…
阅读更多...
Nginx的location匹配和rewrite重写

Nginx的location匹配和rewrite重写

一、location匹配 常用的正则表达式 ^ &#xff1a;匹配输入字符串的起始位置 $ &#xff1a;匹配输入字符串的结束位置 * &#xff1a;匹配前面的字符零次或多次。如“ol*”能匹配“o”及“ol”、“oll”&#xff1a;匹配前面的字符一次或多次。如“ol”能匹配“ol”及“oll…
阅读更多...
持续集成交付CICD：GitLabCI上传Nexus制品

持续集成交付CICD：GitLabCI上传Nexus制品

目录 一、实验 1.GitLabCI上传Nexus制品 2.优化GitLabCI&#xff08;引用系统变量&#xff09; 3.添加if条件判断项目类型 4.优化GitLabCI&#xff08;模板类&#xff09; 二、问题 1.GitLabCI获取jar文件失败 2. GitLabCI获取流水线项目命名空间失败 3.GItLab Packag…
阅读更多...
centos-LAMP搭建与配置（论坛网站）

centos-LAMP搭建与配置（论坛网站）

文章目录 LAMP简介搭建LAMP环境安装apache&#xff08;httpd&#xff09;安装mysql安装PHP安装php-mysql安装phpwind LAMP简介 LAMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写&#xff1a;Linux操作系统&#xff0c;网页服务器Apache&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023