分类归档 项目

通过孟繁永

自制热敏打印机连接器始末（4）

都调试起来以后，连接打印机，发现打印机根本没反应，网上找到的相关资料很少，大部分都是在windows或者linux上做的，难道是mac的osx有一些安全限制，导致打印的指令被拦截了。

于是照着这个思路查下去，终于找到了一个新的东西：CUPS。其实这个东西支持linux也支持mac，按照说明添加上打印机之后，确实能在mac的打印机列表中看到了，而且在系统打开一个文件用这个打印机打印，是有动作的，尽管是瞎走纸，没有真正的输出。但至少说明是有希望了。

那么为什么用electron-escpos还是无法打印呢，甚至依然连走纸反应都没有。

无奈又去得力的官网看了看，找到888B这个打印机的说明书，仔细瞅了一眼，竟然发现它说他的编程语言是TSPL，不兼容ESCPOS，擦，过于相信刚找到escpos这个神奇的协议的时候它所说的几乎所有的打印机都支持了。

https://blog.csdn.net/weixin_34355881/article/details/89543300这篇文章介绍了打印机主流的指令类型（ESC命令集+CPCL命令集+TSPL命令集）之间的区别。这就解释了上面我对打印机类型的模糊认识

好了，标签打印机一般用TSPL命令集，票据打印机一般用ESCPOS。而我用的得力888B(NEW)是标签打印机。

那么，就需要将原来的escpos换成tspl来写打印命令。

通过孟繁永

自制热敏打印机连接器始末（3）

接上一篇，分清楚了两种模块的规范，那么怎么解决两种规范的不同呢，似乎可以通过配置babel来实现，于是我在babel.config.js中尝试了很多办法，都没有收效，归根结底是还没有搞清楚vue和electron之间是如何各自适用这些规范的。

按照某种说法，最新的vue是遵循ES6，而electron或者说node模块是CommonJs，但是，在项目中，npm install进来的模块都放在node_modules中，怎么区分呢，如果不是babel.config.js来负责，那就应该是electron相关的，于是我找到了electronBuilder这个配置。

在vue.config.js（如果没有则在项目根目录新建）中：

module.exports = {
  configureWebpack: {
    devtool: "source-map"
  },
  pluginOptions: {
    electronBuilder: {
      // List native deps here if they don't work
      externals: ["escpos", "escpos-usb"]
      // If you are using Yarn Workspaces, you may have multiple node_modules folders
      // List them all here so that VCP Electron Builder can find them
    }
  }
  // chainWebpack: config => {
  //   config.module
  //     .rule("js")
  //     .test(/\.jsx?$/)
  //     .exclude.clear()
  //     .end()
  //     .include.add(function() {
  //       return ["./node_modules/escpos", "./node_modules/escpos-usb", "src"];
  //     })
  //     .end();
  // }
};

这个发现得益于https://medium.com/@nyorikakar/printing-with-vue-electron-and-node-f52a730e63e7这篇文章，而且我还在后面的评论中发现了https://github.com/song940/node-escpos/issues/297，最终靠这些信息搞清楚了逻辑。

（1）对于用于node的模块，需要在vue.config.js的externals那里列出，这样，vue就不会让babel啥的那些loader去处理了。

（2）负责和node打交道的代码要放在background.js中，这在前面第二个连接中可以看到，而且最关键的是在vue的代码因为是通过BrowserWindow加载的，在其初始化是webPreferences中的nodeIntegration这个属性需要配置为true，const { ipcRenderer } = window.require(“electron”);才能用。而且，这个true如果是放在.env中不能直接给process.env.ELECTRON_NODE_INTEGRATION=true，那样，调到的是字符串，不是布尔值，会出现下面的报错：

Uncaught TypeError: window.require is not a function
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (App.vue:22)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module../src/App.vue?vue&type=script&lang=js& (App.vue?c53a:1)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module../src/App.vue (App.vue:1)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module../src/main.js (HelloWorld.vue?adfd:1)

通过孟繁永

自制热敏打印机连接器始末（2）

接上一篇，选择vue+electron之后，那就按electron-vue这个来。虽然能跑起来，但是代码上传到git以后，收到很多高危报警，https://github.com/futuremeng/electron-vue-escpos-bridge

尝试升级一下，结果发现因为版本已经差太多，需要花很多时间修，遂放弃。通过检索，发现有一个新的方案，https://nklayman.github.io/vue-cli-plugin-electron-builder/。

