title: uni-app小程序蓝牙打印踩坑之路
date: 2020-08-16 16:20:58
tags:

  • uni-app
  • 吐槽
    categories: 工作
    copyright: false
    top_img: /img/bg4.png

查资料

就在上周,我司的产品经理甩给了我一个打印机,顺便给了我一个安卓和IOS的SDK(心里一万只草泥马,我写的是小程序你给我安卓的SDK干嘛??)

说在小程序里入库时加个打印标签的功能 .我嘴角微微上扬,这对面向Google和百度的我来说并不是什么难事.于是确定好了需求细节后就开始着手开始捣鼓了.

一开始搜索了相关的文章,下载了几个demo,结果都是不行,控制台没报错,当时打印机就是没反应,于是我又开始了我的google百度之旅. 后来我发现demo打印不出东西完全是因为打印机的问题,产品经理给的打印机型号是精臣的B3S系列, 我去问了天猫的客服,客服又让我填了一个需求反馈表单,第二天他们的技术人员会来联系我.

时间来到第二天,精臣的技术人员联系到我, 我说我需要做一个小程序的蓝牙打印功能, 技术人员说他们公司目前出的打印机机型,都是不支持指令打印的,只目前打印传输的是图片 . 而巧的是小程序的低功耗蓝牙对传输速率有限制, 所以只支持指令打印.

你说起不起,不懂行的产品经理,给了个安卓的SDK就算了,还给了个不支持小程序低功耗蓝牙打印的打印机.

uniapp - 图1

既然他们的产品不支持, 那就换一个打印机, 于是我又在天猫探索,发现了一款便携式标签打印机是支持小程序低功耗蓝牙打印的. 我买的这款是佳博M322 . 然后用demo测试了一下 , 结果不出我所料,是没问题的.

demo地址

github上放了两个demo,一个是uniapp的,一个是原生的.因为我是用uniapp写的,本人又比较懒,直接把uniapp的拉过来了. 需要的自取 .

实现

