uni-app攻略：如何對接馳騰印表機

来源:https://www.cnblogs.com/smileZAZ/p/18087102
-Advertisement-
Play Games

一.引言 在當前的移動開發生態中，跨平臺框架如uni-app因其高效、靈活的特點受到了開發者們的青睞。同時，隨著物聯網技術的飛速發展，智能列印設備已成為許多業務場景中不可或缺的一環。今天，我們就來探討如何使用uni-app輕鬆對接馳騰品牌的智能印表機，實現無線列印功能。無論您是初學者還是有經驗的開發 ...


一.引言

在當前的移動開發生態中，跨平臺框架如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 onLoadFun(){
		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.列印狀態顯示和真機調試，希望我的一點經驗能對你有用

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Redis資料庫安裝與使用總結
    Redis語句總結 一、基本概念 Redis 全稱： Remote Dictionary Server（遠程字典伺服器）的縮寫，以字典結構存儲數據，並允許其他應用通過TCP協議讀寫字典中的內容。 使用C語言編寫，並以記憶體作為數據存儲介質，所以讀寫數據的效率極高 *redis的官方只提供了linux版 ...
  • 華為雲GeminiDB新版本發佈：全面支持Redis 6.2
    華為雲GeminiDB是一款相容Redis協議的彈性KV(Key-Value)資料庫，支持遠超記憶體的容量和極致的性能，可支撐用戶平滑遷移，在廣告、游戲、電商等行業有著廣泛的應用。 今年3月上線的新版本，GeminiDB已全面支持Redis 6.2，用戶可在華為雲GeminiDB產品官網購買使用。新版 ...
  • 虛擬機部署centos系統部署docker和mysql的安裝過程
    作者本人使用的是vmware17Pro虛擬機，大家可以去網上找相關教程下載安裝，此總結後邊有多次安裝遇到的bug，要是有地方不妥，歡迎相互交流 在剛開始時，我們先部署的是Linux虛擬機，在設置Linux系統基礎環境時，系統就基本具有一些網路服務功能，差不多類似於現實中大型的伺服器，還有設置網路這一 ...
  • 直播預約丨《袋鼠雲大數據實操指南》No.1：從理論到實踐，離線開發全流程解析
    近年來，新質生產力、數據要素及數據資產入表等新興概念猶如一股強勁的浪潮，持續衝擊並革新著企業數字化轉型的觀念視野，昭示著一個以數據為核心驅動力的新時代正穩步啟幕。 面對這些引領經濟轉型的新興概念，為了更好地服務於客戶並提供切實可行的實踐指導，自3月20日起，袋鼠雲將推出全新《袋鼠雲大數據實操指南》系 ...
  • GaussDB(分散式)實例故障處理
    本文分享自華為雲社區《GaussDB(分散式)實例故障處理》，作者：subverter。 一、說明 GaussDB Kernel實例出現故障時，可以按照本節的辦法進行實例快速修複。 1、執行gs_om -t status --detail查看集群狀態，cluster_state為Normal，bal ...
  • 華為雲資料庫創新發展論壇，打造行業更優資料庫底座！
    近日，以“行業更優數據底座，華為雲資料庫創新發展論壇”為主題的資料庫分論壇，通過對雲原生資料庫的發展與展望、技術實踐分享與研討，共同探索行業數字化轉型最優解。 ...
  • Android 逆向(四) - adb常用逆向命令
    Android 逆向(四) - adb常用逆向命令 本篇文章繼續記錄下adb 的一些常用逆向命令. 1: adb shell ps 該命令可以查看進程信息. 用法: adb shell ps |grep [pname] zh@zh:~/workSpace$ adb shell ps USER PID ...
  • linux 入門（四）
    linux 入門（四） 1: 文件夾下所有文件的大小和詳細信息 du -h --max-depth=1 | sort -hr du命令可以查看文件夾（文件）占用的磁碟大小 ls命令可以查看文件的詳細信息，包括文件大小。 該命令可以按照文件夾（文件）大小的降序排列，並以易讀的方式顯示文件夾（文件）大小 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類