Tutorial zur Entwicklung von JS-Desktopanwendungen

Vorwort

In diesem Artikel geht es um verschiedene Probleme, die bei der Entwicklung von NW aufgetreten sind. Er wird nur zur Erinnerung und für einige Lösungen für Personen aufgezeichnet, die auf das gleiche Problem gestoßen sind.

1. Das Fensterfeld in package.json ist ungültig

Ursache: Das Feld package.json in window ist nur main im *.html Feld Es ist gültig, wenn es sich um eine externe URL handelt, aber es ist ungültig, wenn es *.js ist.

{
  "name": "blog",
  "main": "http://php.cn/",//main为网址，下方的window设定有效
  //"main": "index.html",//main为 *.html，下方的window设定有效
  //"main": "index.js?1.1.11",//main为 *.js，下方的window设定无效！！
  
  "version": "0.0.1",
  "window": {"title": "Nw.js Demo",//如果 index.html没有title,则会显示这里的值"icon": "assest/img/logo.png",//标题栏图标"position": "center",//默认显示位置"width": 1280,"height": 680,"frame": true,//是否显示最外层的框架，设为false之后 窗口的最小化、最大化、关闭 就没有了"resizable": true,"min_width": 1028
  },}

Informationen zu verfügbaren Konfigurationen in anderen package.json finden Sie auf der offiziellen Website:

2 Zu einem Zeitpunkt Ein Projekt

nw beinhaltet standardmäßig keine Verpackung in .exe-Dateien, daher ist das nw-builder-Projekt ein Programm, das neue Anwendungen automatisch in ausführbare Dateien verpackt und komprimiert.
Weitere Informationen finden Sie unter:

Angenommen, die Konfigurationsdatei von nw-builder lautet wie folgt:

var nw = new NwBuilder({
   version: '0.14.7', 
   files: './app/**',//nw应用项目目录
   platforms: ['win32'], });

Die Konfigurationsfelddateien geben alles an Dateien unter der App-Ordnerdatei, aber es gibt zwei Projekte unter dem App-Ordner: nw-demo und zfile-explorer


In diesem Fall packt nw-builder nur das erste Sortiert nach Dateinamen. Ordnerprojekt: nw-demo


3. So implantieren Sie globale Variablen in nw

Voraussetzung: Muss sein im neuen Projekt Das Hauptfeld in package.json wird als *.js-Datei angegeben. Oder geben Sie die lokale .html-Datei an und laden Sie dann die js-Datei

package.json文件{
  "name": "nw-demo",
  "version": "1.0.0",
  "description": "",
  "main": "./main.js?1.1.11",
  "scripts": {"start":"cd ../../ & gulp nw"
  },
  ...}

In der im Hauptfeld angegebenen js-Datei verwenden Sie nw.Window.open, um die angegebene lokale Datei zu laden Seite oder externe URL, wie zum Beispiel:

main.js文件：nw.Window.open('./view/index.html', {height:600,width:800}, function (win) { });

In dieser js-Datei können Sie 4 Methoden verwenden, um globale Variablen oder globale Methoden zu implantieren:
1 und weisen Sie globale Variablen mit var
zu. 2. Weisen Sie globale Variablen direkt ohne Definition zu
. 3. Mounten Sie globale Variablen auf window
. 4. Mounten Sie globale Variablen auf global. Auf

Testcode :

main.js文件//var定义方式var xxcanghai_1 = 1;//直接赋值方式xxcanghai_2 = 10;//挂载到window对象上window.xxcanghai_3 = 100;//挂载到global对象上global.xxcanghai_4 = 1000;

Schreiben Sie den Codetest in die Seite, die dynamisch mit nw geladen wird

./view/index.html文件

