Electron创建桌面应用程序Helloword

小灰灰 2020-11-29 15:25 641阅读 0赞

# Electron创建桌面应用程序Helloword #

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

## github上拉取electron-quick-start ##

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

![这里写图片描述][SouthEast]

## 项目结构 ##

![这里写图片描述][SouthEast 1]

#### 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
    
    成功后会看到  
    ![这里写图片描述][SouthEast 2]
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)

## 目录 ##

双击打包生成的文件夹  
![这里写图片描述][SouthEast 3]  
其中electron-quick-start.exe就是目标应用了  
源码的话在resources文件夹下可以看到

[https_github.com_electron_electron-quick-start]: https://github.com/electron/electron-quick-start
[SouthEast]: /images/1606663520077.png
[SouthEast 1]: /images/1606663496218.png
[SouthEast 2]: /images/1606663470759.png
[SouthEast 3]: /images/1606663442720.png