摘要唠叨
最近准备开发一款爬虫工具,就想到了如何创建pc端桌面应用。
相比使用底层语言开发我更希望能够将web应用打包。毕竟我不太会底层语言。
话不多说,开讲。
一、克隆electron-quick-start
git clone https://github.com/electron/electron-quick-start
进入克隆项目:electron-quick-start,此为样板项目。在该目录下执行以下指令安装依赖:
npm install (或者) cnpm install
说明:npm 升级 cnpm 指令: npm install cnpm -g
cnpm: 阿里提供的国内镜像指令
安装依赖完成可执行以下指令,查看样例:
npm start (或者) cnpm start
执行以上指令不出意外会弹出桌面窗口。接下来就是如何给为自个的web应用了,在克隆目录下(electron-quick-start目录)有个main.js文件,内容如下:
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// 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.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 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 (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// 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.
里面有一句mainWindow.loadFile(‘index.html’)。没错,这个就是关键。将index.html改为自个的web应用入口文件就完事大吉了,O(∩_∩)O哈哈~。就是这么简单。
二、打包.exe文件
百度了好多, 说的基本一个鸟样,然而没卵用。还好,找到几个靠谱的:
1、https://segmentfault.com/a/1190000011971612
2、https://blog.csdn.net/u013244720/article/details/103277583
3、https://www.jianshu.com/p/94cf5c1b0446
4、https://blog.csdn.net/cattleDrinkRedWine/article/details/108423122
货比四家,灵活运用,总是打包成功。
首先,安装electron和electron-packager
npm install electron (或者) cnpm install electron
npm install electron-packager -g (或者) cnpm install electron-packager -g
接着,执行以下指令打包:
官方说明:
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
参考:
electron-packager ./ Hello -all
说明:-all 其实就是 --platform=all --arch=all (在usage.txt里有解释),执行这个指令或者许会报错未指定版本号,可以在后面加上--electron-version=版本号,如:
electron-packager ./ Hello -all --electron-version=10.1.1
说明:可通过指令electron -v, 查看当前electron版本号
完事儿在当前目录下会生成一个文件夹,.exe文件就在里面。至此便已功德圆满了。O(∩_∩)O哈哈~
三、总结经验
简简单单两大步完成桌面应用打包,是不是非常快捷方便!!!希望能够帮助到有需要的博友们!!!