uniapp 传统BT蓝牙打印

已于 2024-03-29 17:24:02 修改
阅读量334 收藏 1
点赞数 8
文章标签： uni-app 前端 android
于 2024-03-29 17:23:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/supermanwdp/article/details/137151538
版权
  1. 引入、注册组件 
    <view class="prient_box">
					<view class="content">
						<view class="btn-wrap">
							<te-Printer ref="tePrinter" :bufferDataBe="bufferDataBe" @onPrintBeG="onPrintBeG"></te-Printer>
						</view>
					</view>
			</view>
import tePrinter from '@/components/btPrinter/btPrinter.vue'
components: {
			tePrinter
},

  2. 传递打印参数给子组件

        

                var str ='CLL\r\n';
				str += 'NASC "GB18030"\r\n';
				str += 'FT "MHeiGB18030C-Medium" \r\n';
				str += 'FONTSIZE 8\r\n';
				str += 'FONTSLANT 0\r\n';
				str += 'PP50,293:AN7\r\n';
				str += 'PP50,290:PT "VIN:"\r\n';
				str += 'FONTSIZE 10\r\n';
				str += `PP99,293:PT "${PamrsData.vin}" \r\n`;
				str += 'FONTSIZE 8\r\n';
				str += 'PP50,219:PT "车型:"\r\n';
				str += `PP110,219:PT "${PamrsData.modelName}" \r\n`;
				str += 'PP300,219:PT "外饰:"\r\n';
				str += `PP360,219:PT "${PamrsData.exColorName}" \r\n`;
				str += 'PP50,145:PT "目标库位:"\r\n';
				str += `PP155,145:PT "${PamrsData.binCode}" \r\n`;
				str += 'PP300,145:PT "方向:"\r\n';
				// str += `PP355,145:PT "${PamrsData.warehouseCode}" \r\n`;
				str += 'PP50,71:PT "打印时间:"\r\n';
				str += `PP155,71:PT "${nowtime}"\r\n`;
				str += 'PP470,175:BARSET "QRCODE",1,1,6,2,1\r\n';
				str += `PB"${PamrsData.vin}" \r\n`;
				str += 'PF\r\n';
				this.bufferDataBe = str;

 3.子组件方法

