年轻人的第一个桌面应用

Posted 2021-11-01 Mancuoj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了年轻人的第一个桌面应用相关的知识，希望对你有一定的参考价值。

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);
};