nodejs实现桌面程序exe

nodejs 实现桌面程序，这里主要使用electron

安装electron的包，这里如果一直安装不了，可能是网络的原因，可以下载淘宝镜像：
npm install -g electron

npm install cnpm -g --registry=http://registry.npm.taobao.org cnpm install electron -g
安装electron-prebuilt :

cnpm install -g electron-prebuilt
安装 packager 发布工具:

cnpm install -g electron-packager
安装electron-builder:

cnpm install electron-builder -g

安装 aser 打包工具:
cnpm install -g asar

初始化项目:

npm init
生成了package.json，配置如下：

{"name": "app","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"electron": "^2.0.6"}
}

建立js程序 index.js :

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')// 保存窗口对象的全局引用, 如果不这样做, 当JavaScript对象被当做垃圾回收时，window窗口会自动关闭
let winfunction createWindow () {// 创建浏览器窗口.win = new BrowserWindow({width: 800, height: 600,autoHideMenuBar :true})win.setMenu(null);// 加载项目的index.html文件.win.loadURL(url.format({pathname: path.join(__dirname, 'index.html'),protocol: 'file:',// 当窗口关闭时候的事件.slashes: true}))// 打开开发工具.//win.webContents.openDevTools()win.on('closed', () => {// 取消引用窗口对象, 如果你的应用程序支持多窗口，通常你会储存windows在数组中，这是删除相应元素的时候。console.log("haha");win = null})
}app.on('activate', () => {console.log('activate')if (win === null) {createWindow()} else {win.show()}
})// 当Electron完成初始化并准备创建浏览器窗口时，将调用此方法
// 一些api只能在此事件发生后使用。
app.on('ready', createWindow)// 当所有窗口关闭时退出。
app.on('window-all-closed', () => {// 在macOS上，用得多的是应用程序和它们的菜单栏，用Cmd + Q退出。if (process.platform !== 'darwin') {app.quit()}
})app.on('activate', () => {// 在macOS上，当点击dock图标并且没有其他窗口打开时，通常会在应用程序中重新创建一个窗口。if (win === null) {createWindow()}
})

添加index.html 文件：

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"/><title>test</title>
</head>
<body>Hello World!<button id="button">点击这里</button><script>console.log(window)var button = document.getElementById('button');button.onclick = function(){alert("你好")}</script>
</body>
</html>

可以使用electron . 命令预览

electron .

npm run-scritpt package

执行打包命令：（可能需等待一会）

build --win --x64

打包后会在项目目录生成dist文件夹，生成exe文件，点击安装就可以了

如果想要设置exe的显示图标，可以利用网上的在线图片格式转换工具，将图片转换成256*256像素的ICO图片。

如图所示目录，新建image文件夹

文件夹内放置ico图片

json配置：

{"name": "Play","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"electron": "^2.0.6"},"build":{"appId": "com.gao.Play","copyright": "Yimi","productName": "Play","dmg":{"window": {"x":100,"y":100,"width": 500,"height": 400}},"win": {"icon": "image/icon.ico"}}
}

执行build --win --x64命令后，就会生成有图标的执行应用。

可以生成桌面快捷方式：

------------------------------------2019/10/23更新-------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------------------

由于技术更新太快，之前的打包命令可能不奏效了。于是更新一波。

主要问题是出在build --win --x64这个命令上，新版本命令使用electron-builder --win --x64代替。【devDependencies中electron不必太在意，此处是作为工具局部安装只在当前开发环境下使用】
首先看json文件

{"name": "electron","version": "1.0.0","description": "a demo","main": "index.js","scripts": {"start": "electron .","postinstall": "electron-builder --win --x64"},"author": "","license": "ISC","devDependencies": {"electron": "^7.0.0"},"build":{"appId": "com.gao.Play","copyright": "Yimi","productName": "Play","dmg":{"window": {"x":100,"y":100,"width": 500,"height": 400}}}
}

可能执行electron-builder --win --x64命令的时候会卡住这时发现控制台停留在• downloading url=https://github.com/electron/electron/releases/download/v7.0.0/electron-v7.0.0-win32-x64.zip size=63 MB parts=8
看它重新连接N次后终于报出了403错误。

复制上述卡住的路径：https://github.com/electron/electron/releases/download/v7.0.0/electron-v7.0.0-win32-x64.zip 下载这个包。
将下载好的包移动到 C:\Users\XXX\AppData\Local\electron\Cache 目录下。

在控制台输入命令：npm run postinstall 即可在项目目录下看到新生成的dist文件夹。

这里我把预览和打包命令放至了json文件的scripts下，这样只需npm run XXX命令即可

Electron文档

关注公众号bug人生回复“资料”即可获得为您精心准备的前端视频学习资料

nodejs实现桌面程序exe相关推荐

electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...
Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样
场景 electron-vue 基于 vue (基本上是它听起来的样子) 来构造 electron 应用程序的样板代码. 该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序 ...
用node-webkit(NW.js)创建桌面程序
以往写windows桌面程序需要用MFC.C#之类的技术,那么如果你只会web开发技术呢?或者说你有一个网站,但是你想把你的网站打包成一个桌面应用程序,该如何做呢? 答案就是用node-webkit这 ...
使用exe4j打包Java桌面程序为exe
开发中大家可能也会遇到过将Java(swing)桌面程序打包成exe可执行文件的需求最近做了两套桌面程序,给需要的小伙伴分享一下步骤吧! 目录 1. 使用Eclipse将项目打成Jar包 2. 使用 ...
web网页浏览器唤起wpf,winform exe桌面程序,并跳转到指定页面
背景案例我们看到网页上打开百度网盘,下载的时候会通过浏览器唤起百度网盘桌面端,并进入到指定页面,我们要做的,就是达到类似的效果实现流程 1.写注册表在桌面软件首次启动的时候,像注册表中写入程序的 ...
Nativefier 网页转桌面程序 app
Nativefier 网页转桌面程序 Nativefier简介 Nativefier是一个命令行工具,仅仅通过一行代码就可以轻松地为任何的网站创建桌面应用程序,应用程序通过Electron打包成系统可 ...
将任意网站打包为桌面程序-低调小熊猫的技术小黑屋
将任意网站打包为桌面程序相逢便是缘,欢迎来到低调小熊猫的技术小黑屋我的博客:https://aodeng.cc 我的公众号:低调小熊猫我的QQ群:756796932 这里我将我自己的博客网站打包 ...
Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结
Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结 1.1. 理解Atwood定律 1 1.2. H5做出个html的ui是很方便的,跨平台 2 1 ...
Atitit 使用h5技术 html css js 制作桌面程序gui界面解决方案attilax总结
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Atit ...
SharpUpdater:开源的.NET桌面程序自动更新组件
SharpUpdater开源了! http://sharpupdater.codeplex.com/ 简介 SharpUpdater是一个开源的.NET Windows桌面程序自动更新的组件.它提 ...

nodejs实现桌面程序exe

nodejs实现桌面程序exe相关推荐

最新文章

热门文章