主頁 > 企業開發 > uni-app開發經驗分享十五: uni-app 藍牙列印功能

uni-app開發經驗分享十五: uni-app 藍牙列印功能

2020-12-10 07:46:07 企業開發

最近在做uni-app專案時,遇到了需要藍牙列印檔案的功能需要制作,在網上找到了一個教程,這里分享給大家,

引入tsc.js

簡單得引入到自己所需要得頁面中去,本次我們只要到了標簽模式,他同時還有賬單模式可以選擇,

   // 藍牙列印 指令和轉碼
   var tsc = require('@components/gprint/tsc.js')

藍牙適配前期作業

首先我們需要先初始化藍牙模塊,在進行搜索藍牙,在監聽到附近藍牙設備時,記錄他的名稱和deviceId,

onBlue(e) {
  uni.openBluetoothAdapter({
    success(res) {
      //監聽尋找到新設備的事件
      that.findDevice()
      //監聽本機藍牙配接器狀態變化事件
      that.onStatus()
    }
  })
findDevice(){
  console.log("監聽尋找到新設備的事件---------------")
  //監聽尋找到新設備的事件
  uni.onBluetoothDeviceFound(function(devices) {
    const {name,deviceId} = devices[0];
    if(name == "未知設備")return;
    if(!name || !name.length){
      that.devices.push({
        name: name,
        deviceId: deviceId,
        services: []
      })
    }
    that.devices.forEach(e=>{
      if(that.devicesList){
        let b = true;
        that.devicesList.forEach(e1=>{
          if(e.name == e1.name){
            b = false;
          }
        });
        if(b)that.devicesList.push(e);
      }else{
        that.devicesList.push(e);
      }
    });
  }
}
onStatus(){
  uni.getBluetoothAdapterState({
    success: function(res) {
      //本機藍牙開啟時
      if (res.available) {
        //如在正在搜索設備,則停止搜索
        if (res.discovering) {
          uni.stopBluetoothDevicesDiscovery()
        }
        //搜索藍牙
        //開始搜尋附近的藍牙外圍設備
        uni.startBluetoothDevicesDiscovery()
      } else {
        console.log('本機藍牙不可用')
      }
    },
  })
}

連接藍牙

搜索出附近藍牙設備后,獲取藍牙設備的deviceId傳入createBLEConnection方法中,在連接藍牙設備時,我們需要注意的是保證盡量成對的呼叫 createBLEConnection 和 closeBLEConnection 介面,安卓如果多次呼叫 createBLEConnection 創建連接,有可能導致系統持有同一設備多個連接的實體,導致呼叫 closeBLEConnection 的時候并不能真正的斷開與設備的連接,
我們將連接成功的藍牙資訊存到currDev中,以便直接連接,無需進行搜索操作,

onLink(item){
  const {deviceId} = item;
  console.log("連接藍牙---------------" + deviceId);
  //連接低功耗藍牙設備,
  uni.createBLEConnection({
    deviceId: deviceId,
    complete(res) {
      if (res.errMsg != "createBLEConnection:ok") return
      //連接設備時,需斷開本機連接設備
      uni.closeBLEConnection({
        deviceId
      })
      that.connId = deviceId;
      that.currDev = item
      setTimeout(()=> {
        //獲取藍牙設備所有服務(service)
        that.getBLEServices(deviceId)
      }, 2000)
    }
    //連接成功 關閉搜索
    uni.stopBluetoothDevicesDiscovery()
    })
}
getBLEServices(deviceId) {
  uni.getBLEDeviceServices({
    // 這里的 deviceId 需要已經通過 createBLEConnection 與對應設備建立鏈接
    deviceId: deviceId,
    complete(res) {
      const {services} = res;
      services.forEach(item=>{
        const {uuid} = item;
        uni.getBLEDeviceCharacteristics({
          // 這里的 deviceId 需要已經通過 createBLEConnection 與對應設備建立鏈接
          deviceId: deviceId,
          // 這里的 serviceId 需要在 getBLEDeviceServices 介面中獲取
          serviceId: uuid,
          success(res) {
                const {characteristics} = res;
            for(let block of characteristics){
              if(!block.properties.write)return
              for (let index in that.devices) {
                if (that.devices[index].deviceId == deviceId) {
                  that.devices[index].services.push({
                    serviceId: uuid,
                    characteristicId: block.uuid,
                  })
                  break
                }
              }
            }
            uni.setStorage({
              key: 'currDev',
              data: that.devices,
            });
          }
        })
      })
    }
  })
} 

列印

列印格式需要自己根據當前設備的格式來進行設定列印,本章用到的是tsc.js中的form格式,

onPrint(){
  if(this.currDev.length == 0){
    uni.showToast({
      title: '請先連接藍牙列印機',
      duration: 2000
    });
    return
  }
  //標簽模式
  const {deviceId} = this.currDev;
  const {serviceId,characteristicId} = this.currDev.services[0];
  var command = tsc.jpPrinter.createNew();
  //DaYin這個欄位存放我們需要列印的資料
  let DaYin = JSON.parse(JSON.stringify(this.rowsList));
  let Customer = JSON.stringify(this.Customer);
  //列印格式需要根據列印機的特定格式來,在tsc檔案中修改格式,
  DaYin.forEach(e=>{
    command.form(e.ReceSheetNo,`客    戶:${Customer}`,`匹    數:${e.Rolls}`,`坯布品名:${e.GrayID}`,`進倉編號:${e.LotNo}`,`坯布型別:${e.GrayTypeName}`)
    command.setPagePrint()
  })
  //轉碼處理
  this.senBlData(deviceId, serviceId, characteristicId,command.getData())
}
senBlData(deviceId, serviceId, characteristicId,uint8Array) {
  let uint8Buf = Array.from(uint8Array);
  function split_array(datas,size){
    let result = {};
    let j = 0
    for (var i = 0; i < datas.length; i += size) {
      result[j] = datas.slice(i, i + size)
      j++
    }
    return result
  }
  let sendloop = split_array(uint8Buf, 20);
  function realWriteData(sendloop, i) {
    let data = https://www.cnblogs.com/smileZAZ/archive/2020/12/09/sendloop[i]
    if(typeof(data) =="undefined"){
      return
    }
    let buffer = new ArrayBuffer(data.length)
    let dataView = new DataView(buffer)
    uni.writeBLECharacteristicValue({
      deviceId,
      serviceId,
      characteristicId,
      value: buffer,
      success(res) {
        realWriteData(sendloop, i + 1);
      }
    })
  }
  let i = 0;
  realWriteData(sendloop, i);
},

form條碼格式

// 條形碼和文字合成列印
jpPrinter.form = function (content,text1,text2,text3,text4) {
  data = https://www.cnblogs.com/smileZAZ/archive/2020/12/09/header +"LEFT" + "\r\n" + "GAR-SENSE" + "\r\n" + barcodeText +
    "BARCODE " + 128 + " " + 1 + " " + 1 + " " + 125 + " " + 125 + " " + 0 + " " + 
    content + "\r\n" + 
        "TEXT " + " " + 12 + " " + 0 + " " + 125 + " " + 180 + " " + text1 + "\r\n" + 
        "TEXT " + " " + 12 + " " + 2 + " " + 125 + " " + 210 + " " + text2 + "\r\n" + 
        "TEXT " + " " + 12 + " " + 2 + " " + 125 + " " + 240 + " " + text3 + "\r\n" + 
        "TEXT " + " " + 12 + " " + 2 + " " + 125 + " " + 270 + " " + text4 + "\r\n" + 
        "FORM" + "\r\n" ; 
        jpPrinter.addCommand(data)
};

轉載于:https://blog.csdn.net/zhanleibo/article/details/103035645

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/232409.html

標籤:其他

上一篇:小程式使用canvas生成二維碼

下一篇:前端實作在瀏覽器網頁中錄音

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了!

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過?就是它的諸多怪異的設定讓你每每用的時候,都可能不小心踩坑。造成程式意外出錯,卻一下子找不到問題出處,那叫一個煩透了…… 下面,我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果,首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下: 實作代碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中,有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子: 1、可選鏈運算子(optional chaining operator) ?.是可選鏈運算子(optional chaining operator)。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位,它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思,中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px,即默認情況下: 1rem = 16px rem布局原理:根據CSS媒體查詢功能,更改根標簽的字體尺寸,實作rem單位隨螢屏尺寸的變化,如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標:計算屬性是如何實作的?計算屬性快取原理以及洋蔥模型的應用?在初始化Vue實體時,我們會給每個計算屬性都創建一個對應watcher,我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more