微信小程序云打印开发

前言

之前我们在 web 端实现了云打印的功能，这次就在微信小程序实现，两者代码实现还是有些差别，不过原理都是一样，打印端跟本地打印助手发送打印消息，打印助手收到消息后，调用打印服务

避坑

因为打印服务端node-hiprint-transit是基于socket.io实现通讯，在小程序端也要用同样的框架，网上搜了一番，尝试下来，weapp.socket.io符合要求

这里还需要注意打印服务端socket.io的版本，我部署的服务使用的版本是 "socket.io": "^4.7.2"，npm 安装的 weapp.socket.io 使用的版本是 2.0.0，连接超时。经测试 ^3.1.0 版本连接正常。这个版本需要到 weapp.socket.io 仓库下下载 tag v3.0.0 版本的项目，本地构建获取 js 文件

开搞

我这里以 vue2 的 uniapp 项目为例，引入构建产物，开始云打印开发

初始化

创建初始连接

const PRINT_SOCKET_URL = "https://www.xxx.com:17520";
const PRINT_SOCKET_AUTH_TOKEN = "xxx";

export function initPrintSocket() {
  if (printSocket) {
    return printSocket;
  }

  printSocket = io(PRINT_SOCKET_URL, {
    transports: ["websocket"],
    auth: {
      token: PRINT_SOCKET_AUTH_TOKEN,
    },
  });

  registerBaseListeners(printSocket);
  return printSocket;
}

registerBaseListeners 注册一些监听事件，详细可以看node-hiprint-transit，我们注册几个常用事件

function registerBaseListeners(socket) {
  socket.on("connect", () => {
    console.log("[print-socket] connected:", socket.id);
  });

  socket.on("connect_error", (error) => {
    console.error("[print-socket] connect error:", error);
  });

  socket.on("disconnect", (reason) => {
    console.log("[print-socket] disconnected:", reason);
  });

  socket.on("render-print-success", (data) => {
    console.log("打印成功");
  });
  socket.on("render-print-error", (data) => {
    console.log("打印失败");
  });
  socket.on("printerList", (res) => {
    printLint = res;
  });
}

在 main.js 引入初始化函数

import { initPrintSocket } from "./utils/printSocket.js";

initPrintSocket();

启动小程序，控制台显示连接成功

调用打印

确保本地已经安装打印助手，并且打印助手已和打印服务端建立连接

在小程序业务页面，调用打印 api，api 说明地址

  printSocket.emit("render-print", {
    template: JSON.stringify(printTemplateInfo.content),
    data: record,
    client: getDefaultPrinter().server.clientId,
  });

template是前端保存的打印模板，data是需要打印的数据，client是打印机列表里的属性，云打印必传

调用成功，打印成功回调显示打印日志，在本地打印助手右键“打印记录”，可以看到打印日志

注意🤯

打印模板设计器，打印助手和打印中转服务三者 api 有交叉，可能会显得比较乱，推荐着重看apiDoc和打印助手这两个地方相关 api