Preface
上一篇文:年轻人的第一个音乐播放器
因为网页打开后老被我误关,就想着用打包一个桌面应用。
然后因为我啥都不会,只能现学一个最简单的了。
再次踩在前人的肩膀上选择了 Electron-forge
这个工具。
一个小时才搞定了最简单的打包,发布在了Github。
不过我的时间大都花在了看 Electron 的文档和下载环境上,Electron 还有一些 npm 包因为网络问题半天没下好;文档说实话没咋看明白,不知道是中文翻译的问题还是我的问题,我照猫画虎才把菜单栏取消掉。
Start
-
首先得有Node.js,这个前端应该人人都有。
-
然后换个源,要不然经常下载不成功。
npm config set registry https://registry.npm.taobao.org
-
安装:
npm install electron -g npm install create-electron-app -g
-
如果实在安装不成功 Electron 的话(比如我),试试这种方式:
# 先把不成功的卸了 npm uninstall electron ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install -g electron
-
安装成功后初始化项目(这一步可能非常漫长):
create-electron-app app-name
-
启动:
cd app-name npm run start
启动成功后会出现了一个应用:
Make & Build
-
在 src 目录下,把我们的文件放到
index.html
中。 -
然后修改
index.js
:const { app, BrowserWindow, Menu } = require("electron"); const createWindow = () => { const mainWindow = new BrowserWindow({ // 应用图标要放在当前目录下 icon: __dirname + '/icon.png', width: 900, height: 700, }); mainWindow.loadFile( path.join(__dirname, "index.html") ); // mainWindow.webContents.openDevTools(); // 去除菜单栏 Menu.setApplicationMenu(null); };
-
测试一下
npm run start
-
直接默认配置打包
npm run make
-
完成会有一个
out
文件夹,会有一个安装包和一个可以直接运行的 exe 文件: -
点开可执行程序,完成:
Summary
当然还有更多打包的细节可以修改,我就不勉强自己了,有需要的可以在油管搜一搜。
还有一些感悟:很多东西就是看起来挺复杂,真正做起来却很简单,冲冲冲就完事了!不要老是想做而不去做,很多东西都是大佬们做好而且写好教程就差喂你嘴里了😂
如果对您有帮助,希望能给个👍评论收藏三连!
欢迎关注互相交流,有问题可以评论留言。