Electron创建桌面应用程序Helloword
推荐选择官方给的demo,非常方便。
github上拉取electron-quick-start
- 如果没有github账户,那么得首先注册一个github账号
- Github地址:https://github.com/electron/electron-quick-start
- 然后在自己电脑新建一个文件夹作为github本地仓库
- 然后在本地仓库里 git clone https://github.com/electron/electron-quick-start
待项目拉到本地后进入electron-quick-start项目的根目录运行cmd执行
npm install
这里需要比较久的时间,耐心等待会
npm notice created a lockfile as package-lock.json. You should commit this file.
added 152 packages in 342.561s
当出现上面这种代码时再执行
npm start
然后桌面会打开应用并且命令行中出现electron-quick-start@1.0.0 start D:\WSworkspace\electron\electron-quick-start
electron .
项目结构
package.json
其中main.js的名称不是固定的,你可以任意定义,但是千万记得在package.json中写相同的名字,否则无法启动app。
“main”: “main.js”
如果main字段没有声明,则会优先加载index.js
main.js
main.js用于创建窗口和处理系统事件。
index.html
该文件是需要展示的内容
打包
- 先把打开的桌面客户端关闭掉然后运行命令安装electron打包工具
npm install electron-packager --save-dev
成功后:
<ul><li>electron-packager@10.1.0
added 73 packages in 13.728s
修改package.json文件
"scripts": { "start": "electron .", "build": "electron-packager . electron-quick-start --platform=win32 --arch=x64 --ignore=node_modules/electron-*" },
“build”: “electron-packager . electron-quick-start –platform=win32 –arch=x64 –ignore=node_modules/electron-*”
运行命令
npm run build
成功后会看到
- 补充
如果在打包过程中出错了,请仔细看cmd控制台输出或者日志文档
一般情况下容易犯错的有:electron打包工具没安装好;package.json文件内容有问题
关于package.json中的electron-packager命令格式
electron-packager 项目目录 app名称 --platform=平台 --arch=架构 --ignore=忽略的目录/文件
arch
ia32 , x64 , armv7l , all
plateform
linux , win32 , darwin , mas , all
OS X (also known as darwin)
Mac App Store (also known as mas)
目录
双击打包生成的文件夹
其中electron-quick-start.exe就是目标应用了
源码的话在resources文件夹下可以看到