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 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
原生js实现随机点名
Jul 05 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
一个PHP日历程序
2006/12/06 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Python 制作糗事百科爬虫实例
2016/09/22 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
python烟花效果的代码实例
2020/02/25 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
英国景点门票网站:attractiontix
2019/08/27 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
上海方立数码笔试题
2013/10/18 面试题
武汉东之林科技有限公司机试
2013/09/17 面试题
冰淇淋开店创业计划书
2014/02/01 职场文书
温馨提示标语
2014/06/26 职场文书
地理科学专业自荐信
2014/09/01 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
安全保证书格式
2015/02/28 职场文书
学校捐书活动总结
2015/05/08 职场文书
党支部对转正的意见
2015/06/02 职场文书
解除处分决定书
2015/06/25 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
vue基于Teleport实现Modal组件
2021/05/31 Vue.js