年轻人的第一个桌面应用

2022-06-17 110

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 年轻人的第一个桌面应用

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);
};
复制代码