<template>
	<view class="bg_box">
		<!-- 默认文字按钮 -->
		<view class="kk-printer-btn" @click="handlePrintTap">
			{{defaultText}}
		</view>
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="con_box" v-if="deviceList.length >0 ">
				<view class="con_box_title">
					<text>已配对蓝牙设备</text>
					<text @click="SearchBtlist">
						<uni-icons type="refresh" size="18" color="#e1e1e1"></uni-icons>
					</text>
				</view>
				<view class="con_box_item_box" v-for="(device,index) in deviceList" :key="index">
					<view class="con_box_item">
						<text>设备名称：</text>
						<text>{{device.name?device.name:'未命名'}}</text>
					</view>
					<view class="con_box_item">
						<text>设备地址：</text>
						<text>{{device.address?device.address:'未命名'}}</text>
					</view>
					<view class="con_box_item">
						<button style="width: 100%;" type="default" plain size="mini"
							@click="printSomething(device)">打印标签</button>
					</view>
				</view>
			</view>

			<view class="no_con_box" v-else>
				<view class="empty-icon"></view>
				<view class="empty-text">~ 配对设备为空 ~</view>
				<view class="refef">
					<uni-icons type="refresh" size="30" @click="SearchBtlist" color="#e1e1e1"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "btPrinter",
		data() {
			return {
				deviceList: []
			};
		},
		props: {
			//按钮默认文字
			defaultText: {
				type: String,
				default: '打印'
			},
			bufferDataBe: {
				type: String,
				default: ''
			}
		},
		methods: {
			// 更新配对蓝牙列表
			SearchBtlist() {
				this.initializeBtPrint()
			},
			/**
			 * 初始化并显示已绑定的蓝牙设备列表
			 */
			initializeBtPrint() {
				uni.showLoading({
					title: '搜索中...',
				})
				var that = this;
				that.deviceList = [];
				var main = plus.android.runtimeMainActivity();
				var Context = plus.android.importClass("android.content.Context");
				var BManager = main.getSystemService(Context.BLUETOOTH_SERVICE);
				plus.android.importClass(BManager);
				var BAdapter = BManager.getAdapter();
				plus.android.importClass(BAdapter);
				var lists = BAdapter.getBondedDevices();
				plus.android.importClass(lists);
				var iterator = lists.iterator();
				plus.android.importClass(iterator);
				console.log(iterator.hasNext(),'iterator.hasNext()');
				// 判断是否存在配对的元素、存在进行无限循环添加、不存在提示用户
				if (iterator.hasNext()) {
					while (iterator.hasNext()) {
						var d = iterator.next();
						plus.android.importClass(d);
						var temp = {
							name: d.getName(),
							address: d.getAddress(),
							status: d.getBondState(),
							uuids: d.getUuids(),
							op: d
						};
						that.deviceList.push(temp);
						uni.hideLoading()
					}
				}else{
					uni.showToast({
						title:'暂无配对的打印机，请手动到蓝牙，进行连接配对，连接时，听到打印机发出 ‘叮’的声音 或看到打印机中的蓝牙指示灯亮起，请手动按一下打印机上的进纸按钮，以便配对成功 ~',
						duration:10000,
						icon:'none'
					})
					uni.hideLoading()
				}
			},
			/**
			 * 实现向指定蓝牙设备（dev）发送数据进行打印的功能
			 * @param {Object} dev蓝牙相关参数
			 */
			printSomething(dev) {
				uni.showLoading({
					mask: true,
					title: '打印中...',
				})
				var that = this;
				var main = plus.android.runtimeMainActivity();
				var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");
				var UUID = plus.android.importClass("java.util.UUID");
				var uuid = UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");
				var BAdapter = BluetoothAdapter.getDefaultAdapter();
				var device = BAdapter.getRemoteDevice(dev.address);
				plus.android.importClass(device);
				var bluetoothSocket = device.createInsecureRfcommSocketToServiceRecord(uuid);
				plus.android.importClass(bluetoothSocket);
				if (!bluetoothSocket.isConnected()) {
					bluetoothSocket.connect();
					if (bluetoothSocket.isConnected()) {
						var outputStream = bluetoothSocket.getOutputStream();
						plus.android.importClass(outputStream);
						that.printTest(outputStream, bluetoothSocket)
					} else {
						uni.showToast({
							title: '打印设备连接失败，请重新连接蓝牙，并重新进入！',
							icon: 'none',
							duration: 2000
						});
						uni.hideLoading()
					}
				} else {
					uni.showToast({
						title: '打印设备设备已关闭，请重新启动打印机！',
						icon: 'none',
						duration: 2000
					});
					uni.hideLoading()
				}
			},
			/**
			 * 传递写入数据 调用传统BT蓝牙进行写入操作
			 * @param {Object} outputStream
			 * @param {Object} bluetoothSocket
			 */
			printTest(outputStream, bluetoothSocket) {
				let dp = this;
				if (this.bufferDataBe != '') {
					var arrayBuffer = plus.android.invoke(this.bufferDataBe, "getBytes", "gbk");
					outputStream.write(arrayBuffer);
					outputStream.flush();
					uni.hideLoading()
					dp.$refs.popup.close()
					bluetoothSocket.close();
					uni.$emit('onPrintBeG', 'Y')
				} else {
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '暂无对应参数 请重新扫描！'
					})
					dp.$refs.popup.close()
				}
			},
			/**
			 * 初始化 蓝牙状态的检查
			 */
			initializeBluetooth() {
				let dp = this;
				const BluetoothAdapter = plus.android.importClass('android.bluetooth.BluetoothAdapter'); // 引入Java 蓝牙类
				const blueadapter = BluetoothAdapter.getDefaultAdapter(); //拿到默认蓝牙适配器方法
				if (blueadapter) {
					// 判断蓝牙是否开启
					if (!blueadapter.isEnabled()) {
						// 未开启弹出提示框
						uni.showModal({
							title: '提示',
							content: '蓝牙未打开，打开蓝牙获取已连接设备列表，若没有对应的设备请手动到蓝牙列表进行连接蓝牙，在进行打印~',
							showCancel: false,
							confirmText: '打开蓝牙',
							success(res) {
								// 点击确定后通过系统打开蓝牙
								if (res.confirm) {
									const blueadapter = BluetoothAdapter.getDefaultAdapter();
									if (blueadapter != null) {
										blueadapter.enable();
										setTimeout(()=>{
											dp.initializeBtPrint()
										},2000)
									}
								}
							}
						})
					}else{
						dp.initializeBtPrint()
					}
				}

			},
			mySleep: async function(time) {
				await this.mypromise(time);
			},
			mypromise(time) {
				return new Promise((resolve) => setTimeout(resolve, time));
			},
			handlePrintTap() {
				this.$refs.popup.open()
				//#ifdef APP-PLUS
				this.initializeBluetooth()
				//#endif
			}
		}
	}
