使用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标签引入项目,即

 

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表示一次性把所有的操作系统都打包一遍