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.现在需要两个页面,一个负责蓝牙搜索和连接,一个复制连接后的打印工作
测试蓝牙连接页面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<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>

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

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

数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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:''

调用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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)
     },

 调用代码:

1
this.setCodeIndex(0)

总结

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

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

 

posted @   林恒  阅读(858)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
历史上的今天:
2023-03-21 记录--前端加载超大图片(100M以上)实现秒开解决方案
欢迎阅读『uni-app攻略:如何对接驰腾打印机』
点击右上角即可分享
微信分享提示