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 相关文章推荐
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
javascript的this关键字详解
May 20 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 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 更新数据库中断的解决方法
2009/06/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
vue.js事件处理器是什么
2017/03/20 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
简介Django中内置的一些中间件
2015/07/24 Python
python中字符串的操作方法大全
2018/06/03 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
师范大学应届生求职信
2013/11/21 职场文书
自我鉴定四大框架
2014/01/17 职场文书
党员批评与自我批评
2014/02/12 职场文书
排查整治工作方案
2014/06/09 职场文书
创先争优宣传标语
2014/10/08 职场文书
工作表现证明
2015/06/15 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP