• https://electronjs.org/ —— 官网
  • https://github.com/electron/electron-api-demos/releases —— 下载demo

下载安装:

# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start # 进入这个仓库
$ cd electron-quick-start # 安装依赖并运行
$ npm install && npm start

安装打包插件/安装并打包:

npm install electron-packager -g

参数如下为打包执行命令的原型:

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
执行如下:
electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_modules

成功运行完成后,生成文件:

点击查看结果如下:



部分参数解释:
  • rimraf 一个豪华版本的rm -rf,兼容window。
  • cross-env 一个豪华版本的环境变量设置,有NODE_ENV=*的地方,就可以考虑使用cross-env,兼容window。
  • ./,一般为package.json的位置。具体可以见这里:https://newsn.net/say/electron-quick-start-modify.html
  • appname,这个会影响你打包完毕的可执行文件(exe/dmg)的名字(appname.exe)。
  • --platform--arch,这两个参数有非常多的变形。这里有详细解释:https://newsn.net/say/electron-packager-basic.html
  • --win32metadata.FileDescription,文件描述信息。见这里:https://newsn.net/say/electron-packager-exe-info.html
  • --overwrite,是否覆盖原有的生成文件。它和下面几项有关系:--out=out--ignore=outrimraf out
  • --ignore,要排除掉的不打包的文件,可以叠加效果。主要是出于减少最终文件大小的考虑。
  • --no-prune,这个参数请慎用,是说不处理node_modules里面dev依赖包,把相关的代码都放进最终asar里面。默认情况下,是会将dev相关的node_modules里面的包给去除之后,再打包的。注意:目前的最新版electron-packager里面没有--prune参数。
  • --electron-version,指定打包时使用的electron的版本。见这里:https://newsn.net/say/electron-packager-control-version.html 。注意:最新版的electron-packager没有--version参数。
  • --out打包完的可执行文件,放在在哪里。
  • --icon设置打包的时候的图标。敲黑板重点,天天有人问如何更换这个图标,就这里更换。图标制作的问题,请参见:https://newsn.net/say/electron-mac-icns.html 和 https://newsn.net/say/electron-ico-format.html 。图标都是特制的图标,妄图不制作图标就能完美无缺更换的想法,都是徒劳的。千万牢记。
  • --asar打包选项,是否在resource文件夹下面,生成app.asar文件。否则将会是个app文件夹加上自己的代码文件。

使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的更多相关文章

  1. .NET Core 构建跨平台的桌面应用

    1.运行环境 开发工具:Visual Studio 2017 JDK版本:.NET Core 2.0 项目管理工具:nuget 2.GITHUB地址 https://github.com/nbfujx ...

  2. Electron - 创建跨平台的桌面客户的应用程序

    Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromium 开源项目,并用于在 ...

  3. NativeScript - JS 构建跨平台的原生 APP

    使用 NativeScript,你可以用现有的 JavaScript 和 CSS 技术来编写 iOS.Android 和 Windows Phone 原生移动应用程序.由原生平台的呈现引擎呈现界面而不 ...

  4. 小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载四(场景切换)

    作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...

  5. 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》串行4(场景变化)

    作为一个真正的利用价格值应用,首先,你应该至少有两页,通过切换页面来实现很多其他互动.比如手机人人网,首先,打开后进入登录页面,将有登录后,新的东西.然后拉左侧面板.你可以看到相册.私人信息.像其他应 ...

  6. Molecule – 帮助你构建跨平台的 HTML5 游戏

    Molecule 框架由拥有超过五年手机游戏开发经验的游戏开发者开发.由于移动浏览器与实际的 HTML5 规范的兼容性的改进和内部硬件的自然进化,HTML5 手机游戏真正有可能流行起来. 您可能感兴趣 ...

  7. 【原创】小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)

    在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: <divdata-role="foote ...

  8. jquery Mobile应用第2课《构建跨平台APP:jQuery Mobile移动应用实战》连载二(简单的QWER键盘)

    在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...

  9. jqueryMobile应用第一课《构建跨平台APP:jQuery Mobile移动应用实战》连载一(Hello World)

    有人说每个程序员都曾经有过改变世界的梦想,笔者认为,这与程序员年轻时编写的第一个程序有着莫大的关系.简简单单的一句“hello world”让年轻的心开始相信梦想,用一种低调的壮志凌云向世界展示自己的 ...

随机推荐

  1. 固态硬盘的PCIE,SATA,M2,NVMe,AHCI分别都指什么?别再搞混了

    原文:https://baijiahao.baidu.com/s?id=1616207956596122967&wfr=spider&for=pc 科技娱乐屋 18-11-0420:5 ...

  2. 网工的Linux系统学习历程

    偶遇篇作为一名通过思科CCNP认证的网络工程师,专注于网络技术.但在日常的工作中,难免不接触到服务器,对于大多数服务器来说,鉴于稳定性等因素的考虑,基本使用的都是Linux系统,包括RHEL.Cent ...

  3. java list 去重

    Guava ImmutableSet源码去重处理,Hash处理 - 汪小哥 - CSDN博客 https://blog.csdn.net/u012881904/article/details/6895 ...

  4. css行内省略号、垂直居中

    应用场景分析: 一.当你的文字限定行数,超出部分的文字用省略号显示. (有两个使用场景:1.单行 2.多行) // 单行 overflow: hidden; text-overflow:ellipsi ...

  5. C# web发布设置

    1.配置文件设置: 选择"自定义",配置文件框自己输入. 2.连接设置: 3.发布版本设置 4.预览 预览没问题点发布即可.

  6. Html5使用canvas作图

    以下例子是项目中实际用到的.不足之处请大家指正,设计到画线,写文字,填充,文字旋转. <!DOCTYPE html> <html> <head lang="en ...

  7. Windows 下 Mysql8.0.12 的安装方法

    1. 之前在windows 上面安装了 mysql 5.6 还有 mysql 5.7 遇到了几个坑 , 最近想直接安装最新版的 mysql 8.0.12(较新) 发现还是有坑 跟之前的版本不一样 这里 ...

  8. bootstrap模态框动态赋值, ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框(JS)

    /查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...

  9. 2.请介绍一下List和ArrayList的区别,ArrayList和HashSet区别

    第一问: List是接口,ArrayList实现了List接口. 第二问: ArrayList实现了List接口,HashSet实现了Set接口,List和Set都是继承Collection接口. A ...

  10. 当应用程序不是以UserInteractive 模式运行时显示模式对话框或窗体

    最近在做一个WCF程序的时候,WCF程序老是弹出一个错误“当应用程序不是以UserInteractive 模式运行时显示模式对话框或窗体是无效操作.请指定ServiceNotification或Def ...