Electron初探

H5開發桌面應用？

沒錯，H5如今也能夠開發跨平臺的桌面應用了，這意味着咱們能夠用網頁來設計和製做桌面應用。

基於Node.js的Electron框架就能夠實現桌面應用，比較有名的Electron框架實現的桌面應用就是微軟的VS Code了，下面給出Electron的官網地址：

https://electronjs.org/

建立項目

能夠在項目中做爲依賴項安裝：

npm install electron --save-dev

也能夠全局進行安裝：

npm install electron -g

快速建立一個項目的方式是直接把官網的示例拉下來便可：

https://github.com/electron/electron-quick-start

安裝命令以下：

npm install

啓動命令以下：

npm start

而後就能夠看到啓動界面了。

打包應用

使用npm下載安裝electron-packager：

npm install electron-packager -g

安裝好後，進入要打包的應用目錄執行下面的腳本便可：

D:\electron-quick-start>C:\Users\Administrator\AppData\Roaming\npm\electron-packager . TestApp --out ../electronPublish

1. C:\Users\Administrator\AppData\Roaming\npm\electron-packager：是下載後的electron-packager文件所在地址；
2. .：表示打包當前目錄；
3. TestApp：應用名稱；
4. --out ../electronPublish：輸出目錄爲上級目錄electronPublish;

打包後的Windows端程序，目錄下的resources\app文件夾就是網頁資源存放目錄，用於支持運行的其它文件大概有130M。

最後說一下

Electron實際上就是Node.js的操做文件的能力+Chrome內核的渲染能力+v8引擎的速度的一個集合體，額外擴展了系統控件和文件處理的能力。

因爲H5項目的特性，實際上，只須要打包出示例的程序以後，就能夠經過替換resources\app文件夾下的內容來達到替換應用的功能的目的，另外若是直接將鏈接指向網上的地址也是能夠的，可是要注意，這樣會使網絡上的JS擁有控制電腦內全部文件的權限，會出現很大的安全風險。