zoukankan      html  css  js  c++  java
  • 使用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的命令 

     

  • 相关阅读:
    Git SSH Key 生成步骤
    Mac终端(Terminal)自定义颜色,字体,背景
    MAC进入文件夹快捷键
    在Terminal中,如何打开Finder,并显示当前的目录
    mac文件夹怎么重命名?苹果电脑文件夹重命名快捷键
    如何在Mac OS X中开启或关闭显示隐藏文件命令
    怎样将二个路由进行桥接的方法
    关于apache access log 统计的那些事儿
    aaaa
    CodeForces463C Gargari and Bishops(贪心)
  • 原文地址:https://www.cnblogs.com/aloehui/p/9035468.html
Copyright © 2011-2022 走看看