web前端页面生成exe可执行文件的方法


Posted in Javascript onFebruary 08, 2018

在 HTML5的崛起、JavaScript要一统天下之际,有一个名为【跨平台】的技术越来越火。为什么会这么火?因为软件开发者只需一次编写程序,即可在 Windows、Linux、Mac、IOS、Android 等平台运行,大大降低了程序员的工作量,也使公司的产品可以快读迭代。曾经跨平台技术的不被看好,如今随着手机、电脑硬件的发展而快速发展。这一切,几乎由HTML5技术推动,当然,JavaScript 这个语言,是最大的功臣。

web前端页面生成exe可执行文件的方法

基于 HTML5 的跨平台技术比较出名的有 PhoneGap、Cordova,常常用于开发 webapp;还有 Egret、Cocos-creator、Unity 等,常用于开发游戏;还有基于 Node.js 的 nw.js,用于开发桌面应用,以及 Electron,一款比 nw.js 还强大的用网页技术来开发桌面应用的神器。

其实,以上都是废话,现在进入主题:怎么用 Electron 将网页打包成 exe 可执行文件!

假设:

1、你已经安装并配置好了 node.js (全局安装)
2、你已经用 npm 安装了 electron (全局安装)
3、你已经写好了前端网页(html、css、javascript 这些,或者基于这些的前端框架写好的网页)
4、以上三点看不懂的,赶紧去百度。。。

你如果具备了以上的假设,请继续往下看:

1、找到你的前端网页项目文件夹,新建 package.json、main.js、index.html 三个文件(注:其中的 index.html 是你的网页首页)

你的项目目录/

├── package.json
├── main.js
└── index.html

2、在 package.json 中添加如下内容

{
 "name" : "app-name",
 "version" : "0.1.0",
 "main" : "main.js"
}

3、在 main.js 中添加下面的内容,这个 main.js 文件就是上面 package.json 中的 "main"键 的值,所以可根据需要修改

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
 // Create the browser window.
 win = new BrowserWindow({width: 800, height: 600})
 // and load the index.html of the app.
 win.loadURL(url.format({
 pathname: path.join(__dirname, 'index.html'),
 protocol: 'file:',
 slashes: true
 }))
 // Open the DevTools.
 // win.webContents.openDevTools()
 // Emitted when the window is closed.
 win.on('closed', () => {
 // Dereference the window object, usually you would store windows
 // in an array if your app supports multi windows, this is the time
 // when you should delete the corresponding element.
 win = null
 })
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
 // On macOS it is common for applications and their menu bar
 // to stay active until the user quits explicitly with Cmd + Q
 if (process.platform !== 'darwin') {
 app.quit()
 }
})
app.on('activate', () => {
 // On macOS it's common to re-create a window in the app when the
 // dock icon is clicked and there are no other windows open.
 if (win === null) {
 createWindow()
 }
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

4、如果你的网页首页的文件名不是 “index.html”,那么请在 main.js 中将其中的 'index.html' 修改为你的网页首页名

5、打开 DOS,cd 到你的项目目录(或直接在你的项目目录下空白的地方 shift+鼠标右键,然后点击在此处打开命令窗口,这里看不懂的,唉,百度吧少年)

6、在上一步的 DOS 下,输入 npm install electron-packager -g全局安装我们的打包神器

npm install electron-packager -g

7、安装好打包神器后,还是在上一步的 DOS 下,输入 electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_modules 即可开始打包

electron-packager . app --win --out presenterTool --arch=x64
 --version 1.4.14 --overwrite --ignore=node_modules

这个命令什么意思?蓝色部分可自行修改:

electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --version版本号 --overwrite --ignore=node_modules

web前端页面生成exe可执行文件的方法

8、打包成功后,会生成一个新的文件夹,点进去,找到 exe 文件,双击就可以看到网页变成了一个桌面应用啦!

web前端页面生成exe可执行文件的方法

以上是最简单的打包方式,至于怎么修改窗口大小、菜单栏怎么加、怎么调用系统API这些,就给你慢慢去研究Electron了。

如果你打包总是不成功,觉得很烦,同时对扩展功能没什么要求的话,

点击进入我的Coding代码仓库:https://coding.net/u/linhongbijkm/p/Electron-packager-build-project/git

里面有我已将内容为 hello,world 的 index.html 网页通过 Electron 框架打包为 windows 环境下的桌面应用。

现只需将你的网页前端项目复制到 /resources/app/project 目录下,双击 exe 文件即可以桌面应用的方式运行你的网页。

总结

以上所述是小编给大家介绍的web前端页面生成exe可执行文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
动态添加删除表格行的js实现代码
Feb 28 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
ajax前台后台跨域请求处理方式
Feb 08 #Javascript
详解自定义ajax支持跨域组件封装
Feb 08 #Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 #Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 #Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 #Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 #Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 #Javascript
You might like
用php过滤危险html代码的函数
2008/07/22 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python3最长回文子串算法示例
2019/03/04 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
Flask处理Web表单的实现方法
2021/01/31 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
介绍一下常见的木马种类
2014/11/15 面试题
开办饭店创业计划书
2013/12/28 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
党委班子对照检查材料
2014/08/19 职场文书
2015年入党决心书
2015/02/05 职场文书
签订劳动合同通知书
2015/04/16 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
辞职信格式范文
2015/05/13 职场文书
总结Python变量的相关知识
2021/06/28 Python
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js