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

一年好景君须记，最是橙黄橘绿时。这篇文章主要讲述使用electron搭建桌面app的简便方法相关的知识，希望能为你提供帮助。
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #e4af0a } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px "Helvetica Neue"; color: #454545 } p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px } p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px ".PingFang SC"; color: #454545 } span.s1 { font: 12.0px ".PingFang SC" } span.s2 { color: #454545 } span.s3 { color: #e4af0a } span.s4 { font: 12.0px "Helvetica Neue" }使用electron官方给出的`electron-quick-start`示例项目，将其拷贝下来，

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

里面三个主要的文件：

---- index.html 起始页
---- main.js 显示项目启动后的窗口，里面可以做一些配置，比如浏览器窗口大小，起始页设置
---- renderer.js 里面的注释翻译一下就了解了，主要是放业务相关js的，既可以访问dom，也可以使用node API

然后 npm install 安装模块

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

如何将项目发布为app呢

1.在起始页上使用iframe标签引入项目，即
【使用electron搭建桌面app的简便方法】

index.html:< div> < iframe src="https://www.baidu.com” frameborder="0"> < /iframe> < /div> //src 里放置你的线上项目的url即可

2.安装
npm install electron-packager -g

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

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

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