使用electron搭建桌面app的简便方法

使用electron官方给出的`electron-quick-start`示例项目，将其拷贝下来，

1. git命令:   git clone https://github.com/electron/electron-quick-start.git

 

 

里面三个主要的文件：

 

---- index.html       起始页

---- main.js            显示项目启动后的窗口，里面可以做一些配置，比如浏览器窗口大小，起始页设置

---- renderer.js       里面的注释翻译一下就了解了，主要是放业务相关js的，既可以访问dom，也可以使用 node API

 

 

2.  npm install  安装模块

 

3.  npm start 启动，可看到一个hello world！的框框

 

 

如何将项目发布为app呢?

 

4.在起始页上使用iframe标签引入项目，即

 

index.html:

  <div>
　　　 <iframe src="https://www.baidu.com” frameborder="0"> </iframe>   
  </div>

 // src 里放置你的线上项目的url  即可

 

 

5.安装打包工具 electron-packager

 

npm install electron-packager -g

 

 

6.执行打包命令

 

electron-packager就会自动判别当前的操作系统打包对应的文件，win下.exe, Mac 下.app 

 

electron-packager . aloe --out ../electron -all

 

解释：

 

将当前目录下的文件输出到 electron ，并将app包命名为aloe ，-all 表示将所有的操作系统都打包一遍。

打包的时候会把浏览器内核完整打包进去，所以打包后的文件一般都比较大

 

 

 

 

 

第6条还可以改变icon并打包 ：

 

electron-packager ./ aloe --platform=mas --overwrite --icon=./iconpath

这是mac系统下的改变icon的命令