Настольное приложение H5 на базе NW

JavaScript

1 Обзор

nwjsосновывается наChromiumа такжеNode.jsработает, мы можем пройтиhtml+cssнаписатьUIСтраница использует js для реализации функции. можно вызвать напрямуюNode.jsвидыapiа также существующие сторонние пакеты.

из-заChromiumа такжеNode.jsкроссплатформенным, то ваше приложение также может быть кроссплатформенным.

Уже есть много известных приложений на базе NW.js, вот несколько списков официальной статистики:https://github.com/nwjs/nw.js/wiki/List-of-apps-and-companies-using-nw.js.

Знакомые инструменты разработчика WeChat в области внешнего интерфейса основаны наnwjsразвивающийся.

Центр документации СЗ:https://nwjs.org.cn/

2. Начало работы

Вы можете скачать прямо из Интернетаnwверсииhttps://nwjs.org.cn/download.htmlтакже можно использоватьnpmУстановить.

Разархивируйте загруженный архив, вы можете изменить имя разархивированной папки или создать новую папку для хранения разархивированных файлов.copyвходить. По сути, главный полезный документ — этоnwВыполните программу, пока этого достаточно.

затем вnwСоздайте новый каталог на том же уровне, что и программа для выполненияpackage.jsonдокумент. В нем задайте имя приложения и запустите выполнениеhtmlстраница. Затем создаем новый в папкеindex.html

package.jsonНапишите имя приложения и страницу запуска в файле .

{
  "name": "我的应用", // 名称
  "main": "index.html", // 启动页面
}

существуетhtmlНапишите что-нибудь в файле.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的应用</title>
</head>
<body>
    我的应用程序
</body>
</html>

Двойной кликnwjsВыполните эту программу, страница будет расти вот так.

3. Конфигурация приложения

Далее мы вводимpackage.jsonКакие параметры можно настроить в

{
  "name": "应用的名称", // 应用的名称
  "main": "./index.html", // 指定应用的主页面
  "build": "1445048139741", // 这是为了给更新时判断版本用的时间戳
  "version": "0.0.1",// 当前的版本号
  "homepage": "一般是官网地址之类的",
  "description": "应用的描述", // 描述
  "window": {
    "title": "应用打开时候显示的名称", // 如果 index.html没有title,则会显示这里的值
    "icon": "assest/img/logo.png", // icon
    "position": "center", // 打开应用时在浏览器屏幕中的位置
    "width": 1280, // 应用的宽度
    "height": 680, // 应用的高度
    "toolbar": true, // 是否隐藏窗口的浏览器工具栏，nw老版本还有用，新版本已经无效了
    "frame": true, // 是否显示最外层的框架，设为false之后 窗口的最小化、最大化、关闭 就没有了
    "resizable": true, // 可以通过拖拽变换应用界面大小
    "min_width": 1028 // 最小宽度
  },
  "node-main": "./node-main.js",// 启动时执行的js，检查更新之类的。
}

На самом деле здесьpackage.json — это файл управления проектом в нашем ежедневном проекте разработки, мы можем передатьnpmилиyarnспособ установить сторонние зависимые пакеты, а затем передатьrequireСпособ импорта, его также можно использовать здесь.

Например, мы проходимnpmустановить одинmarkedмодуль.

npm install marked --save-dev

{
  "name": "我的应用",
  "main": "index.html",
  "devDependencies": {
    "marked": "^1.2.5"
  }
}

затем вhtmlсерединаscriptпрошедшийrequireЗагрузите этот модуль и используйте этот модуль, чтобы избежать предложения на странице.markedown.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的应用</title>
</head>
<body>
    <div id="content"></div>
    <script>
        const marked = require('marked'); // 加载marked模块
        document.getElementById('content').innerHTML = marked('# Marked in the browser\n\nRendered by **marked**.');
    </script>
</body>
</html>

Эффект следующий:

4. Разработка и отладка

новая версияnwАдресной строки нет, и консоли нет, что доставит большие неудобства в процессе разработки, но это тоже легко решается, можно воспользоваться Tencent'svconsoleдля отладки кода.

представлятьvconsole.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的应用</title>
</head>
<body>
    <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
    <script>
        var vConsole = new VConsole();
        console.log('Hello world');
    </script>
</body>
</html>

5. Упаковка программного обеспечения

еслиmacсистема, упаковка относительно проста,package，htmlПапка, в которой находятся ресурсы, сжата вzip,УведомлениеnwjsНе сжимайте исполняемую программу, иначе размер пакета будет слишком большим, а затем измените имя файлаapp.nw, обратите внимание, что суффикс здесь изменен наnw.

затем вnwjsщелкните правой кнопкой мыши файл显示包内容 -> Contents -> Resources, вышесказанноеapp.nwФайл вставлен, и естьapp.icnsЭто значок дисплея нашего программного обеспечения, вы можете сделать его и заменить самостоятельно. Таким образом, наше программное обеспечение только закончено и может быть отправлено другим для использования.

windowsМетод упаковки системы относительно хлопотный, прежде всегоpackage，htmlПапка, в которой находятся ресурсы, сжата вzip, измените суффикс наapp.nw, а затем нужноnw.exeа такжеapp.nwобъединить в одну папку. Вы можете использовать следующую команду для работы.

copy /b nw.exe+app.nw app.exe

тогда вы можете скачатьEnigma Virtual BoxУпакуйте файлы в пакет. Сменный программный дисплейiconдоступны с помощьюzipСпособность.

程序 -> 添加到压缩文件 -> zip, 存储（方式） , 创建自解压 -> 高级 -> 自解压选项 -> 设置 -> 提取后运行(添加文件名.exe) -> 模式(解压到临时文件夹, 全部隐藏) -> 更新(覆盖所有文件) -> 文本和图标(从文件加载自解压文件图标) -> 确定.

На этом этапе упакованное приложение может быть отправлено пользователю для использования.

На данный момент мы можем разработать наши настольные инструменты.Я разработал следующий инструмент.

Ну, это не похоже на инструмент, забудь, кому какое дело, играй в Контру онлайн с товарищами по команде...

Категории