electron和PCSC-lite使用

创建一个electron项目：

创建空文件夹，然后打开命令行

npm init

文件目录中会出来一个package.json文件：

{
  "name": "pcscdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

把这个 Node 应用转换成一个 Electron 应用也是非常简单的，我们只不过是把 node 运行时替换成了 electron 运行时。

{
  "name": "pcscdemo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",    //这是electron的主进程
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

安装 Electron
需要安装electron。我们推荐的安装方法是把它作为您 app 中的开发依赖项，这使您可以在不同的 app 中使用不同的 Electron 版本。在您的app所在文件夹中运行下面的命令：

 npm install --save-dev electron

出现下图即为安装成功：
下载electron成功

开发一个简单的electron项目
Electron apps 使用JavaScript开发，其工作原理和方法与Node.js 开发相同。 electron模块包含了Electron提供的所有API和功能，引入方法和普通Node.js模块一样：

const electron = require('electron')

完整的main.js文件如下：

const { app, BrowserWindow } = require('electron')

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win

function createWindow () {
  // 创建浏览器窗口。
  win = new BrowserWindow({ width: 800, height: 600 })

  // 然后加载应用的 index.html。
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()

  // 当 window 被关闭，这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    win = null
  })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow()
  }
})

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。

最后编辑想显示的index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

在此，就可以运行：

electron .

正常显示

安装PCSC-lite

npm i pcsclite

会报错

$ npm i pcsclite

> [email protected] install E:\aPritice\dd\electron\electronandpc\node_modules\buffertools
> node-gyp rebuild


E:\aPritice\dd\electron\electronandpc\node_modules\buffertools>if not defined npm_config_node_gyp (node "C:\Users\d\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "C:\Users\d\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
Warning: unrecognized setting VCCLCompilerTool/MultiProcessorCompilation
Warning: unrecognized setting VCCLCompilerTool/MultiProcessorCompilation
????????????????????????????????ò??????????????/m???????
MSBUILD : error MSB3428: δ????? Visual C++ ?????VCBuild.exe??????????????1) ??? .NET Framework 2.0 SDK??2) ??? Microsoft Visual Studio 2005???? 3) ?????????????????????λ???????λ????????·???С? [E:\aPritice\dd\electron\electronandpc\node_modules\buffertools\build\binding.sln]
gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Users\zoe\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:182:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:240:12)
gyp ERR! System Windows_NT 10.0.17134
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\d\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd E:\aPritice\dd\electron\electronandpc\node_modules\buffertools
gyp ERR! node -v v10.15.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\d\AppData\Roaming\npm-cache\_logs\2019-02-18T11_04_44_471Z-debug.log

对于这个问题，查询了很多文档，然后跟着运行了下，
先下载c++的库，http://8dx.pc6.com/xjq6/MSVBCRT_AIO_2019.01.25.zip，
下载后，解压安装；
这个安装后，netframework 4.0 也安装下，这个可以直接在Windows设置内打开这个功能
下载netframework 地址：https://www.microsoft.com/en-US/Download/confirmation.aspx?id=17718；

以管理员身份运行cmd:

npm install --global --production windows-build-tools

等待完成，很漫长
window-build-tools下载
，
虽然上述的命令完成了，但是我的本地还是不能正常npm i pcsclite;


E:\GD>npm i pcsclite

> [email protected] install E:\GD\node_modules\buffertools
> node-gyp rebuild


E:\GD\node_modules\buffertools>if not defined npm_config_node_gyp (node "C:\Users\zoe\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "C:\Users\zoe\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
Warning: unrecognized setting VCCLCompilerTool/MultiProcessorCompilation
Warning: unrecognized setting VCCLCompilerTool/MultiProcessorCompilation
在此解决方案中一次生成一个项目。若要启用并行生成，请添加“/m”开关。
MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题，1) 安装 .NET Framework 2.0 SDK；2) 安装 Microsoft Visual Stu
dio 2005；或 3) 如果将该组件安装到了其他位置，请将其位置添加到系统路径中。 [E:\GD\node_modules\buffertools\build\binding.sln]
gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Users\zoe\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:182:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:240:12)
gyp ERR! System Windows_NT 10.0.17134
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\zoe\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd E:\GD\node_modules\buffertools
gyp ERR! node -v v10.15.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm WARN enoent ENOENT: no such file or directory, open 'E:\GD\package.json'
npm WARN GD No description
npm WARN GD No repository field.
npm WARN GD No README data
npm WARN GD No license field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\zoe\AppData\Roaming\npm-cache\_logs\2019-02-20T02_09_57_123Z-debug.log

npm i windows-build-tools 本来这一条命令就可以的但不知道为啥没安装，我就手动打开软件Visual Studio installer，安装的
Visual Studio下载

就可以

npm install pcsclite

运行,下载 pcsclite了，感觉好艰难。。。
终于成功下载
接着就可以继续踩坑了：

官网：https://www.npmjs.com/package/pcsclite

windows+R，进入CMD—输入：services.msc回车，打开很多的程序程序
smart card

找到Smart Card ，设置为自动启动类型，确认。
自动运行smart card
然后运行 npm run start

然后会报错：
项目启动失败

服务会自己停止：
服务自己停止
网上很多遇到相同问题的人：
社区讨论有：https://social.technet.microsoft.com/Forums/en-US/9a411810-5ced-4513-a3e3-96b07ae0a0f6/smartcard-service-never-stays-in-quotautomaticquot-mode?forum=win10itprogeneral；
https://superuser.com/questions/773257/scardestablishcontext-service-not-available；
https://social.msdn.microsoft.com/Forums/en-US/8654d538-befa-4e5f-ba47-7a3b35bc4591/scardlistreaders-returns-0x6bf?forum=vssmartdevicesnative；

换个其他的类库试试：nfc-pcsclite
可以直接拉一下npm网站中，nfc-pcsclite的示例代码：
如果要查看它的运行情况，请克隆此存储库，使用npm安装依赖项并运行npm run example。

git clone https://github.com/pokusew/nfc-pcsc.git
cd nfc-pcsc
npm install
npm run example

在运行npm run start,过程中，
版本问题
在electron中如果要使用node的原生库，需要看这个文档
https://electronjs.org/docs/tutorial/using-native-node-modules
需要先下载electron-rebuild，一定要写–save，保存到依赖中

npm install --save electron-rebuild

需要使用这个对一些模块进行编译，也要在package.json中dependence，才可以使用
需要重新输入以下命令（逐条）：

rm -rf node_modules
npm install
npx electron-rebuild
npm run start

依赖rebuild

然后运行代码 npm run start，我的项目停止不动了：
没有显示静止不动
还是运行不起作用，这时候你就需要一个读卡器硬件来辅助。我找了一个NFC读卡器，插入到电脑中。
有的硬件需要装驱动，下载适合的驱动，然后连接读卡器。
连接好硬件，就可以重新启动项目了，如果你有相对应的卡，可以启动后，插入读卡器，我的pcsc代码是看npm库的官网案例，直接拷贝进入main.js的，后根据不同需要去调整代码，然后

 npm run start

不只是页面出来了，命令行也打印出东西了，为什么只有removed呢？因为把卡插反了,尴尬了…,正确插入卡片就会打印出你想要的数据
pcsclite有输出
你可以console.log一些信息出来，以便自己可以进行操作
然后就可以正常的编辑代码了。
感觉这个坑，跳了好久，也蒙圈了很久，记录下，帮助自己加深印象!!!
加油！有问题的也可以交流沟通，不对的请指出来，一起学习！

electron和PCSC-lite使用

猜你喜欢