首页 技术 正文
技术 2022年11月18日
0 收藏 691 点赞 3,089 浏览 995 个字

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拥有控制电脑内所有文件的权限,会出现很大的安全风险。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,105
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,582
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,429
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,200
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,836
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,919