于是，开启新的https://github.com/futuremeng/vue-electron-builder-escpos-printer-bridge

先用vue cli4创建一个新的项目，再vue add electron-builder。尝试运行yarn electron:serve 的时候提示Vue Devtools下载失败，需要翻墙跑成功一遍才行。

接下来分析打印机如何连接，通过检索发现escpos这个协议，据说是大部分打印机都支持的。那么是否可以用escpos直接驱动打印机呢，网上有树莓派的示范。

在寻找合适的escpos驱动的时候，发现了各种版本的，除了java、python，还有php和node，我决定选择node版的https://www.npmjs.com/package/escpos。

但是，当然当我尝试引入到项目的时候，悲剧发生了。

通过孟繁永

自制热敏打印机连接器始末（1）

前情回顾：做了一个网站，需要在网页上打印二维码，将热敏打印机连到电脑上，在网页上直接用print打印出来的二维码完全无法识别，应该是分辨率的问题，因为屏幕的分辨率和打印机的分辨率差太多。所以寻找解决方案，找到了c-lodop.com这个网站提供的中间件，需要付费，而且只有win版。

需求分析：现在重构网站，计划做成saas模式，在打印模块上，需要尽量摆脱第三方的束缚，所以构思如何自己实现。

网页到打印机，这中间是网页-浏览器-操作系统-usb-打印机，这样一个路径。经过确认，网页直接连打印机是不显示的，有一个比较接近的办法是通过chrome的app方案，但通用性不高，放弃，那就只剩下跟lodop一样的模式了，要么把整个网站构建成桌面程序，要么通过中间件来连打印机，网页再通过http或者socket驱动中间件。

当然，选择一个中间件是比较合适的，整个后台构建成桌面程序，没有必要，维护起来也太笨重。

接下来，就是选择跨平台的桌面程序方案来做这个中间件了。需要实现几个部分，一是http或者socket，二是打印机连接，中间的打印机连接管理。

当然，首选相对比较熟悉的vue+electron的方案。

通过孟繁永

期待产品原型、UI设计与开发统一版本管理工具

目前产品原型到UI设计，再到开发测试上线，是分离的，目前尚未发现有一统天下的工具和平台。

我倒是非常渴望有这么一个工具，尤其对于小团队而言。具体的需求就是将产品原型、UI设计、开发测试三者的版本管理集中在一起，每个阶段的某个版本有若干状态，如设计中/已推送/已交付/已验收。墨刀实现了产品经理与UI设计之间的协同，如果再能与开发协同一下则更棒。

对一个项目而言，有这么几个部分，页面树、工作流、页面。页面是基本元素，页面数上可以标注该页面存在的生命周期，如从v1到v4，或者从v3到v5，并且设定发布的url，可以包括测试版地址和发布版地址，工具根据url自动快照，获取当前版本，并通过图像识别对比差异，只保留变更的版本，存入版本库。而产品原型和UI设计的版本分别由产品经理和UI设计师标注和提交。查看时，可以查看最新版，也可以专门查看某一版本的执行情况。

通过孟繁永

紧张的2016

停博一年，幸好没有停bo，不过这一年也真是紧张的很，一紧张就把博客攒了好多年的附件全部清空了。

2015年底的时候，状态有点像五年前，在武汉，已经动了离开武汉的念头，恰好遇到了tricia，这个神奇的人让我在武汉又多留了几个月，这几个月经历是北京这几年的一个基础。五年之后，尽管没有什么规划，也是觉得生活又告一段落，该有个改变了。

恰好接到一个电话，大数据这个概念方兴未艾的时候我已经听过厚数据的概念，可是厚数据毕竟没有火起来，而大数据还在火热的创业泛滥阶段，既然又这么个机会，我就一个周末都没耽误，从周五到周一，直接换了个地方上班，告别了大师兄，告别了中少社的美妈编辑同事们。

直到我离开大数据公司的时候，回头做了个总结，8个月的时间，我发了2000多封邮件，估计至少占到这些年累计发送量的99%，尽管邮件发出去未必有理想的效果，不过对自己来说，每一次发送都是从思考到实践的过程，不得不感谢这么一段经历，验证了从一个类事业单位出来，脑子也依然没有废掉，我依然是想法很多，动作很快的我。

2016过去了三个季度，很匆忙，又有点无序，借用一位离职同事的理由，我还是没找到自己心的归宿。于是，我开始了在编辑邦的日子。