首页 > 其他分享 >uni-app攻略：如何对接驰腾打印机

uni-app攻略：如何对接驰腾打印机

时间：2024-03-21 12:33:49浏览次数：26  
标签：打印机 app 打印 驰腾 height item uni CTPL

一.引言

在当前的移动开发生态中，跨平台框架如uni-app因其高效、灵活的特点受到了开发者们的青睐。同时，随着物联网技术的飞速发展，智能打印设备已成为许多业务场景中不可或缺的一环。今天，我们就来探讨如何使用uni-app轻松对接驰腾品牌的智能打印机，实现无线打印功能。无论您是初学者还是有经验的开发者，本教程都将带您一步步实现这一目标。

二.准备工作

首先确保您的开发环境已就绪。这包括安装HBuilderX和uni-app框架。同时，您需要准备一台驰腾打印机，并熟悉其用户手册和API文档。了解打印机支持的通信协议（比如蓝牙或Wi-Fi）也至关重要。

三.对接流程解析

在进行代码编写之前，我们需要理解整个接口调用的流程。这通常包括建立与打印机的连接、发送打印指令以及处理返回结果。此外，我们还需要关注数据格式、编码要求以及安全机制。

四.详细步骤与实施

1.设备连接与通讯建立

蓝牙连接流程

  1. 使用uni-app提供的蓝牙模块初始化并搜索打印机设备。
  2. 配对并连接到驰腾打印机。

2.发送打印指令

  1. 数据封装与传输
    • 依据驰腾打印机的API文档，正确封装打印数据。
    • 调用相关API发送打印任务。
  2. 错误处理与反馈
    • 监听打印状态变化，及时响应可能出现的错误。
    • 向用户提供清晰的状态反馈信息。

3.打印状态展示

  • 实时显示当前打印任务的状态，包括成功、等待和失败等。

五.代码实例与详解

前期准备：

需要下载一个js文件支持包，请先点击下载

点击下载js支持包

点击下载开发指南

开发说明中有详细的指令文档，需要的大家可以自行翻阅

以下提供一个使用打印机进行二维码打印的经典案例

1.先将js包解压，并在项目中创建文件夹保存

 2.现在需要两个页面，一个负责蓝牙搜索和连接，一个复制连接后的打印工作
测试蓝牙连接页面代码：

<template>
  <view class="container">
	  <view class="top-box">
		  <view class="name">打印机搜索</view>
		  <view class="value" @click="onLoadFun" v-if="submitMain">
			  点击搜索
		  </view>
		 <!-- <view class="value" @click="rescan" v-else>
			  重新搜索
		  </view> -->
	  </view>
    <scroll-view scroll-y class="box">
      <view
        class="item"
        v-for="(item, index) in blueDeviceList"
        :key="index"
        @click="connect(item, index)"
        :class="{ active: blueIndex === index }"
      >
        <view>
          <text>{{ item.name }}</text>
        </view>
        <view>
          <text>{{ item.deviceId }}</text>
        </view>
      </view>
	 <!-- <view class="item">{{code}}</view> -->
    </scroll-view>
  </view>
</template>