使用了vue的mixin:

  1. var tsc = require('./tsc.js')
  2. var esc = require('./esc.js')
  3. import {mapGetters,mapMutations} from 'vuex'
  4. import {SET_CONNECTBLUETOOTH,SET_CURRPRINTER} from '../../../store/mutation-types.js'
  5. import {checkErr} from '../Utils/public.js'
  6. export default {
  7.     data() {
  8.         return {
  9.             devices: [],
  10.             currDev: null,
  11.             connId: '',
  12.             piaojuText:'',
  13.         }
  14.     },
  15.     computed:{
  16.         ...mapGetters(['isConnectBluetooth','currPrinter'])
  17.     },
  18.     methods: {
  19.         ...mapMutations({
  20.             setConnectBlue:SET_CONNECTBLUETOOTH,
  21.             setCurrentPrinter:SET_CURRPRINTER
  22.         }),
  23.         destroyed: function() {
  24.             console.log("destroyed----------")
  25.             if (this.connId != '') {
  26.                 uni.closeBLEConnection({
  27.                     deviceId: this.connId,
  28.                     success(res) {
  29.                         console.log(res)
  30.                     }
  31.                 })
  32.             }
  34.         },
  35.         searchBle() {
  36.             var that = this
  37.             console.log("initBule")
  38.             uni.showLoading({
  39.                 title:'搜索蓝牙中'
  40.             })
  41.             uni.openBluetoothAdapter({//初始化蓝牙模块
  42.                 success(res) {
  43.                     console.log("打开 蓝牙模块")
  44.                     console.log(res)
  45.                     that.onDevice()//监听寻找到新设备的事件
  46.                     uni.getBluetoothAdapterState({//获取本机蓝牙适配器状态
  47.                         success: function(res) {
  48.                             console.log(res)
  49.                             if (res.available) {
  50.                                 if (res.discovering) {
  51.                                     uni.hideLoading()
  52.                                     that.stopFindBule()
  53.                                 }
  54.                                 //搜索蓝牙
  55.                                 //开始搜寻附近的蓝牙外围设备
  56.                                 console.log("开始搜寻附近的蓝牙外围设备")
  57.                                 uni.startBluetoothDevicesDiscovery({
  58.                                     success(res) {
  59.                                         console.log(res)
  60.                                         setTimeout(()=>{
  61.                                             console.log('10秒倒计时')
  62.                                             that.stopFindBule()
  63.                                             let printer = that.devices.find(item=>item.deviceId === that.lastPrinter.deviceId)
  64.                                             if(!printer&&that.connectStatus){
  65.                                                 uni.showModal({
  66.                                                     title: '提示',
  67.                                                     showCancel: false,
  68.                                                     confirmText: '确定',
  69.                                                     content: '没找到指定打印机',
  70.                                                 });
  71.                                             }
  72.                                         },10000)
  73.                                     }
  74.                                 })
  76.                             } else {
  77.                                 uni.hideLoading()
  78.                                 console.log('本机蓝牙不可用')
  79.                             }
  80.                         },
  81.                     })
  82.                 }
  83.             })
  84.         },
  85.         onDevice(){
  86.             console.log("监听寻找到新设备的事件---------------")
  87.             var that = this
  88.             //监听寻找到新设备的事件
  89.             uni.onBluetoothDeviceFound(function(devices) {
  90.                         console.log('--------------new-----------------------'+JSON.stringify(devices))
  91.                         var re = JSON.parse(JSON.stringify(devices))
  92.                         console.log(re.devices[0].name + "  " + re.devices[0].deviceId)
  93.                             let name = re.devices[0].name
  94.                             if (name != "未知设备") {
  95.                                 let deviceId = re.devices[0].deviceId
  96.                                 that.devices.push({
  97.                                     name: name,
  98.                                     deviceId: deviceId,
  99.                                     services: []
  100.                                 })
  101.                             }
  102.             })
  103.         },
  105.         stopFindBule() {
  106.             console.log("停止搜寻附近的蓝牙外围设备---------------")
  107.             uni.stopBluetoothDevicesDiscovery({
  108.                 success(res) {
  109.                     console.log(res)
  110.                 }
  111.             })
  112.         },
  113.         //连接
  114.         onConn(item) {
  115.             var that = this
  116.             uni.showLoading({
  117.                 title:'连接蓝牙中'
  118.             })
  119.             console.log("连接蓝牙---------------" + item.deviceId)
  120.             let deviceId = item.deviceId
  121.             uni.createBLEConnection({//连接低功耗蓝牙设备
  122.                 deviceId: deviceId,
  123.                 complete(res) {
  124.                     console.log(res)
  125.                     if (res.errMsg == "createBLEConnection:ok") {
  126.                         console.log("连接蓝牙-[" + item.name + "]--成功")
  127.                         that.connId = deviceId;
  128.                         setTimeout(function() {
  129.                             that.getBLEServices(deviceId)//获取蓝牙设备所有服务(service)
  130.                             console.log(item,'lastPrinter存到本地')
  131.                             that.currDev = item
  132.                             that.setCurrentPrinter(item)
  133.                             uni.setStorageSync('lastPrinter',item)
  134.                         }, 2000)
  135.                     } else {
  136.                         uni.hideLoading()
  137.                         console.log(res)
  138.                     }
  140.                     //连接成功 关闭搜索
  141.                     that.stopFindBule()
  143.                 },
  144.             })
  145.         },
  147.         getBLEServices(_deviceId) {
  148.             var that = this;
  149.             let deviceId = _deviceId
  150.             console.log("获取蓝牙设备所有服务(service)。---------------")
  151.             uni.showLoading({
  152.                 title:'获取蓝牙设备服务中.',
  153.                 icon:'none'
  154.             })
  155.             uni.getBLEDeviceServices({
  156.                 // 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
  157.                 deviceId: deviceId,
  158.                 complete(res) {
  159.                     console.log(res)
  160.                     let serviceId = ""
  162.                     for (var s = 0; s < res.services.length; s++) {
  163.                         console.log(res.services[s].uuid)
  164.                         let serviceId = res.services[s].uuid
  165.                         uni.getBLEDeviceCharacteristics({//获取蓝牙设备某个服务中所有特征值(characteristic)
  166.                             // 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
  167.                             deviceId: deviceId,
  168.                             // 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
  169.                             serviceId: serviceId,
  170.                             success(res) {
  171.                                 var re = JSON.parse(JSON.stringify(res))
  173.                                 console.log('deviceId = [' + deviceId + ']  serviceId = [' + serviceId + ']')
  174.                                 for (var c = 0; c < re.characteristics.length; c++) {
  175.                                     if (re.characteristics[c].properties.write == true) {
  176.                                         let uuid = re.characteristics[c].uuid
  177.                                         console.log(' deviceId = [' + deviceId + ']  serviceId = [' + serviceId + '] characteristics=[' +
  178.                                             uuid)
  180.                                         for (var index in that.devices) {
  181.                                             if (that.devices[index].deviceId == deviceId) {
  182.                                                 that.devices[index].services.push({
  183.                                                     serviceId: serviceId,
  184.                                                     characteristicId: uuid
  185.                                                 })
  186.                                                 break
  188.                                             }
  190.                                         }
  191.                                         console.log(JSON.stringify(that.devices))
  193.                                     }
  194.                                 }
  195.                             }
  196.                         })
  198.                     }
  199.                     uni.hideLoading()
  200.                     that.setConnectBlue(true)
  201.                     uni.showToast({
  202.                         title:"连接蓝牙成功",
  203.                         icon:'success'
  204.                     })
  206.                 },
  207.                 fail(res) {
  208.                     that.setConnectBlue(false)
  209.                     let msg = checkErr(res.errCode)
  210.                     uni.showModal({
  211.                         title: '提示',
  212.                         showCancel: false,
  213.                         confirmText: '确定',
  214.                         content: `${msg}`,
  215.                     });
  216.                     uni.hideLoading()
  217.                 },
  218.             })
  220.         },
  221.         senBlData(deviceId, serviceId, characteristicId,uint8Array) {
  222.             console.log('************deviceId = [' + deviceId + ']  serviceId = [' + serviceId + '] characteristics=[' +characteristicId+ "]")
  223.             var uint8Buf = Array.from(uint8Array);
  224.             function split_array(datas,size){
  225.                 var result = {};
  226.                 var j = 0
  227.                 for (var i = 0; i < datas.length; i += size) {
  228.                     result[j] = datas.slice(i, i + size)
  229.                     j++
  230.                 }
  231.                 console.log(result)
  232.                 return result
  233.             }
  234.             var sendloop = split_array(uint8Buf, 20);
  235.             // console.log(sendloop.length)
  236.             return new Promise((resolve,reject)=>{
  237.                 function realWriteData(sendloop, i) {
  238.                     var data = sendloop[i]
  239.                     if(typeof(data) == "undefined"){
  240.                         resolve('单次打印结束')
  241.                         return
  242.                     }
  243.                     console.log("第【" + i + "】次写数据"+data)
  244.                     var buffer = new ArrayBuffer(data.length)
  245.                     var dataView = new DataView(buffer)
  246.                     for (var j = 0; j < data.length; j++) {
  247.                         dataView.setUint8(j, data[j]);
  248.                     }
  249.                     uni.writeBLECharacteristicValue({
  250.                         deviceId,
  251.                         serviceId,
  252.                         characteristicId,
  253.                         value: buffer,
  254.                         success: (res)=>{
  255.                             realWriteData(sendloop, i + 1);
  256.                         },
  257.                         fail:(err)=>{
  258.                             let msg = checkErr(err.errCode)
  259.                             uni.showModal({
  260.                                 title: '提示',
  261.                                 showCancel: false,
  262.                                 confirmText: '确定',
  263.                                 content: `${msg}`,
  264.                             });
  265.                             uni.hideLoading()
  266.                             return
  267.                         }
  268.                     })
  269.                 }
  270.                 var i = 0;
  271.                 realWriteData(sendloop, i)
  272.             })
  273.         },
  274.         senBleLabel(form) {
  275.             return new Promise((resolve,reject)=>{
  276.                 //标签模式
  277.                 uni.showLoading({
  278.                     title:'标签打印中'
  279.                 })
  280.                 let deviceId = this.currPrinter.deviceId;
  281.                 let serviceId = this.currPrinter.services[0].serviceId;
  282.                 let characteristicId = this.currPrinter.services[0].characteristicId;
  283.                 var command = tsc.jpPrinter.createNew()
  284.                 // console.log(command)
  285.                 if(this.ReagentPrintModel == '3'){
  286.                     command.setSize(40, 30)
  287.                     command.setGap(2)
  288.                     command.setCls()
  289.                     command.setText(16,8, "TSS16.BF2", 1, 1, `名称: ${form.CommonName}`)
  290.                     command.setText(16,40, "TSS16.BF2", 1, 1, `纯度: ${form.Consistency}  规格: ${form.Model}`)
  291.                     command.setBarCode(16, 72, "128M", 48, 1, 2,2,form.Barcode)
  292.                     command.setText(16,176, "TSS16.BF2", 1, 1, '开瓶时间:')
  293.                     command.setBar(96,192, 160, 2)
  294.                     // command.setQR(16, 160, "L", 3, "A", "977767937@qq.com")
  295.                     command.setPagePrint()
  296.                 }else{
  297.                     command.setSize(40, 30)
  298.                     command.setGap(2)
  299.                     command.setCls()
  300.                     command.setText(16,8, "TSS16.BF2", 1, 1, `品名: ${form.CommonName}`)
  301.                     command.setText(16,40, "TSS16.BF2", 1, 1, `位置: ${this.position}`)
  302.                     command.setText(16,72, "TSS16.BF2", 1, 1, `规格: ${form.Model}  纯度: ${form.Consistency}`)
  303.                     command.setBarCode(16, 104, "128M", 48, 1, 2,2,form.Barcode)
  304.                     // command.setQR(16, 160, "L", 3, "A", "977767937@qq.com")
  305.                     command.setPagePrint()
  306.                 }
  307.                 this.senBlData(deviceId, serviceId, characteristicId,command.getData()).then((res)=>{
  308.                     // console.log(res)
  309.                     uni.hideLoading()
  310.                     resolve(res)
  311.                 })
  312.             })
  313.         },
  314.         senBleLabel2(){
  315.             //票据模式
  316.             let deviceId = this.currPrinter.deviceId;
  317.             let serviceId = this.currPrinter.services[0].serviceId;
  318.             let characteristicId = this.currPrinter.services[0].characteristicId;
  319.             var command = esc.jpPrinter.createNew()
  320.             command.init()
  321.             command.setText(this.piaojuText);
  322.             command.setPrintAndFeedRow(1)
  323.             this.senBlData(deviceId, serviceId, characteristicId,command.getData())
  324.         }
  325.     }
  326. }

