Мой друг хотел, чтобы я был основан наH5-DooringЯ разрабатывал десктопное приложение, совсем недавно было время, поэтому потратил полдня на его использование с нуля.electronРазработано офлайн-программное обеспечение для десктопаDooring-electron.
потому что раньшеelectronОтносительно немного, я только сегодня немного научился, и в основном прошел переднюю и заднюю части, я помещу это в конец статьи.dooring-electronизgithubАдрес для справки и изучения.Если у вас есть лучшее решение, вы можете обсудить со мной в любое время.
введение электронной дверной архитектуры
знакомыйElectronдрузья могут знать,Electronунаследовано отChromiumмногопроцессорная архитектура, что делаетElectronАрхитектурно очень похож на современный веб-браузер. Мы можем контролировать два типа процессов:основной процесс и рендерер.
каждыйElectronПриложения имеют один основной процесс, который служит точкой входа приложения. основной процесс вNodeсреду, мы можем использовать всеNodeСпособность.
Итак, что мы можем сделать в основном процессе?Основная цель основного процесса — создание окон приложений и управление ими с помощью модуля BrowserWindow..
BrowserWindowКаждый экземпляр класса создает окно приложения и загружает веб-страницу в отдельном процессе визуализации. Мы можем взаимодействовать с веб-контентом из основного процесса, используя объект окна webContent.
С помощью вышеуказанной основы я нарисовалdooring-electronПростая архитектурная схема понятна каждому:
если относительноelectronДля более интуитивного понимания вы также можете обратиться к его официальному сайту:
dooring-electronСтек технологий, который использует автор:
koa2 + electron + react + umi3
Далее я покажу вам, как научиться использоватьdooring-electron.
дверная электронная установка и использование
Давайте попробуем его перед установкой.
Установить
- скачать код
git clone git@github.com:MrXujiang/dooring-electron-lowcode.git
- Установить зависимости
yarn install
or
cnpm install
- Соберите внешний пакет
cd ./renderer
# 安装前端包
yarn
# 构建前端包
yarn build
местный старт
Запустите приложение локально
yarn debug:main
Упаковка проекта
Соберите тестовый пакет
npm run pack // 仅输出包,方便测试
Соберите установочный пакет
- Выполнение внешней упаковки ресурсов
npm run build // react资源打包
- Запустите команду электронной сборки, чтобы вывести установочный пакет.
npm run dist-mac // mac包
npm run dist-win // windows包
npm run dist-linux // linux包
npm run dist-all // 所有平台包
Для каждого правила конфигурации, пожалуйста, обратитесь к официальной документации:
woohoo.electron.build/config тебе нравится ATI...
Случай установки
Автор использует упакованный выводdist-macпример, чтобы продемонстрировать, какmacУстанавливаем его.Сначала находим упакованныйreleaseкаталог, затем перетащите вapplicationsТолько что:
Установка windows и linux версий тоже очень проста, можете попробовать сами.
Как быстро выучить электрон
Здесь я расскажу о том, как быстро начатьelectron, первое использованиеelectronВы должны иметь следующую базу знаний:
- основы html+js+css
- Знаком с базовым API nodejs
С вышеуказанной основой мы узнаемelectronбудет очень быстро.electronСамо по себе нам достаточно изучить введение в API на его официальном сайте (обучение по требованию) иdemoВот и все. Если есть что-то, что вы не понимаете, пожалуйста, не стесняйтесь общаться со мной. В конце концов, я только начинаю учиться, ха-ха.
Руководство по последнему обновлению Dooring
В последнее время платформа построения визуализации H5-Dooring также продолжает продвигать итерации.Источник данных в основном был создан, и последующие действия будут следовать более разумному направлению.Ниже приведен последний журнал обновлений:
- Оптимизация библиотеки шаблонов
- Добавить значок общего доступа WeChat в глобальной конфигурации страницы.
- Компонент поддерживает анимацию, добавляя более 10 анимационных эффектов.
- Доступ к экологии WeChat, поддержка H5 для обмена друзьями и кругом друзей WeChat
- Оптимизируйте стиль цепочки друзей
Отечественной платформе lowcode еще предстоит пройти долгий путь, я с нетерпением жду совместной работы всех 💪!
Болеенизкий код / визуализацияОбмен соответствующими технологиями и их внедрение, добро пожаловатьWeChatпоискИнтересный разговор о фронтендеНаучитесь исследовать.
dooring-electronадрес:GitHub.com/Mr X U соус/ The…