Первое настольное приложение для молодежи

внешний интерфейс Electron
Первое настольное приложение для молодежи

Мало знаний, большой вызов! Эта статья участвует в "Необходимые знания для программистов«Творческая деятельность.

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

После успешного запуска появится приложение:

image-20210922013602973

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

    image-20210922153628670

  5. Там будетoutпапке будет установочный пакет и exe-файл, который можно запустить напрямую:

    image-20210922153738005

    image-20210922153758759

  6. Нажмите на исполняемую программу, чтобы завершить:

    image.png

Summary

Конечно, есть еще детали упаковки, которые можно модифицировать, я не буду заставлять себя, если вам это нужно, вы можете поискать на ютубе.

Есть и некоторые инсайты: многие вещи кажутся сложными, но на самом деле их просто делать, только спешить и спешить! Не всегда хочется это делать, но не делайте, много чего делают большие ребята и туториалы пишутся, дело только в том, чтобы кормить рот 😂

Если это будет полезно для вас, я надеюсь дать 👍 комментарий и добавить в избранное!

Добро пожаловать, чтобы следить и общаться друг с другом, если у вас есть какие-либо вопросы, вы можете прокомментировать и оставить сообщение.

Я Манкуой, еще интересные статьи:Личная страница Манкуоя

Категории