使用electron搭建桌面app的简便方法
Posted doublealoe
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用electron搭建桌面app的简便方法相关的知识,希望对你有一定的参考价值。
使用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标签引入项目,即
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表示一次性把所有的操作系统都打包一遍