年轻人的第一个桌面应用

Preface

上一篇文：年轻人的第一个音乐播放器

因为网页打开后老被我误关，就想着用打包一个桌面应用。

然后因为我啥都不会，只能现学一个最简单的了。

再次踩在前人的肩膀上选择了 Electron-forge 这个工具。

一个小时才搞定了最简单的打包，发布在了Github。

不过我的时间大都花在了看 Electron 的文档和下载环境上，Electron 还有一些 npm 包因为网络问题半天没下好；文档说实话没咋看明白，不知道是中文翻译的问题还是我的问题，我照猫画虎才把菜单栏取消掉。

Start

1. 首先得有Node.js，这个前端应该人人都有。

2. 然后换个源，要不然经常下载不成功。

   npm config set registry https://registry.npm.taobao.org
   

3. 安装：

   npm install electron -g
   npm install create-electron-app -g
   

4. 如果实在安装不成功 Electron 的话（比如我），试试这种方式：

   # 先把不成功的卸了
   npm uninstall electron
   ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install -g electron
   

5. 安装成功后初始化项目（这一步可能非常漫长）：

   create-electron-app app-name
   

6. 启动：

   cd app-name
   npm run start
   

启动成功后会出现了一个应用：

Make & Build

1. 在 src 目录下，把我们的文件放到 index.html 中。

2. 然后修改 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);
   };
   

3. 测试一下 npm run start

4. 直接默认配置打包 npm run make

   

5. 完成会有一个 out 文件夹，会有一个安装包和一个可以直接运行的 exe 文件：

   

   

6. 点开可执行程序，完成：

   

Summary

当然还有更多打包的细节可以修改，我就不勉强自己了，有需要的可以在油管搜一搜。

还有一些感悟：很多东西就是看起来挺复杂，真正做起来却很简单，冲冲冲就完事了！不要老是想做而不去做，很多东西都是大佬们做好而且写好教程就差喂你嘴里了??

如果对您有帮助，希望能给个??评论收藏三连！

欢迎关注互相交流，有问题可以评论留言。