Как создать настольное приложение с помощью CSS + HTML + JS

GitHub Mac JavaScript Google
Как создать настольное приложение с помощью CSS + HTML + JS

Недавнее исследование, основанное наChromiumНастроил план браузера, проконсультировался с большим количеством информации, и у конкретного плана также есть общий план 😉

Подробности смотрите в моем блогеlishaoy.net

Прежде чем объяснять план, мы должны сначала понять несколько терминов:

Введение

Chromium

Chromium — это веб-браузер, разработанный Google, выпущенный с несколькими бесплатными авторскими правами, такими как лицензия BSD и открытый исходный код. Разработка Chromium, возможно, началась еще в 2006 году.

Chromium — это проект, открытый Google для разработки собственного браузера Google Chrome, поэтому Chromium эквивалентен инженерной или экспериментальной версии Google Chrome (хотя у самого Google Chrome тоже есть бета-версия), а новые функции будут первыми. чтобы открыть на Chromium, После проверки он будет применен к Google Chrome, поэтому функция Google Chrome будет относительно отсталой, но более стабильной. ——Википедия

CEF

Chromium Embedded Framework (CEF) — это элемент управления веб-браузером с открытым исходным кодом, основанный на проекте Google Chromium и поддерживающий платформы Windows, Linux, Mac. Помимо предоставления интерфейсов C/C++, существуют также портированные версии для других языков.

Поскольку он основан на Chromium, CEF поддерживает функции HTML5, реализованные в Webkit и Chrome, и по производительности близок к Chrome. CEF также предоставляет следующие функции: настраиваемые плагины, настраиваемые протоколы, настраиваемые объекты и расширения JavaScript, управляемая загрузка ресурсов, навигация, контекстные меню и т. д. ——Энциклопедия Байду

NW

NW.js работает на Chromium и Node.js, ранее известном как nodeWebkit. Это дает вам возможность создавать настольные приложения с использованием HTML и JavaScript. В приложении вы можете напрямую вызывать различные API Node.js и существующие сторонние пакеты. Поскольку Chromium и Node.js являются кроссплатформенными, ваше приложение также может быть кроссплатформенным. ——SegmentFault

Electron

Electron (первоначально называвшийся Atom Shell) — это фреймворк с открытым исходным кодом, разработанный GitHub. Он позволяет разрабатывать настольные приложения с графическим интерфейсом, используя Node.js (в качестве серверной части) и Chromium (в качестве внешнего интерфейса). В настоящее время Electron используется для разработки внешнего и внутреннего интерфейса несколькими веб-приложениями с открытым исходным кодом, известными проектами, включая Atom GitHub и Visual Studio Code от Microsoft. ——Википедия

так ,CEF,nw,Electronоснованы наChromiumПлатформа с открытым исходным кодом может удовлетворить требуемые пользовательские требования к браузеру, если быть точным, ее следует использовать.HTML5,CSS3,JavaScriptсделать красивый интерфейснастольное приложение.

Это локальное клиентское приложение, которое использует встроенное ядро ​​браузера для рендеринга внешнего интерфейса, а также может вызывать локальный системный API для реализации различных функций локального приложения.

исследования рынка

Изучая большой объем информации, известно, что онлайн-продукты и технологии, используемые различными предприятиями, используются для справки.

Кейс CEF

согласно сCEFОфициальное введение, используются следующие настольные приложения (на фото).CEF.

CEF

Внутренние настольные приложения включают в себя:Облачная заметка YouDao (NetEase),Дин Дин(Алибаба),QQ(Тенсент)Подождите, проверьте каталог и файлы после установки, вы можете увидетьОблачная заметка YouDao,Дин ДиниспользуетCEF,а такжеДин Дининтерфейс должен использоватьAngularJs, подразумевается, что бэкэнд должен использоватьсяC++а такжеPython.

QQв линиюIEдля реализации некоторых функций и интерфейсов. С 2013 годаQQпредставилCEF, для некоторых ранее использовавшихсяIEместо было заменено.

no-shadow
Каталог версий DingTalk для Mac

no-shadow
Интерфейс приложения версии DingTalk для Mac