</script>

<style lang="scss">
	.bg_box {
		width: 95%;

		.kk-printer-btn {
			width: 100%;
			height: 100%;
			margin: 0 auto;
			padding: 10rpx 0;
			text-align: center;
		}

		.uni-popup {
			border-radius: 20rpx !important;

			.con_box {
				width: 90%;
				height: 80vh;
				border-radius: 20rpx;
				background: #ffffff;
				overflow-y: scroll;

				.con_box_title {
					width: 100%;
					display: flex;
					justify-content: center;
					padding: 20rpx 0 14rpx 0;
					position: sticky;
					top: 0;
					background-color: #ffffff;
					z-index: 9;

					text {
						font-size: 32rpx;
						font-weight: 600;
						color: #000;
						display: flex;
						align-items: center;
					}
				}

				.con_box_item_box {
					width: 95%;
					margin: 8rpx auto;
					border-radius: 15rpx;
					padding: 8rpx;
					border: 1px solid #e1e1e1;

					.con_box_item {
						width: 100%;
						margin-top: 6rpx;

						text {
							color: #000;
							font-size: 28rpx;
							font-weight: 600;
						}
					}
				}
			}

			.no_con_box {
				width: 100%;
				height: 80vh;
				border-radius: 20rpx;
				background: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.empty-icon {
					width: 268rpx;
					height: 240rpx;
					background: url('./img/empty-icon.png') no-repeat;
					background-size: 100% 100%;
					margin-bottom: 26rpx;
				}

				.empty-text {
					line-height: 50rpx;
					font-size: 30rpx;
					text-align: center;
					color: #999999;
				}

				.refef {
					display: flex;
					justify-content: center;
				}

			}
		}


	}
</style>

