electron和PCSC-lite使用

建立一個electron項目：html

建立空文件夾，而後打開命令行

npm init

文件目錄中會出來一個package.json文件：node

{
  "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 運行時。
package.json中不要有註釋，這個是方便理解的，在運行時要刪除c++

{
  "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

出現下圖即爲安裝成功：
git

開發一個簡單的electron項目
Electron apps 使用JavaScript開發，其工做原理和方法與Node.js 開發相同。 electron模塊包含了Electron提供的全部API和功能，引入方法和普通Node.js模塊同樣：

const electron = require('electron')

完整的main.js文件以下：github

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:web

<!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>

在此，就能夠運行：chrome

electron .

安裝PCSC-litenpm

npm i pcsclite

會報錯json

$ npm i pcsclite

> buffertools@2.1.6 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 pcscdemo@1.0.0 No description
npm WARN pcscdemo@1.0.0 No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! buffertools@2.1.6 install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the buffertools@2.1.6 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；windows

以管理員身份運行cmd:

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

等待完成，很漫長

，
雖然上述的命令完成了，可是個人本地仍是不能正常npm i pcsclite;

E:\GD>npm i pcsclite

> buffertools@2.1.6 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! buffertools@2.1.6 install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the buffertools@2.1.6 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，安裝的。
下方頁面找不到，能夠點擊這裏就會直接下載，而後就會出現如下的頁面（2019-04-24日添加）

就能夠

npm install pcsclite

運行,下載 pcsclite了，感受好艱難。。。

接着就能夠繼續踩坑了：

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

windows+R，進入CMD—輸入：services.msc回車，打開不少的程序程序

找到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

而後運行代碼 npm run start，個人項目中止不動了：

仍是運行不起做用，這時候你就須要一個讀卡器硬件來輔助。我找了一個NFC讀卡器，插入到電腦中。
有的硬件須要裝驅動，下載適合的驅動，而後鏈接讀卡器。
鏈接好硬件，就能夠從新啓動項目了，若是你有相對應的卡，能夠啓動後，插入讀卡器，個人pcsc代碼是看npm庫的官網案例，直接拷貝進入main.js的，後根據不一樣須要去調整代碼，而後

npm run start

不僅是頁面出來了，命令行也打印出東西了，爲何只有removed呢？由於把卡插反了,尷尬了…,正確插入卡片就會打印出你想要的數據

你能夠console.log一些信息出來，以便本身能夠進行操做
而後就能夠正常的編輯代碼了。
感受這個坑，跳了很久，也蒙圈了好久，記錄下，幫助本身加深印象!!!
加油！有問題的也能夠交流溝通，不對的請指出來，一塊兒學習！

本文同步分享在博客「zoepriselife316」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。