случай северо-запада

ЭтоNWофициальное использованиеnw.jsсписок приложений:GitHub.com/тогда я/who.is/…

А отечественные, такие как средства разработки WeChat, основаны наnw.jsразвивающийся.

no-shadow
Каталог инструментов разработки WeChat для Mac

no-shadow
Инструменты разработки WeChat Версия для Mac

Электронный корпус

ЭтоElectronОфициальный - использоватьelectronсписок приложений:electronjs.org/apps

Как показано на рисунке,Electronбыло похожеМайкрософт,Facebook,Slackа такжеDockerТакие компании используются для создания приложений.

electron

редактор, которым я пользуюсьVisual Studio Codeосновывается наelectronразвитие

no-shadow
Код VS для Mac

реальный бой

Следующие будут использоваться соответственноnw.jsа такжеelectronсделать простойDome.

из-заCEFДокументация минимальна и нативнаC\C++, хотя официальноjavaверсияJCEF, эффективность разработки низкая, поэтому демку не знаю.

ЭтоCEFофициальный сайт, по адресуExternal ProjectsРазделы со списком поддерживаемых языков:

  • Net (CEF3) - https://github.com/cefsharp/CefSharp
  • Net (CEF1) - https://bitbucket.org/fddima/cefglue
  • Net/Mono (CEF3) - https://bitbucket.org/xilium/xilium.cefglue
  • Net (CEF3) - https://bitbucket.org/chromiumfx/chromiumfx
  • Delphi (CEF1) - http://code.google.com/p/delphichromiumembedded/
  • Delphi (CEF3) - https://github.com/hgourvest/dcef3
  • Delphi (CEF3) - https://github.com/salvadordf/CEF4Delphi
  • Go - https://github.com/CzarekTomczak/cef2go
  • Java - https://bitbucket.org/chromiumembedded/java-cef
  • Java - http://code.google.com/p/javacef/
  • Python - http://code.google.com/p/cefpython/

NW => Hello, world!

На простом примере давайте посмотрим, как написатьNWзаявление.

  • первый шагСоздайтеpackage.jsonконфигурационный файл
{
    "name": "helloworld",
    "main": "index.html",
    "icon": "img/app.png",
    "window": {
        "icon": "img/app.png"
    }
}

mainНастройте приложение, чтобы открыть домашнюю страницу,nameНастройте имя приложения.

  • второй шагСоздайтеindex.html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Holle NW</title>
</head>
<style>
    html,
    body {
        height: 100%;
        margin: 0;
    }

    .box {
        height: 100%;
        display: flex; /* css3 弹性盒子 */
        justify-content: center;
        align-items: center;
    }
</style>

<body>
    <div class="box">
        <h1>Holle NW!</h1>
    </div>
</body>

</html>

это простоHTMLфайл с небольшим добавлением CSS, чтобы сделатьHolle NW!Центрируется по горизонтали и вертикали.

  • третий шагПакетные приложения

Я тестировал только здесьMacа такжеWindowsупаковка,LinuxНе испытано.

Упакованные приложения для Mac:Выполните следующую команду в корневом каталоге проекта, чтобы сжать все файлы вapp.nwдокумент.

zip -r app.nw *

тогда поставьapp.nwфайл вnwjs.app/Contents/Resources/Он может быть в каталоге, а эффект следующий:

no-shadow
Эффект запуска под Mac

Пакетные приложения Windows:Введите все соответствующие файлы приложения в один файл с именемpackage.nwпочтовый пакет, будетpackage.nwа такжеNWИсполняемые файлы в тот же каталог может быть, эффект как:

no-shadow
Запуск эффекта под Windows

Electron => Hello, world!

Electronпозволяет использовать чистыйJavaScriptВызов расширенного нативного (операционная система)APIsдля создания настольных приложений.

Создайте простое приложение, используя всего 3 файла

your-app/
  ├── package.json
  ├── main.js
  └── index.html
  • первый шагСоздать файл конфигурации

Сначала нужно установитьNodeсреда, сnpmсоздать файл конфигурации приложенияpackage.json

npm init

существуетpackage.jsonновая команда запускаstart

