• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

年轻人的第一个桌面应用

互联网 diligentman 3小时前 2次浏览

年轻人的第一个桌面应用

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

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

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

如果对您有帮助,希望能给个👍评论收藏三连!

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


程序员灯塔
转载请注明原文链接:年轻人的第一个桌面应用
喜欢 (0)