supermandp
关注
  • 8
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uniapp-Gprinter 佳博蓝牙打印插件
11-11
http://www.html5-app.com/show/120 描述如图哈， 做原作者要收费的哈。 我也是从愿作者那花钱买来的
uniapp蓝牙封装.zip
07-17
uniapp 连接蓝牙打印机，全局封装在vuex中，使用起来方便，只需传入打印数据即可，没有安装依赖，
uniapp连接蓝牙打印小票（附加demo）
weixin_73077230的博客
01-31 1532
在初始化成功后，可以进行蓝牙设备的搜索和连接操作。监听蓝牙设备的特征值变化：对于需要监听特定特征值变化的操作，可以使用。方法开始搜索蓝牙设备。可以设置搜索的时间和过滤条件，然后通过监听。方法获取蓝牙适配器对象。可以使用该对象进行后续的蓝牙操作。方法监听特征值的变化。获取蓝牙设备的服务和特征值：连接成功后，使用。连接蓝牙设备：选择要连接的蓝牙设备后，使用。方法获取蓝牙设备的服务列表。获取蓝牙适配器：首先，需要通过。事件获取搜索到的蓝牙设备列表。方法获取每个服务的特征值列表。事件获取蓝牙设备返回的数据。
uniapp开发实现蓝牙打印
weixin_65644264的博客
11-17 738
文件中添加需要蓝牙打印需要用的插件，如 uni-blueprinter 插件。方法关闭蓝牙适配器。在检测到蓝牙打印机之前必须使用。可以使用 uni-blueprinter 中提供的。同时，在销毁页面之前必须使用。使用 uni-blueprinter 中提供的。方法搜索附近的蓝牙设备。根据设备 ID，使用。方法打开蓝牙适配器、或。
uniapp蓝牙连接打印
最新发布
weixin_45616499的博客
04-10 1043
以下内容来自csdn、掘金、gitee等，以及执行操作的经验，如有侵扰，请联系删除，以下内容来自小白的整理，不喜勿喷。
uni-app实现蓝牙打印小票
qq_45243261的博客
02-21 2487
基于uni-app开发，调用官方蓝牙相关api实现连接蓝牙与向蓝牙热敏打印机发送字节流，可打印文字，二维码，图片，调整字体大小等。主要是实现打印编码推送循环，手机蓝牙可能出现编码发送失败情况，这个时候就是要循环保证每个字节准确推送。bluetooth.js 蓝牙连接相关模块封装。commands.js 打印十六进制相关代码库。printerjobs.js 打印实现库。封装蓝牙连接，搜索，断开相关操作模块。打印机ESC/POS十六进制编码库。gbk.js 编码转换库。蓝牙连接相关封装代码。
记录--uni-app实现蓝牙打印小票
林恒的博客
09-13 3181
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 说明 基于uni-app开发，调用官方蓝牙相关api实现连接蓝牙与向蓝牙热敏打印机发送字节流，可打印文字，二维码，图片，调整字体大小等，本文提供大概思路 结构 bluetooth.js 蓝牙连接相关模块封装 commands.js 打印十六进制相关代码库 gbk.js 编码转换库地址 printerjobs.js 打印实现库...
uniapp蓝牙连接打印机
蓝斑.json的博客
07-31 5033
为什么要列举市面上的蓝牙版本，因为在我们日常的小型无线蓝牙打印机设备中，绝大多数都是都是蓝牙3.0，记住是90%以上，我查阅过大量的蓝牙打印机，如果在设备参数上没写蓝牙版本的默认就是蓝牙3.0。所以你必须要清楚的知道你的打印机和你发给它的指令集是否一致，很多文章上来就码出代码，根本不说清楚原理，就会出现上面所说的各种问题。我还要插一句题外话，这个是帮我们减少代码量的，一些demo文章关于蓝牙打印的代码很长，因为它包含了整套的流程，包括蓝牙设备的搜索、连接等，实际上我要说的是，完全没有必要。
download (2)_uniapp蓝牙打印_
10-02
uniapp通过蓝牙链接蓝牙打印机实例项目
BluetoothPrinter-master_蓝牙打印_uniapp_uniapp真机logo_uniapp蓝牙打印_unia
09-11
uniapp连接蓝牙打印机打印，可以生成微信小程序、app等，只测试过微信小程序，可以打印，其它的平台自己去测试
uniapp蓝牙连接打印机打印.vue
04-29
本例使用汉印HM-t300pro打印机 打印
uniapp连接佳博打印机实现蓝牙打印票据功能
baidu_41899377的博客
02-17 5886
开始实现搜索蓝牙。获取蓝牙设备。连接蓝牙设备等操作。代码如下 <template> <view class="content"> <button class="btn" type="primary" :loading="isSearching" @tap="startSearch">开始搜索 </button> <button class="btn" type="warn" @tap="stopSearch">停止搜索<.
uniapp APP实现通过蓝牙连接打印机打印
热门推荐
weixin_46262596的博客
03-15 2万+
蓝牙连接德佟打印机打印 1、导入插件； 在插件市场中搜索LPAPI，进入之后，点击右侧的“购买for云打包”，选择目标项目，按照提示操作即可； 2、 配置插件； 用HBuilderX打开目标项目，选择manifest.json，打开配置视图，在右侧选择“App原生插件配置”，找到“云端插 件”，点击“选择云端插件”，勾选目标插件即可； 3、配置蓝牙权限； 标签打印机主要是用蓝牙进行数据传输的，所以在使用前需要配置先蓝牙操作权限； <uses-permission android:name=\"and
uniapp app蓝牙打印_批发商打印单据竟然还能这样操作？
weixin_39791225的博客
11-17 771
准备打印单据时的你是否遇到过这些情况：打印机连接不上蓝牙，无法打印...传送给库房打印时没人值守，打印效率低...打印机不匹配，更换耗时费力...这些问题大大降低了销售的工作效率，让业务无法及时响应慢人一步，出现这些情况企业如何能获得竞争优势？ 西安来肯信息的批发进销存+订货小程序一体化软件打印模式不仅成本低而且还十分高效，帮助库房快速备货配送，业务及时响应，快人一步；让...
uniapp 微信小程序小票打印机打印教程（超详细讲解） 完整代码，下载后可直接使用
qq_53722480的博客
06-13 4907
1.用户第一次进来点击连接，只用连接一次，只要用户不关闭程序就不会断开，可接着打印，2.如果已经连接需要在主动加载函数里面调用判断是否已经连接。
uniApp原生Android蓝牙打印机，打印小票
蓝斑.json的博客
08-02 720
u-button plain size="mini" @click="onConnect(device,printTest)" shape="circle" >连接重新连接断开连接
uniapp原生插件之安卓热敏打印机打印插件
夜中雨滴的专栏
11-04 507
安卓热敏打印机打印插件，自动授权，打印机连接监听，打印文本，条形码，二维码，切纸，打印机状态，打印结果查询等。
UNI-APP集成蓝畅打印插件
meng_xiaoxiao的博客
06-04 1219
1. 将插件压缩包解压，拷贝到项目的 nativeplugins 目录下。 2. 在 HBuilder 中打开 mainfest.json，进入“App 原生插件配置”，选择本地插 件，勾选添加插件列表中的 LcPrinter 插件
uniapp 低功耗蓝牙 打印标签
11-25
Uniapp是一个跨平台的应用开发框架，它可以帮助开发者用一套代码同时在多个平台上创建应用。而低功耗蓝牙是一种技术，它能够在低功耗的情况下实现设备之间的无线通信。打印标签是指使用设备将信息打印到标签上的过程。在Uniapp中，我们可以利用低功耗蓝牙技术来实现打印标签的功能。 首先，需要在Uniapp中引入相关的低功耗蓝牙插件或者模块。这些插件或者模块可以帮助我们在Uniapp中使用低功耗蓝牙功能。接下来，我们可以编写相关的代码来实现打印标签的功能。 在使用低功耗蓝牙打印标签时，我们首先需要建立与打印设备的连接。可以通过扫描设备、获取设备的特征码等方式来建立连接。建立连接后，我们就可以通过发送指令的方式将要打印的信息发送到设备上进行打印了。 具体来说，在Uniapp中可以通过调用相关的低功耗蓝牙插件或者模块的方法来实现连接设备、发送指令的功能。例如，可以通过调用插件或者模块提供的scan方法来扫描附近的设备，获取设备的特征码。然后，通过调用插件或者模块提供的connect方法来建立连接。建立连接后，可以通过调用其他方法来发送指令，将要打印的信息发送到设备上进行打印。 总之，Uniapp与低功耗蓝牙结合可以实现打印标签的功能。通过引入相关的低功耗蓝牙插件或者模块，并编写相应的代码，我们可以在Uniapp中使用低功耗蓝牙技术来实现与打印设备的连接以及打印标签的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值