H5开发桌面应用?

没错,H5现在也可以开发跨平台的桌面应用了,这意味着我们可以用网页来设计和制作桌面应用。

基于Node.js的Electron框架就可以实现桌面应用,比较有名的Electron框架实现的桌面应用就是微软的VS Code了,下面给出Electron的官网地址:

https://electronjs.org/

创建项目

可以在项目中作为依赖项安装:

npm install electron --save-dev

也可以全局进行安装:

npm install electron -g

快速创建一个项目的方式是直接把官网的示例拉下来即可:

https://github.com/electron/electron-quick-start

安装命令如下:

npm install

启动命令如下:

npm start

然后就可以看到启动界面了。

打包应用

使用npm下载安装electron-packager:

npm install electron-packager -g

安装好后,进入要打包的应用目录执行下面的脚本即可:

D:\electron-quick-start>C:\Users\Administrator\AppData\Roaming\npm\electron-packager . TestApp --out ../electronPublish
  1. C:\Users\Administrator\AppData\Roaming\npm\electron-packager:是下载后的electron-packager文件所在地址;
  2. .:表示打包当前目录;
  3. TestApp:应用名称;
  4. --out ../electronPublish:输出目录为上级目录electronPublish;

打包后的Windows端程序,目录下的resources\app文件夹就是网页资源存放目录,用于支持运行的其它文件大概有130M。

最后说一下

Electron实际上就是Node.js的操作文件的能力+Chrome内核的渲染能力+v8引擎的速度的一个集合体,额外扩展了系统控件和文件处理的能力。

由于H5项目的特性,实际上,只需要打包出示例的程序之后,就可以通过替换resources\app文件夹下的内容来达到替换应用的功能的目的,另外如果直接将连接指向网上的地址也是可以的,但是要注意,这样会使网络上的JS拥有控制电脑内所有文件的权限,会出现很大的安全风险。

Electron初探的更多相关文章

  1. electron初探问题总结

    使用electron时间不是很久,随着使用的深入慢慢的也遇到一些问题,下面总结一下遇到的问题与大家分享,避免趟坑. 主要问题汇总如下: webview与渲染进程renderer间通信 BrowserW ...

  2. electron——初探

    是什么? Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时 ...

  3. Windows Electron初探

    最近闲来无事,玩玩electron. 1.安装nodejs 下载地址:http://nodejs.cn/download/,下载64位.安装完成后,打开C:\Program Files\nodejs\ ...

  4. 初探Electron,从入门到实践

    本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.   在开始之前,我想您一定会有这样的困惑:标题里的Electron ...

  5. 初探Electron

    Electron是什么? 官网是这么描述的:Build cross platform desktop apps with JavaScript, HTML, and CSS 翻译一下:使用JavaSc ...

  6. 2017-12-22 日语编程语言"抚子"-第三版实现初探

    前文日语编程语言"抚子" - 第三版特色初探仅对语言的语法进行了初步了解. 之前的语言原型实现尝试(如编程语言试验之Antlr4+JavaScript实现"圈4" ...

  7. Electron使用与学习--(页面间的通信)

    目录结构: index.js是主进程js. const electron = require('electron') const app = electron.app const BrowserWin ...

  8. Electron使用与学习--(基本使用与菜单操作)

    对于electron是个新手,下面纯属个人理解.如有错误,欢迎指出.   一.安装 如果你本地按照github上的 # Install the `electron` command globally ...

  9. 初探领域驱动设计(2)Repository在DDD中的应用

    概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...

随机推荐

  1. linux 学习笔记 软件包管理

    >查询文件所属软件包 #rpm -qf /usr/share/pixmaps/xplns.png 查询某个文件所属软件包 >查询软件包所包含文件列表 #rpm -ql xplus-3.3. ...

  2. 说说我安装pyspider遇到的那些坑

    现在python3.7  >>pip install pyspider    配置环境变量 前置的phantomjs 无界面浏览器,设置就不说了 cmd 中运行pyspider all  ...

  3. SpringBoot+Mybatis+MySql学习

    介绍一下SpringBoot整合mybatis,数据库选用的是mysql. 首先创建数据库 CREATE DATABASE test; 建表以及插入初始数据(sql是从navicat中导出的) SET ...

  4. 按键排序JavaScript对象

    问题描述 我需要按键排序JavaScript对象. 因此如下: { 'b' : 'asdsad', 'c' : 'masdas', 'a' : 'dsfdsfsdf' } 会成为: { 'a' : ' ...

  5. This 关键字的三个用处

    ---恢复内容开始--- 1.this调用本类中的属性,也就是类中的成员变量 2.this调用本类中的其他构造方法,调用时要放在构造方法的首行. 1.this调用本类中的属性,也就是类中的成员变量 1 ...

  6. 2107 ACM 水题

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2107 题意:比较大小,即使简单还是没有一次过,粗心的我,终于放假了,虽然我平时课还是有点多,但是希望自己能 ...

  7. 上海交大ACM总教头俞勇讲述“最聪明人的故事”

    这是一场世界大学生之间"最强大脑"的较量:这是拥有数十年历史的ACM国际大学生计算机程序设计大赛的赛场:斯坦福.加州理工.麻省理工.哈佛--当一个又一个在计算机科学领域拥有世界顶尖 ...

  8. MPU和CPU有什么区别?

    MPU(或称MP,微处理器)和CPU(中央处理器)同为处理器,但范畴不同. 计算机(即电脑)分为巨型机,大型机,中型机,小型机和微型计算机5类.这5类计算机的运算核心统称为CPU,而MPU只是微型计算 ...

  9. 安装vmware 已经配置Centos7

    一:安装vmware VMware14 安装CentOS7及其配置;CentOS7配置网桥,做远程连接; 1.VMware14安装        进入百度链接,按照图形安装就好了.https://ji ...

  10. 如何查看linux版本信息

    查看系统信息 [root@root]# hostnamectl Static hostname: root Icon name: computer-desktop Chassis: desktop M ...