700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 使用Electron将Web项目打包成windows桌面应用

使用Electron将Web项目打包成windows桌面应用

时间:2018-09-16 18:44:45

相关推荐

使用Electron将Web项目打包成windows桌面应用

1.从官网下载node.js并安装。

2.有不少人反映使用此命令安装Electron不成功,可能是国外镜像的问题。

npm install --save-dev electron-prebuilt

3.可以选择使用淘宝npm开发的cnpm进行安装。

//首先安装cnpmnpm install -g cnpm --registry=https://registry.//使用cnpm进行安装,使用方法和npm相同cnpm install -g electron

4.准备好一个前端web项目(包含html,css,js等的)

5.web项目的目录应该是

你的项目目录/├── package.json├── main.js└── index.html

6.package.json的内容

{"name" : "app","version" : "1.0.1","main" : "main.js"}

7.main.js的内容

// var app = require('app'); // 控制应用生命周期的模块。// var BrowserWindow = require('browser-window'); // 创建原生浏览器窗口的模块const electron = require('electron');const app = electron.app;const BrowserWindow = electron.BrowserWindow;// 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC,// window 会被自动地关闭var mainWindow = null;// 当所有窗口被关闭了,退出。app.on('window-all-closed', function() {// 在 OS X 上,通常用户在明确地按下 Cmd + Q 之前// 应用会保持活动状态if (process.platform != 'darwin') {app.quit();}});// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候// 这个方法就被调用app.on('ready', function() {// 创建浏览器窗口。mainWindow = new BrowserWindow({width: 800, height: 600});// 加载应用的 index.htmlmainWindow.loadURL('file://' + __dirname + '/index.html');// 打开开发工具 mainWindow.openDevTools();// 当 window 被关闭,这个事件会被发出mainWindow.on('closed', function() {// 取消引用 window 对象,如果你的应用支持多窗口的话,// 通常会把多个 window 对象存放在一个数组里面,// 但这次不是。mainWindow = null;});});

8.cmd进入web项目根目录,执行全局安装命令

npm install electron-packager -g

9.输入打包命令

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

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

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

10.打包成功,文件夹目录如图

11.以上是最基础的打包功能,至于窗口大小,菜单栏等这些可以参考Electron的说明文档。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。