蓝牙打印

一、创建页面

  • 新建打印页面:页面建模 -> 新建页面 -> 选择空白页 -> 勾选移动端页面 -> 下一步 -> 填写基本属性 -> 完成

image.png image.png

  • 点击建好的页面进入移动端设计器,点击层级,在页面右键组件,最终效果如下图所示,点击保存。
    • 将【多行文本框】的名称改为‘打印内容’
    • 将【多行文本框】的控件高度改为20
    • 将【按钮】的名称改为‘打印’

image.png

二、加入插件

  • 层级 -> 选择页面 -> 动作绑定 -> 将 onShow 事件绑定前端函数 -> 编辑函数

image.png

  • 将示例代码复制到编辑器中,修改下图红框内容,改为自己页面中多行文本框的编码

image.png

  • 示例代码
function (event) {
  var viewModel = this;
  var script = document.createElement('script');  //添加的补丁js
  script.type = 'text/javascript';
  script.src = 'https://cdn.jsdelivr.net/gh/jiangzhenya110/images/mtl/mtl.js';
  document.head.appendChild(script);
  // 初始化打印模板
  viewModel.get('1622703465557_8').setValue("\r\n" +
    "=========== 购物清单 ===========\r\n" +
    "物品      件数      单价\n" +
    "猪肉      5         30\n" +
    "土豆      1         5\n" +
    "鸡蛋      15        0.5\r\n" +
    "客户签字:___________________\r\n" +
    "===============================\n" +
    "\r\n");
}

三、编写打印代码

  • 打印代码流程图

image.png

  • 给打印按钮绑定点击事件,点击编辑函数,将下面示例代码复制其中,并修改红框内容,同样为多行文本框编码

image.png image.png

  • 示例代码
function(event) {
  var viewModel = this;
  connectState();

  /**
  * 获取蓝牙打印机连接状态
  */
  function connectState() {
    mtl.upesn.blueToothConnectState({
      success: function(res) {
        console.log('获取蓝牙连接状态成功:', res);
        if (typeof deviceName != "undefined" && deviceName !== null &&
          deviceName !== "" && deviceName.indexOf('DP-HT201') !== -1) { // 已连接
          print();
        } else { // 未连接
          blueToothState();
        }
      },
      fail: function(err) {
        console.log('获取蓝牙连接状态失败:', err);
      }
    })
  }

  // 将logo图片转为base64编码,一定要把前缀"data:image/png;base64,"删除
  var imgBase64 ="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";

  /**
  * 打印内容
  */
  function print() {
    var value = viewModel.get('1622703465557_8').getValue();
    mtl.upesn.blueToothPrint({
      // 打印页数
      printNum: 1,
      // 自定义打印内容
      content: [
        {
          "type": "img",
          "value": imgBase64
        },
        {
          "type": "txt",
          "value": value
        },
        {
          "type": "txt",
          "value": "\r\n\r\n"
        }
      ],
      success: function(res) {
        console.log('打印成功:', res)
      },
      fail: function(err) {
        console.log('打印失败:', err)
      }
    })
  }

  /**
  * 获取蓝牙状态
  */
  function blueToothState() {
    mtl.upesn.getBlueToothState({
      success: function(res) {
        var state = res.state;
        console.log('获取蓝牙状态成功:', state);
        if (!state) {
          console.log('未打开蓝牙');
          alert('请打开蓝牙');
          return;
        }
        scan();
      },
      fail: function(err) {
        console.log('获取蓝牙状态失败:', err)
      },
    })
  }

  /**
  * 扫描蓝牙设备
  */
  function scan() {
    mtl.upesn.blueToothScan({
      registerFunc: function(res) {
        console.log('扫描结果:', res);
        if (res.peripheralArray.length > 0) {
          var index = res.peripheralArray.length - 1;
          var deviceName = res.peripheralArray[index].deviceName;
          var deviceIndentify = res.peripheralArray[index].deviceIndentify;
          console.log('扫描结果deviceName:', deviceName);
          console.log('扫描结果deviceIndentify:', deviceIndentify);
          if (typeof deviceName != "undefined" && deviceName !== null &&
            deviceName !== "" && deviceName.indexOf('DP-HT201') !== -1) { //扫描到设备
            connect(deviceName, deviceIndentify);
          }
        }
      },
      success: function(res) {
        console.log('扫描成功:', res);
      },
      fail: function(err) {
        console.log('扫描失败:', err)
      }
    })
  }

  /**
  * 连接蓝牙打印机
  */
  function connect(deviceName, deviceIndentify) {
    mtl.upesn.blueToothConnect({
      deviceIndentify: deviceIndentify, //'9F186DEC-1368-3394-D704-0A9AC0767188'
      deviceName: deviceName, //'DP-HT201-4'
      success: function(res) {
        console.log('连接成功:', res)
        // 打印
        print();
        // 停止扫描
        stopScan();
      },
      fail: function(err) {
        console.log('连接失败:', err)
      }
    });
  }

  /**
  * 停止扫描
  */
  function stopScan() {
    mtl.upesn.blueToothStopScan({
      success: function(res) {
        console.log('停止扫描成功:', res)
      },
      fail: function(err) {
        console.log('停止扫描失败', err)
      }
    });
  }
}

四、测试预览

全部修改完成后,切记点击此处右上角的保存按钮,然后点击预览,即可出现预览界面,可以选择普通或者调试模式,使用友空间扫码,点击蓝牙打印按钮即可。

注意:

  • 只能通过手机调试,电脑无法识别蓝牙设备
  • 必须通过友空间扫码,因为原生插件基于手机友空间开发
  • 打印机长按'mode'按钮,红灯亮、滴一声为开机
  • 打印机指示灯为下图紫色状为已连接成功

image.png image.png image.png

五、参考

友空间提供蓝牙打印相关的API文档

Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2021-09-29 17:44:20

results matching ""

    No results matching ""