Electron构建桌面应用程序

一、开发环境配置

安装Node.js , 推荐安装最新的 长期支持版本 或者 当前发行版本 。 访问Node.js下载页面,选择Windows Installer。 下载完成后, 执行安装程序,根据引导完成安装即可。在安装过程中的配置界面, 请勾选Node.js runtimenpm package managerAdd to PATH这三个选项。

二、electron项目的使用

1.进入项目根目录

cd electron-quick-start

2.安装依赖包

npm install

可能会出现安装失败的情况,需要重新安装node.js和npm,然后尝试

npm install -g node-gyp

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

再进行依赖包安装。
3.将您(html、js、css构成)的项目拖入electron项目中(放在根目录或者放入新建文件夹)。
4.在electron项目的main.js文件中的createWindow方法中写入

  mainWindow.loadFile('index.html')  // 注意自己的index.html文件的相对路径

5.启动项目

npm start

6.打包项目

npm run package

三、将应用与设备绑定,实现应用只能在指定设备上运行。

使用node-machine-id插件生成设备唯一识别id。

1.安装node-machine-id

npm install node-machine-id

2.使用node-machine-id
在main.js文件中写入

const { ipcMain} = require('electron')
const {machineId, machineIdSync} = require('node-machine-id')

在createWindow方法中写入

ipcMain.on('getMachineId',function(event, arg) {
    machineInfo = machineIdSync()       
    event.sender.send('machineId',machineInfo); 
  }) 

在renderer.js文件中写入

const ipcRenderer = require('electron').ipcRenderer

在您的index.html文件引入renderer.js


在您的index.html写入

const ipc = require('electron').ipcRenderer
const comID = '' //此常量为需要绑定的设备id
ipc.send("getMachineId");
    ipc.on('machineId',function(event, arg) {
    console.log(arg) // arg即为获取到当前设备的id ,用rag与comID 作比较判断当前设备是否为绑定的设备
})

3.使用electron-builder打包项目。
使用npm run package打包项目,应用出现无法找到node-machine-id的问题。
安装electron-builder打包项目

npm install electron-builder

在package.json文件的scripts加入

    "dist": "electron-builder --win --x64",

打包项目

npm run dist

打包成功后,项目根目录会出现dist文件夹,其中password-strength Setup 1.0.0.exe即为应用安装文件。

你可能感兴趣的:(Electron构建桌面应用程序)