使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
- 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.htmlappname
,这个会影响你打包完毕的可执行文件(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=out
、rimraf 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 构建跨平台的桌面应用的更多相关文章
- .NET Core 构建跨平台的桌面应用
1.运行环境 开发工具:Visual Studio 2017 JDK版本:.NET Core 2.0 项目管理工具:nuget 2.GITHUB地址 https://github.com/nbfujx ...
- Electron - 创建跨平台的桌面客户的应用程序
Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromium 开源项目,并用于在 ...
- NativeScript - JS 构建跨平台的原生 APP
使用 NativeScript,你可以用现有的 JavaScript 和 CSS 技术来编写 iOS.Android 和 Windows Phone 原生移动应用程序.由原生平台的呈现引擎呈现界面而不 ...
- 小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载四(场景切换)
作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...
- 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》串行4(场景变化)
作为一个真正的利用价格值应用,首先,你应该至少有两页,通过切换页面来实现很多其他互动.比如手机人人网,首先,打开后进入登录页面,将有登录后,新的东西.然后拉左侧面板.你可以看到相册.私人信息.像其他应 ...
- Molecule – 帮助你构建跨平台的 HTML5 游戏
Molecule 框架由拥有超过五年手机游戏开发经验的游戏开发者开发.由于移动浏览器与实际的 HTML5 规范的兼容性的改进和内部硬件的自然进化,HTML5 手机游戏真正有可能流行起来. 您可能感兴趣 ...
- 【原创】小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)
在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: <divdata-role="foote ...
- jquery Mobile应用第2课《构建跨平台APP:jQuery Mobile移动应用实战》连载二(简单的QWER键盘)
在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...
- jqueryMobile应用第一课《构建跨平台APP:jQuery Mobile移动应用实战》连载一(Hello World)
有人说每个程序员都曾经有过改变世界的梦想,笔者认为,这与程序员年轻时编写的第一个程序有着莫大的关系.简简单单的一句“hello world”让年轻的心开始相信梦想,用一种低调的壮志凌云向世界展示自己的 ...
随机推荐
- 固态硬盘的PCIE,SATA,M2,NVMe,AHCI分别都指什么?别再搞混了
原文:https://baijiahao.baidu.com/s?id=1616207956596122967&wfr=spider&for=pc 科技娱乐屋 18-11-0420:5 ...
- 网工的Linux系统学习历程
偶遇篇作为一名通过思科CCNP认证的网络工程师,专注于网络技术.但在日常的工作中,难免不接触到服务器,对于大多数服务器来说,鉴于稳定性等因素的考虑,基本使用的都是Linux系统,包括RHEL.Cent ...
- java list 去重
Guava ImmutableSet源码去重处理,Hash处理 - 汪小哥 - CSDN博客 https://blog.csdn.net/u012881904/article/details/6895 ...
- css行内省略号、垂直居中
应用场景分析: 一.当你的文字限定行数,超出部分的文字用省略号显示. (有两个使用场景:1.单行 2.多行) // 单行 overflow: hidden; text-overflow:ellipsi ...
- C# web发布设置
1.配置文件设置: 选择"自定义",配置文件框自己输入. 2.连接设置: 3.发布版本设置 4.预览 预览没问题点发布即可.
- Html5使用canvas作图
以下例子是项目中实际用到的.不足之处请大家指正,设计到画线,写文字,填充,文字旋转. <!DOCTYPE html> <html> <head lang="en ...
- Windows 下 Mysql8.0.12 的安装方法
1. 之前在windows 上面安装了 mysql 5.6 还有 mysql 5.7 遇到了几个坑 , 最近想直接安装最新版的 mysql 8.0.12(较新) 发现还是有坑 跟之前的版本不一样 这里 ...
- bootstrap模态框动态赋值, ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框(JS)
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
- 2.请介绍一下List和ArrayList的区别,ArrayList和HashSet区别
第一问: List是接口,ArrayList实现了List接口. 第二问: ArrayList实现了List接口,HashSet实现了Set接口,List和Set都是继承Collection接口. A ...
- 当应用程序不是以UserInteractive 模式运行时显示模式对话框或窗体
最近在做一个WCF程序的时候,WCF程序老是弹出一个错误“当应用程序不是以UserInteractive 模式运行时显示模式对话框或窗体是无效操作.请指定ServiceNotification或Def ...