{
    "name": "your-app",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
      "start": "electron ."
    }
  }
  • второй шагСоздать файл вводаmain.js 
const {app, BrowserWindow} = require('electron');
const path = require('path')
const url = require('url')

function createWindow() {
    win = new BrowserWindow({
        width: 1008,
        height: 759
    })
      
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))
}

app.on('ready', createWindow)

Код уже очень понятный и интуитивно понятный,createWindowСоздайте окно рабочего стола, размер которого определяетсяwidth,heightконтроль,win.loadURLИспользуется для загрузки страницы.

  • третий шагСоздать файл презентацииindex.html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello Electron</title>
</head>
<style>
    html,
    body {
        height: 100%;
        margin: 0;
    }

    .box {
        height: 100%;
        display: flex;
        /* css3 弹性盒子 */
        justify-content: center;
        align-items: center;
    }
</style>

<body>
    <div class="box">
        <h1>Hello Electron!</h1>
    </div>
</body>

</html>

это простоHTMLфайл с небольшим добавлением CSS, чтобы сделатьHolle NW!Центрируется по горизонтали и вертикали.

  • четвертый шагПакетные приложения

Упакуйте приложение:Упакованные приложения могут бытьelectron-packagerИнструмент упакован и должен бытьpackage.jsonНастройте следующую команду

"scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ HelloElectron --all --out ./OutApp --version 0.0.1 --overwrite --ignore=node_modules --icon=./app/img/app.ico"
  },

Затем запустите команду в терминалеnpm run packagerMacготов к упаковкеlinux,Mac,windowsТри пакета приложений платформы, эффект заключается в следующем:

打包后的应用

no-shadow
Эффект запуска под Mac

no-shadow
Запуск эффекта под Windows

Внимание и активность GitHub

Сначала нам нужно понятьGitHubЗначение следующих трех состояний,

no-shadow

no-shadow
: Указывает, что вы будете обращать внимание на все разработки этого проекта в будущем, если проект изменится в будущем, например, будет представлен другими.pull request, по инициативе другихissueВ остальных случаях вы получите уведомление в своем личном центре уведомлений.Если вы настроили личный почтовый ящик, на ваш почтовый ящик также может прийти соответствующее письмо.

no-shadow
: Это означает, что вам нравится этот проект или он популярен, вы можете понять это как лайк в кругу друзей, чтобы показать свою поддержку этого проекта.

no-shadow
: при выбореfork, что равносильно тому, что у вас есть копия исходного проекта. Конечно, эта копия предназначена только для файла проекта в то время. Если исходный файл проекта впоследствии изменится, вы должны синхронизировать его другими способами.(обычно используется для модификацииbugи оптимизация проекта или разработка новых функций в этом проекте и т. д.)

CEF

CEFсуществуетGitHubэлемент не найден, этоОфициальный сайтДанные предоставлены, как показано(из-заGitHubБез проекта релевантные данные точно не посчитать).

CEF关注度
внимание CEF

NW

СЗ внимание:

Alt text

Деятельность NW:Как показано

2011年~2018年提交量
Количество представлений с 2011 по 2018 год

Electron

Электронное внимание:

no-shadow

Деятельность:Как показано

electron2013年~2018年提交量
Электронные представления с 2013 по 2018 год

через вышеуказанноеисследования рынка,реальный бой,Внимание и активность GitHubЖдатьElectronимеют следующие преимущества

  • Маркет-кейсов много, и все крупные предприятия их используют
  • Развитие фактического боевого кода является более интуитивно понятным, легко понять и поддерживать, различные документы завершены, сетевые данные больше, а качество высокое, периферические вспомогательные инструменты полны, а эффективность развития может быть значительно улучшена
  • GitHubВнимание и активность продолжают расти

Сочетая все вышеперечисленные условия, для создания полного корпуса будет использоваться следующий стек технологий.

  • Фреймворк кроссплатформенного настольного приложения:electron (Хром + Node.js)

  • Библиотека пользовательского интерфейса: iView

  • js-фреймворк: Vue.js

  • Инструменты автоматизированной сборки: webpack

  • HTML5, CSS3, ES6

Категории