<script>
   console.log(xxcanghai_1);//报错
   console.log(window.xxcanghai_1);//undefined
   console.log(global.xxcanghai_1);//1

   console.log(xxcanghai_2);//报错
   console.log(window.xxcanghai_2);//undefined
   console.log(global.xxcanghai_2);//10

   console.log(xxcanghai_3);//报错
   console.log(window.xxcanghai_3);//undefined
   console.log(global.xxcanghai_3);//100

   console.log(xxcanghai_4);//报错
   console.log(window.xxcanghai_4);//undefined
   console.log(global.xxcanghai_4);//1000
</script>

Fazit:
Auf dynamisch geladenen Seiten kann nur die global.*-Methode verwenden, um auf globale Variablen zuzugreifen.
Der Grund dafür ist, dass die Laufumgebung von nw eine Mischung aus Chrom und Nodejs ist. So kann NodeJS-Code in Webseiten-JS ausgeführt werden.
Sie können, aber Sie sollten nicht!
Aus Sicht der Verantwortungskonsistenz des Seitencodes sollte der NodeJS-Code nicht in den Webseitencode geschrieben werden, daher sollten die globalen Objekte in das Fensterobjekt jeder Webseite geschrieben werden. Danach ruft der Seitencode 从window.*

in

auf. Die in jedes Seitenfenster implantierte Methode

kann durch die Verwendung von nws package.json und inject_js_start der inject_js_end-Erweiterung implementiert werden Feld. .

Offizielle Beschreibung:
inject_js_start: Der injizierende JavaScript-Code muss nach allen CSS-Dateien ausgeführt werden, aber bevor ein anderes DOM erstellt oder ein anderes Skript ausgeführt wird .

inject_js_end: Der injizierende JavaScript-Code soll ausgeführt werden, nachdem das Dokumentobjekt geladen wurde, bevor das Onload-Ereignis ausgelöst wird. Dies wird hauptsächlich als Option von Window.open verwendet. ), um JS in ein neues Fenster einzufügen. Verweist auf die lokale JS-Datei, die ausgeführt werden kann, bevor ein Seiten-JS auf einer geladenen Seite ausgeführt wird.

inject_js_startIn der implantierten js-Datei weisen Sie die Variablen global dem aktuellen Seitenfenster zu

package.json文件：{
  "name": "blog",
  "version": "1.0.0",
  "main": "./main.html",
  "inject_js_start": "./js/inject_js_start.js?1.1.11",//设置所有页面前植入的js文件地址
  "author": "php@gmail.com",
  "license": "ISC",}

Sie können dann über

auf jeder von nw geöffneten Seite auf globale Variablen zugreifen.

4. Der nwjs-Hauptprozess zeigt das Formular nicht an, nachdem eine Ausnahme aufgetreten ist.

./js/inject_js_start.js文件：//将node的global中的变量写入每个即将打开的页面的js的window对象中window["xxcanghai_1"] = global["xxcanghai_1"]

Phänomenewindow.xxcanghai_1: Der nwjs-Hauptprozess zeigt das Formular nicht an, nachdem eine Ausnahme aufgetreten ist Es erscheint keine Fehlermeldung. Der Vorgang wird automatisch beendet.

Ursache

: Das Feld

in der Datei ist eine Datei , und dieses Problem tritt auf, wenn ein Fehler auftritt diese js-Datei.
Lösung: Verwenden Sie das Feld package.json in der Datei main und laden Sie dann die neue Hauptprogramm-JS-Datei, die ausgeführt werden soll. Selbst wenn ein Fehler gemeldet wird, wird auf diese Weise ein leeres Fenster angezeigt. Gleichzeitig kann die Ursache des Problems über die Entwicklersymbolleiste überprüft werden, und der Benutzer kann die Anwendung auch schließen, ohne sie beenden zu können Verfahren. .js
Weitere Tutorial-ArtikelVerpacken einer Web-App als Desktop-App mit NW.jspackage.json

Das obige ist der detaillierte Inhalt vonTutorial zur Entwicklung von JS-Desktopanwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!