- Из веб-сайта HTML JS PHP в устанавливаемое настольное приложение
- ШАГ 1
- ШАГ 2
- ШАГ 3
- ШАГ 4
- ШАГ 5
- ВЫВОДЫ
- ОСОБЫЕ СОВЕТЫ
- Что делать, если мне нужно изменить версию PHP?
- Что если моему приложению нужна база данных?
- Что если использовать .htaccess перенаправление на index.php для дружественных URL?
- Русские Блоги
- Упаковать HTML в исполняемый файл .EXE на основе полноэкранной программы NW.JS без полей.
- 1. Загрузите / установите пакетное программное обеспечение NW.js.
- Два, упаковочная операция
- HTML to EXE Convert Online Free HTML to EXE converter
- HTML File Type
- EXE File Type
- Software, that convert HTML files
- HTML to EXE Converters
Из веб-сайта HTML JS PHP в устанавливаемое настольное приложение
Если вы разработали веб-сайт или веб-приложение, его очень легко превратить в устанавливаемое настольное приложение. Вот как это сделать.
ШАГ 1
Зайдите на этот репозиторий https://github.com/cztomczak/phpdesktop, созданный Чареком Томчаком, затем найдите загрузки. Поскольку я работаю с Windows, я использовал PHP Desktop v57.0 for Windows release (https://github.com/cztomczak/phpdesktop/releases/tag/chrome-v57.0-rc).
Скачайте zip-файл и распакуйте содержимое в любое удобное для вас место. Переименуйте папку по своему усмотрению, вы можете использовать название вашего сайта. Назовем ее Myapp .
Это своего рода контейнер с автономным веб-сервером (Mongoose) и PHP 7.1.3.
Например, запуск exe-файла phpdesktop-chrome.exe «прочитает» то, что находится внутри папки Myapp/www . Именно туда вам нужно будет переместить весь ваш сайт.
ШАГ 2
Сотрите то, что находится внутри папки Myapp/www и скопируйте туда весь ваш сайт (не помещайте его во вложенные папки). Будьте внимательны, любой ресурс, используемый на вашем сайте должен быть доступен внутри этой папки , локально, или доступен онлайн , если вы не возражаете, что вашему настольному приложению потребуется подключение к интернету для работы. Если, например, вы использовали CDN, то без подключения ваше настольное приложение не будет работать должным образом.
ШАГ 3
Переименуйте файл Myapp/phpdesktop-chrome.exe , вы можете использовать имя вашего приложения, положим Myapp.exe .
На данном этапе я предлагаю протестировать приложение, дважды щелкнув на myapp.exe и убедиться, что все работает так, как ожидалось. Если вы найдете какие-то ошибки из-за другого окружения, вы можете отлаживать его как обычный сайт из того же окна, проверяя его с помощью devtool и работая над файлами папки Myapp/www в вашей IDE.
ШАГ 4
Чтобы ваш сайт выглядел как реальное настольное приложение , вам нужно изменить некоторые основные настройки, которые вы можете найти в файле Myapp/settings.json .
Я предлагаю вам изменить следующие вещи:
Это предотвратит открытие консоли отладки
"title": "Application Name", "icon": "www/img/applicationicon.ico",
Это изменит заголовок окна и значок окна приложения.
Потому что вы можете захотеть, чтобы приложение запускалось в максимальном размере, а не в маленьком окне.
- В разделе chrome:Здесь есть некоторые опции по включению/отключению devtool, f5 reloading и других функций браузера, которые вы можете захотеть отключить, потому что они хорошо смотрятся на сайте, но не в локальном приложении.
ШАГ 5
На данном этапе у нас есть портативная программа для запуска, мы могли бы создать ярлык для файла Myapp.exe , поместить его куда угодно, и все должно работать как приложение. Но цель не в этом. Мы хотим получить устанавливаемое настольное приложение, которое любой может установить и запустить на ПК.
Для этого нам нужен другой инструмент: Inno Setup (https://jrsoftware.org/isinfo.php).
Это бесплатная программа, которая преобразует нашу папку Myapp в устанавливаемый .exe файл.
Итак, скачайте и установите эту программу https://jrsoftware.org/isdl.php.
После установки, если программа не открылась автоматически, откройте ее и выберите Create a new script using the Script Wizard (это самый простой способ), затем нажмите next.
Этот мастер довольно понятен, я лишь укажу на некоторые детали, которые могут вызвать затруднения:
- На странице Application Files в первом поле ввода нужно выбрать exe-файл (в нашем случае Myapp/Myapp.exe ), а в поле Other application files нажмите на Add folder и выберите всю папку Myapp .
- На странице Ассоциация файлов приложений снимите флажок.
- На странице Настройка режима установки я предлагаю оставить опцию Административный режим установки отмеченной или позволить пользователю выбрать ее (последний флажок).
- На странице Настройки компилятора в первом поле выберите место, куда будет создан exe-файл установщика, затем выберите имя для этого файла и его иконку (это будет иконка для ярлыка, если вы решите его создать).
- В конце будет создан скрипт, и вас спросят, хотите ли вы запустить его немедленно. Вы можете сделать это сразу и/или сохранить скрипт и открыть его позже в той же программе, а затем запустить его. Я советую сохранить скрипт в любом случае: после опробования вашего настольного приложения вам может понадобиться изменить что-то, что вы забыли или что не работает должным образом, поэтому после внесения некоторых изменений в ваш код вам просто придется повторно запустить тот же самый сохраненный скрипт, избегая повторного создания его с нуля через мастер. В любом случае, запустите скрипт.
- После компиляции скрипта вы найдете ваш установочный exe-файл в указанном вами месте, и это все. Он будет работать как любое другое настольное приложение, готовое к установке: скопирует всю папку Myapp в путь программ (или куда угодно, в зависимости от выбора пользователя и вашего во время настройки мастера) и создаст ярлык там, где вы захотите.
ВЫВОДЫ
Надеюсь, это вам чем-то помогло, и если вы остались со мной до сих пор, я благодарю вас, давая еще несколько советов и настольное приложение, которое я создал из моей веб-игры «Виселица» (описана здесь https://dev.to/mmj/php-hangman-game-4b26).
Загружаемая игра «Виселица» -> https://bit.ly/3yR8D8j
ОСОБЫЕ СОВЕТЫ
Что делать, если мне нужно изменить версию PHP?
Если вам нужно изменить версию PHP, вы можете скачать нужную вам версию отсюда https://www.php.net/downloads.php.
После того, как вы ее скачали, вы можете извлечь в папку php проекта, удалив все, что в ней было. Вот и все.
Что если моему приложению нужна база данных?
Ничто не мешает вам использовать внешнюю онлайн БД, если она доступна, ее конфигурация позволяет пользователям подключаться к ней, и вы не против настольного приложения, которому для работы нужен интернет. Вы даже можете использовать для этого API.
Но если вам нужна портативная БД внутри приложения, которая будет работать локально и даже без подключения, вы можете использовать SQLite, которая представляет собой встроенную базу данных, работающую на хост-машине и хранящую все в одном файле, так что она может лежать в самой папке проекта.
Для использования этого инструмента я предлагаю вам скачать SQLite browser (https://sqlitebrowser.org/). Этот инструмент поможет вам управлять вашей SQLite DB, создавать таблицы, редактировать записи и выполнять запросы.
Если вы уже создали небольшой сайт с базой данных MySql, то, скорее всего, вам нужно просто протупить, запустить запрос для создания базы данных с помощью SWLite и изменить тип подключения к базе данных. Остальное будет работать как раньше или потребует небольшого рефакторинга.
Что если использовать .htaccess перенаправление на index.php для дружественных URL?
Так получилось, что первый мой сайт, который я пытался преобразовать в настольное приложение, имел очень простую систему маршрутизации, основанную на перенаправлении на index.php, заданном в файле .htaccess (с веб-сервером Apache).
Теперь Mongoose не поддерживает .htaccess, но вы можете управлять перенаправлением на файл одной страницы в файле settings.json папки проекта.
Вы можете установить индекс здесь
"index_files": ["index.html", "index.php"],
А перенаправление на файл в случае ненайденной страницы можно задать здесь
Это должно помочь. Но мне пришлось добавить еще один шаг, потому что я использовал этот тип переписывания в .htaccess
RewriteEngine on RewriteCond % !-f RewriteCond % !-d RewriteRule ^(.*)$ index.php?q=$1 [NC,L,QSA]
что позволит вам получить запрашиваемый URL следующим образом
Это, конечно, больше не работало, и мне пришлось использовать
Поэтому, чтобы заставить его работать и с Apache, и с Mongoose, я сделал примерно следующее
$q = isset($_GET['q']) ? $_GET['q'] : substr($_SERVER['REQUEST_URI'], 1);
Русские Блоги
Упаковать HTML в исполняемый файл .EXE на основе полноэкранной программы NW.JS без полей.
1. Загрузите / установите пакетное программное обеспечение NW.js.
Официальный сайт NW.js:nwjs.io
Китайский веб-сайт NW.js:nwjs.org.cn
Как сказано на китайском веб-сайте, для домашних пользователей скорость загрузки ниже, чем у Tortoise, и большинство из них не сможет загрузить. Рекомендуется использовать зеркало Taobao NPM для загрузки:
https://npm.taobao.org/mirrors/nwjs/
NW.js делится на две версии:
- обычная версия: официальная версия выпуска
- Версия SDK: с хромированным отладчиком, удобная для отладки
Используйте в соответствии с вашими потребностями, не нужно отлаживать, просто для упаковки / удаления фрейма вы можете загрузить версию выпуска напрямую
Вот демо для загрузки релизной версии 0.45.0:
https://npm.taobao.org/mirrors/nwjs/v0.45.0/nwjs-v0.45.0-win-x64.zip
Загружаемый пакет представляет собой сжатый пакет, просто распакуйте его напрямую, вам нужно настроить переменные среды, вы можете просто игнорировать его, если вы этого не понимаете, и это не повлияет на последующие операции.
Если вы хотите начать работу, вы можете перейти на китайский официальный сайт, чтобы узнать о кратком руководстве по документации для разработки:
https://nwjs.org.cn/doc/user/Getting-Started.html
Просто упакуйте пакет и переходите к следующему тексту.
Два, упаковочная операция
Создайте новый файл в файле, который нужно упаковать: package.json, содержимое внутри:
может быть изменен в соответствии с потребностями, не задействован, может использоваться по умолчанию
"main": "index.html", // Ввод программы упаковки "name": "cloud", // Строка должна состоять из строчных букв или цифр и может содержать "." или "_" или "-", пробелы не допускаются, она должна быть уникальной "description": "демонстрационное приложение node-webkit", // описание "version": "1.0.0", // версия "ключевые слова": ["демонстрация", "node-webkit"], // Ключевые слова "window":/ Конфигурация окна "title": "node-webkit", // Заголовок формы "icon": "link.png", // значок ico формы "toolbar": false, // Вам нужна панель инструментов "frame": true, // логическое значение. Если установлено значение false, программа будет отображаться без границ, то есть в системе по умолчанию нет кнопки закрытия, минимизации и полноэкранного режима. "width": 1000, // Размер окна: width "height": 800, // Размер окна: длинный «позиция»: «мышь», // строка. Положение при открытии окна может быть установлено на «ноль», «центр» или «мышь». "min_width": 400, // минимальная ширина "min_height": 200, // минимальная высота "max_width": 9999, // Максимальная ширина "max_height": 9999, // Максимальная высота "as_desktop": false, // Отображать ли как фоновое окно рабочего стола "resizable": true, // Можно ли изменять размер окна "always-on-top": true, // находится ли окно сверху "fullscreen": false, // Отображать ли в полноэкранном режиме "show_in_taskbar": true, // Отображать ли значок панели задач "show": true, // Если установлено значение false, окно не будет видно при запуске "kiosk": false // Использовать ли режим киоска. Если вы используете режим киоска, приложение будет отображаться в полноэкранном режиме и не позволит пользователю покинуть приложение. > , "webkit": < "plugin": true, // значение типа bool, загружать ли подключаемый модуль, например flash, значение по умолчанию - false. "java": false, // логическое значение, загружать ли Java-апплеты "page-cache": false // Включать ли кеширование страницы >>
Затем выберите все файлы и сожмите их в.zip Файл (не для файлов .rar) и измените суффикс на:.nw
Откройте .nw прямо сейчас с помощью nw.exe, и появится ваша веб-страница (вам не нужно открывать этот шаг, если вы настроили переменные среды / понимаете операции с путями) в Фактически, его открытие эквивалентно предварительному просмотру результатов и поиску пути упаковщика
nw.exe — это файл, распакованный из только что загруженного NW.js.
Следующим шагом будет его упаковка в EXE-файл.
CMD открывает командную строку, находит компакт-диск в папке, где находится nw.exe, и вводит:
copy /b nw.exe+Имя файла.имя файла nw, созданное после упаковки.exe
copy /b nw.exe+Ring.nw Ring.exe
Пока упаковка завершена, и исполняемый файл Ring.exe был сгенерирован в каталоге файлов, где находится nw.exe.
Исполняемый файл зависит от других файлов в каталоге, если вам нужно запустить его самостоятельно, вы должны продолжить упаковку
- Метод инкапсуляции 1: используйте Enigma Virtual Box, программа после конвертации больше, обычно 100M +
- Второй метод инкапсуляции: используйте innosetup
Этот инструмент сгенерирует версию установки, а размер установочного файла составляет не более 50 МБ. Этот метод рекомендуется. Для конкретных случаев использования см.https://blog.csdn.net/miaodichiyou/article/details/81668431?utm_source=blogxgwz2x
Значок NW.exe по умолчанию не может быть изменен через файл конфигурации, вам необходимо использовать инструмент Resource Hacker для изменения
HTML to EXE Convert Online Free HTML to EXE converter
You can convert HTML files to EXE format in several ways. The most proven option is to download dedicated software that allows you to convert between the HTML and EXE formats. At the bottom you will find a list of software programs that support HTML and EXE files and can also save them in new file formats.
HTML File Type
HTML is a markup language that defines the structure and layout of a web page. HTML stands for Hypertext Markup Language. It is one of the most commonly used markup languages on the internet. It is used for defining the content and design of a web page.
Full Name | Hypertext Markup Language Format |
---|---|
Developer | N/A |
Category | Web Files |
EXE File Type
EXE files are Windows Executable Files that can be opened with a number of file extensions. The EXE file extension stores data such as the name of the program and the date it was created.
Full Name | Windows Executable Format |
---|---|
Developer | Microsoft |
Category | Executable Files |
Software, that convert HTML files
The list contains a list of dedicated software for converting HTML and EXE files. The list may also include programs that support HTML files and allow you to save them with different file extensions.