Electron创建桌面应用程序Helloword

推荐选择官方给的demo，非常方便。

github上拉取electron-quick-start

1. 如果没有github账户，那么得首先注册一个github账号
2. Github地址：https://github.com/electron/electron-quick-start
3. 然后在自己电脑新建一个文件夹作为github本地仓库
4. 然后在本地仓库里 git clone https://github.com/electron/electron-quick-start

5. 待项目拉到本地后进入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

该文件是需要展示的内容

打包

1. 先把打开的桌面客户端关闭掉然后运行命令安装electron打包工具
   
npm install electron-packager --save-dev
成功后：
<ul><li>electron-packager@10.1.0
added 73 packages in 13.728s


2. 修改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-*”

3. 运行命令

   npm run build

   成功后会看到
   

4. 补充

如果在打包过程中出错了，请仔细看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文件夹下可以看到