<script>
import CTPL from "@/web-CTPL-SDK/ctpl.js";
export default {
  data() {
    return {
      blueDeviceList: [], //蓝牙设备列表
      blueName: "", //蓝牙设备名称
      blueDeviceId: "", //蓝牙设备特征值
      blueIndex: -1,
      submitMain:true
    };
  },
  onUnload() {
  	if(this.blueDeviceId){
		CTPL.disconnect();
	}
  },
  methods: {
	async onl oadFun(){
		await CTPL.init();
		this.submitMain = false;
		await this.discoveryList()
	},
    clickLeft() {
      uni.navigateBack();
    },
    async discoveryList() {
		
      uni.showLoading({
		  title:'搜索设备中'
	  });
       CTPL.discovery().then((res)=>{
		    uni.hideLoading();
		    this.blueDeviceList = res;
	   }).catch((err)=>{
		    uni.hideLoading();
			uni.$u.toast(err)
	   })
    },
    //重新扫描
    rescan() {
      this.blueDeviceList = [];
      this.discoveryList();
    },
    //开始连接蓝牙
    connect(data, index) {
		const that = this;
		uni.showModal({
			title:'温馨提示',
			content:'是否使用选中设备进行打印',
			success(res) {
				if(res.confirm){
					CTPL.connect(data.deviceId);
					that.blueIndex = index;
					that.blueDeviceId = data.deviceId;
					that.blueName = data.name;
					setTimeout(() => {
						
						uni.showLoading({
							title:'配置设备中'
						})
					   that.setCodeFun()
					}, 1000);
				}
			}
		})
    },
	setCodeFun(){
		const that = this;
		CTPL.setPaperType(0);
		setTimeout(()=>{
			CTPL.setMemoryPrint(0);
			uni.hideLoading()
			setTimeout(()=>{
				uni.navigateTo({
				  url: `要进行打印的页面?id=${that.orderId}&deviceId=${that.blueDeviceId}`,
				});
			},500)
		},500)
	},

  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  overflow: hidden;
  min-height: 100vh;
}
.top-box{
	width: 100%;
	padding: 30rpx;
	background-color: white;
	color: #000000;
	line-height: 70rpx;
	font-size: 32rpx;
	overflow: hidden;
	.name{
		width: 50%;
		display: inline-block;
		vertical-align: top;
	}
	.value{
		width: 30%;
		float: right;
		display: inline-block;
		vertical-align: top;
		background:#009180;
		color: white;
		text-align: center;
		border-radius: 10rpx;
	}
}

$nav-height: 30px;

.box-bg {
  background-color: #f5f5f5;
  .nav {
    text {
      font-size: 28rpx !important;
    }
    .uni-nav-bar-right-text {
      color: #1aad19 !important;
    }
  }
}

.city {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  // width: 160rpx;
  margin-left: 4px;
}

.input-view {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  // width: 500rpx;
  flex: 1;
  background-color: #f8f8f8;
  height: $nav-height;
  border-radius: 15px;
  padding: 0 15px;
  flex-wrap: nowrap;
  margin: 7px 0;
  line-height: $nav-height;
}

.input-uni-icon {
  line-height: $nav-height;
}

.nav-bar-input {
  height: $nav-height;
  line-height: $nav-height;
  /* #ifdef APP-PLUS-NVUE */
  width: 370rpx;
  /* #endif */
  padding: 0 5px;
  font-size: 14px;
  background-color: #f8f8f8;
}

.box {
  height: calc(100vh - 100px);
  overflow: hidden;
}

.item {
  height: 120rpx;
  border-bottom: 1px solid #e5e5e5;
  background-color: white;
  width: 700rpx;
  margin: 26rpx auto 0 auto;
  overflow: hidden;
  font-size: 28rpx;
  line-height: 120rpx;
  padding: 0 20rpx;
  border-radius: 10rpx;
}

.active {
  background-color: #1aad19;
  color: white;
}
</style>

注意点:连接了设备后，除非断开并关闭小程序，不然不要重新连接，会直接卡死

测试打印页面代码(核心打印代码)：

数据:

        mainCodeArr:[],
		qrcodeObj: {
			x: 100,
			y: 70,
			eccLevel: "H",
			cellWidth: 6,
			encodeMode: "A",
			rotation: 0,
			codeMode: "M1",
			mask: "S7",
			content: 1234567890,
		},
		textObj: {
			x: "80",
			y: "20",
			rotation: "0",
			xRatio: "1",
			yRatio: "1",
			textAlignment: "0",
			text: "我的测试商品(1)"
		},
		code:''

调用方法:

 async setCodeIndex(index){
	  	uni.showLoading({
	  		title:'打印中'
	  	})
	  	const item = this.mainCodeArr[index]
	  	CTPL.queryPrintMode(0);
	  	CTPL.setSize(4,3);
	  	CTPL.clearCache();
	  	let code =  item.code;
	  	this.code = code;
	  	setTimeout(()=>{
	  		CTPL.drawQRCode(
	  			this.qrcodeObj.x,
	  			this.qrcodeObj.y,
	  			this.qrcodeObj.eccLevel,
	  			this.qrcodeObj.cellWidth,
	  			this.qrcodeObj.encodeMode,
	  			this.qrcodeObj.rotation,
	  			this.qrcodeObj.codeMode,
	  			this.qrcodeObj.mask,
	  			code
	  		);
	  		setTimeout(()=>{
	  			let left = 40;
	  			if(item.product_title.length < 9){
	  				left += ((10 - item.product_title.length) * 10)
	  			}else{
	  				item.product_title = item.product_title.slice(0,9) +'...'
	  			}
	  			// 绘制条码
	  			CTPL.drawText(
	  				left,
	  				this.textObj.y,
	  				this.textObj.rotation,
	  				this.textObj.xRatio,
	  				this.textObj.yRatio,
	  				this.textObj.textAlignment,
	  				(item.product_title+'('+item.index+')')
	  			);
	  			setTimeout(()=>{
	  				CTPL.setPrintCopies(1, 1);
	  				CTPL.execute();
	  				uni.hideLoading()
	  				if(this.mainCodeArr.length != index +1){
	  					setTimeout(()=>{
	  						this.setCodeIndex(index +1)
	  					},500)
	  					
	  				}else{
	  					uni.showModal({
	  						title:'温馨提示',
	  						content:'打印完成',
	  						showCancel:false
	  					})
	  				}
	  			},1000)
	  		},500)
	  	},1000)
	  },

 调用代码:

this.setCodeIndex(0)

总结

以上的一些步骤和代码案例，就是我对接驰腾打印机的全流程，核心主要在：1.设备连接与通讯建立，2.发送打印指令，3.打印状态显示和真机调试，希望我的一点经验能对你有用

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

标签：打印机,app,打印,驰腾,height,item,uni,CTPL
From： https://www.cnblogs.com/smileZAZ/p/18087102

相关文章

  • unity学习（66）——控制器Joystick Pack优化
    JoystickPack这种重力带惯性不利于正常开发。决定进行优化。有一种万事俱备只欠东风的感觉。源代码如下： 1.在脚本中找到轮盘所输出的方向值2.把方向的改变值加到鸣人模型身上。2.1控制器脚本中添加model变量2.2在unity中赋值 2.3代码中修改位置usingSystem.Col......
  • 【基于stm32-心率血氧量检测系统（蓝牙，手机app)】
    一、项目描述：心率血氧量检测系统基于STM32芯片的设计将为用户提供高效、可靠的健康监测解决方案。以下是这一系统的主要特点和功能：STM32芯片驱动：采用STM32系列芯片作为主控制器，具有高性能和低功耗特性，能够确保系统稳定运行并延长电池寿命。传感器集成：整合了高精度的心率和血......
  • uniapp 开发模板
    简介vue3-uniapp-template是基于vue3的uniapp快速开发模板，包含状态管理、网络请求、路由拦截、UI组件等常用功能。主要使用的技术栈：uniapp、vue3、pinia、vite、uv-ui下载地址PS：如果对你有帮助的话，点个Star支持下哈~GithubGitee项目启动#克隆代码gitclonehttps://gi......
  • Application.Current.Dispatcher.Invoke VS Dispatcher.CurrentDispatcher.Invoke
    写WPF的多线程一定离不开这两个东西，但是一些偶尔中发现项目中同事功能我多线程调用的时候发现线程安全问题，一查，他们都把核心操作都放在了UI线程中操作呀还是全局大范围的直接放Application.Current.Dispatcher.Invoke，但是依然出现，细查后发现，有的人使用的是Application.Current.......
  • 【unity实战】时间控制 昼夜交替 四季变化 天气变化效果
    最终效果文章目录最终效果日期季节控制时间昼夜交替素材如果没有天空盒，需要自己配置新增SkyboxBlendingShader.shader，控制天空盒平滑过渡交替变化下雨下雨粒子效果控制雨一直跟随玩家，但是旋转不跟随控制不同天气源码完结日期季节控制publicclassTimeManager:......
  • ACCESS 关于使用VBA选择路径时提示"方法'FileDislog作用于对象'_Application’时失败"
    以下是源码:PrivateSubCommand0_Click()'打开文件选择对话框WithApplication.FileDialog(msoFileDialogFilePicker).AllowMultiSelect=False.Filters.Clear.Filters.Add"Excel文件","*.xls;*.xlsx",1I......
  • how BabyFile app transfer files with mac
    asfollows： 1.ConnecttheiPhone/iPadwithadatacable,andthenopentheMac'sFinder,asmarkedby①inthepicture.(ifyourMaccomputerwithaparticularlylowsystemversion,openiTunes)2.Findandclicktheconnecteddeviceintheleft......
  • AutoMapper
    AutoMapper是一个在.NET应用程序中自动将一个对象的属性映射到另一个对象的属性的开源库。它旨在减少代码的重复性和提高开发人员的生产力。在实际应用中，我们常常需要将一个实体对象转换为另一个实体对象，或者从数据访问层获取到的数据对象映射到业务逻辑层的对象。手动实现这......
  • spring refresh的流程（AbstractApplicationContext的refresh方法）
    12个阶段1、prepareRefresh，做准备工作2、obtainFreshBeanFactory，创建或获取beanfactory3、prepareBeanFactory，准备beanfactory4、postProcessBeanFactory，子类扩展beanfactory5、invokeBeanFactoryPostProcessors，后处理器扩展beanfactory6、registerBeanPostProcessors，准备b......
  • ASP.NET通过Appliaction和Session统计在人数和历史访问量
    目录背景:Appliaction：Session：过程：数据库：Application_Start：Session_Start：Session_End：Application_End：背景:事件何时激发Application_Start在调用当前应用程序目录(或子目录)的第一个ASP.NET页面时激发Applicaiotn_End在应用程序最后一次会话结束时激发，此外在使用I......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99