彩印机静态网页

本文最后更新于:2020年12月1日 下午

开发彩印机项目web静态页面的问题记录。

前言

之所以以“使用记录”为标题,是因为我觉得我是出于完成任务式地去了解electron这个框架,很多时候甚至官方文档都没咋看,直接在网上找demo套。以至于整个项目下来后,对这个框架并没有比较全面深入的了解,只能说是会用吧。

体验: electron本质上是个nodejs应用程序,不同点是它专注于桌面应用,而不是web服务器。有意思的是,它以web页面作为自己的GUI(图形界面),就像是用javascript控制的一个可魔改的精简浏览器(Chromium )。

正文

1.软件

Electron 前端三语言

2.硬件

EPSON L805 树莓派 13.3寸电容屏 外壳设计

3.问题合集

1.鼠标点击按钮时正常,触屏点击时出现奇怪的阴影

网上查了好一会儿,没得到什么有用的信息。

后来想了想,这种电容屏更多是应用在移动端(ipad手机等),于是更换搜索关键字为: 移动端 点击出现阴影 css,很快就找到一些解决方法。

只需给按钮增加css样式,把点击时的高亮设置为透明

1
2
3
4
5
6
7
tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
/*
tap-highlight-color:当用户轻按一个链接或者JavaScript
可点击元素时给元素覆盖一个高亮色如果想取消这个高亮,将值
设置为全透明即可,比如transparent
*/

2.整合静态页面与驱动脚本

在我这边交互界面(前端)写得差不多后,需要跟后端驱动彩印机(采用的是互联网打印协议(IPP),使用npm上的ipp模块)的朋友对接一下。当然遇到这么一个问题,从网络上获取到的图片要怎么存放,存放在哪 ?

  • 第一时间的想法是在服务器(树莓派)的后端再开一个接口,用来接收前端得到的图片链接,并把图片下载后暂存在本地,供给后端的朋友调用

  • 第一个方法虽然能解决问题,但似乎把问题给复杂化了?前端项目使用了electron框架,其文件main.jsnodejs环境,是可以直接作为后端的啊!于是考虑把朋友那边调用ipp的js代码整合到我的electron项目中,这样一来就不需要下载,仅需把前端获取到的图片文件传递过去,就可以打印了。考虑使用ipcMain模块来把fetch()后再用arrayBuffer()处理的图片传递给后端打印。但是写完后发现,ipcMain不支持该数据格式的拷贝传递。突然翻车。。

  • 第三个想法是后来看到html文件中的ipc模块是用require()引入的,才意识到这里的网页上是有nodejs环境的!那就好办了,这还要啥后端,驱动彩印机部分的代码直接写网页上。使用fetch()获取网络图片先转化为arrayBuffer()后传递给ipp模块,驱动彩印机打印图片。

    但到了这里遇到了一个问题:图片的格式不对。网上稍微查了下,应该是我错把arrayBuffer当成Buffer了,利用Buffer.from()转化一下即可得到Buffer格式的图片。嗯,就这样,彩印机它突突突地就欢快地跑了起来,没其他问题了。

    后续:

    后来我重新试了下,第二个方法(使用ipcMain传参)其实是可行的,不过需要把图片转化为Buffer格式(前面的尝试过程中报错是因为格式搞错了,arrayBuffer()处理后返回的并不是Buffer)。虽然可以,但没必要,嗯。

3.项目打包发布

关于打包,此图诚不欺我

意思大概是如果你打算打包你的electron应用程序,你将会有一段艹蛋的时光

electron官方文档的例子推荐的工具是electron-forge,刚开始照着文档跑了下,体验不佳。一个是会出现奇怪的现象—-生成的exe会有奇怪的启动画面。另外,程序莫名其妙地被运行了两次,一次是立即执行,另一次是在启动动画之后执行。翻了几遍electron-forge官方文档,也没有找到任何关于启动时的动画的配置介绍(好吧,我觉得那更像是一个bug,而不是我所想的启动动画,如图)

想了好一会,觉得这并不是我这边出的问题,应该是打包工具electron-forge的bug了,另寻他路。在electron文档里看到了electron-builder,这个用起来就感觉挺好的,主要是安装配置遇到了点麻烦。

关于安装,官网是这么说的

Yarn is strongly recommended instead of npm.

啊,我用的是npm,所以踩了一堆坑,以下是我的踩坑表演

1
npm install electron-builder --save-dev

配置package.json

  • 填入name, description, versionauthor.

    1
    2
    3
    4
    5
    6
    {  
    "name": "my-electron-app",
    "description": "description",
    "version": "1.0.0",
    "author": "lyq"
    }
  • 打包的配置。下面是mac和linux的配置,但windows环境下(我win10)并不能生成mac和linux,默认只能生成windows的包…

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    "build": {
    "appId": "your.id",
    "mac": {
    "category": "your.app.category.type"
    },
    "linux": {
    "target": [
    "AppImage",
    "deb"
    ]
    }
    },
  • 添加脚本

    1
    2
    3
    4
    "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
    }

配置好后运行

1
$ npm run dist

然后会报几个错。告诉你winCodeSign-2.6.0nsis-3.0.4.1,nsis-resources-3.4.1包rename失败。稍微看了下。它是把包下载下来后再改名的,但没有权限改名(access is denied)。这里我就不太能理解了,我已经给了管理员权限,应该可以改名的啊。

解决的办法是手动改名。直接打开tempFile的路径,把文件夹181096083改名为winCodeSign-2.6.0。之后会再遇到两次类似的错误,处理办法也是一样的,找到文件,然后改名就行了。

最后再运行打包命令npm run dist,就成功运行,生成的安装包在dist文件夹下。

题外话

electron文档翻译简中版有挺多小错误的,但当我想参与修正时,发现进入编辑的是beta版本,正式发布的版本与可编辑的版本内容差别很大,连quick start的demo都不一样。阿这….好复杂,算了。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!