页面:

  1. async success2print(form){
  2.     console.log(form)
  3.     for(let i=0;i<form.length;i++){
  4.         console.log(`第${i+1}次打印`)
  5.         let res = await this.senBleLabel(form[i])
  6.         console.log(res)
  7.     }
  8.     uni.showToast({
  9.         title:'入库成功',
  10.         icon:'success'
  11.     })
  12. },

原来的demo中是只能打印一次的,无法连续打印, 就将代码改了改,支持连续打印.

打印的核心函数就是senBleLabel和senBlData,其中senBleLabel是设置标签模版,senBlData定义数据,把数据分成最大长度为20的二进制数据.然后依次写入设备特征值.

模版设置

参考demo文件里的佳博标签打印机编程手册tspl v1.0.8, 值得一提的就是算好距离然后打印就完事了.

由于这台打印机的DPI为203(DPI可以在打印机的机身参数上面查看).

200DPI: 1mm = 8dots

  1. command.setText(16,8, "TSS16.BF2", 1, 1, `名称: ${form.CommonName}`)

比如这一段是设置文字,16代表x轴16dots(2mm),y轴是8dots(1mm),TSS16.BF2是文字类型,具体参数可以去手册里查看,这里不多做解释,因为我自己也是看着手册来的uniapp - 图2

40mm×30mm的标签 dots尺寸就是, 320×240.

那支笔画一画一目了然.

uniapp - 图3

最终打印出来的效果.各位可以根据自己的需求修改…