一.引言
在當前的移動開發生態中,跨平臺框架如uni-app因其高效、靈活的特點受到了開發者們的青睞。同時,隨著物聯網技術的飛速發展,智慧列印裝置已成為許多業務場景中不可或缺的一環。今天,我們就來探討如何使用uni-app輕鬆對接馳騰品牌的智慧印表機,實現無線列印功能。無論您是初學者還是有經驗的開發者,本教程都將帶您一步步實現這一目標。
二.準備工作
首先確保您的開發環境已就緒。這包括安裝HBuilderX和uni-app框架。同時,您需要準備一臺馳騰印表機,並熟悉其使用者手冊和API文件。瞭解印表機支援的通訊協議(比如藍芽或Wi-Fi)也至關重要。
三.對接流程解析
在進行程式碼編寫之前,我們需要理解整個介面呼叫的流程。這通常包括建立與印表機的連線、傳送列印指令以及處理返回結果。此外,我們還需要關注資料格式、編碼要求以及安全機制。
四.詳細步驟與實施
1.裝置連線與通訊建立
藍芽連線流程
- 使用uni-app提供的藍芽模組初始化並搜尋印表機裝置。
- 配對並連線到馳騰印表機。
2.傳送列印指令
- 資料封裝與傳輸
- 依據馳騰印表機的API文件,正確封裝列印資料。
- 呼叫相關API傳送列印任務。
- 錯誤處理與反饋
- 監聽列印狀態變化,及時響應可能出現的錯誤。
- 向使用者提供清晰的狀態反饋資訊。
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.列印狀態顯示和真機除錯,希望我的一點經驗能對你有用
如果對您有所幫助,歡迎您點個關注,我會定時更新技術文件,大家一起討論學習,一起進步。