Tutoriel de développement d'applications de bureau JS

Avant-propos

Cet article concerne divers problèmes rencontrés dans le développement de nw. Il est uniquement enregistré pour mémo et quelques solutions pour les personnes ayant rencontré le même problème.

1. Le champ de fenêtre dans package.json n'est pas valide

Cause : Le champ package.json dans window est uniquement main dans le *.html champ Il est valide lorsqu'il s'agit d'une URL externe, mais il n'est pas valide lorsqu'il s'agit de *.js.

{
  "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
  },}

Pour les configurations disponibles dans d'autres package.json, veuillez consulter le site officiel :

2. à la fois Un projet

nw n'inclut pas l'empaquetage dans des fichiers .exe par défaut, donc le projet nw-builder est un programme qui emballe et compresse automatiquement les applications nw dans des fichiers exécutables.
Voir :

Supposons que le fichier de configuration de nw-builder soit le suivant :

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

Le champ de configuration fichiers spécifie tous les fichiers sous le fichier du dossier app, mais il y a deux projets sous le dossier app : nw-demo et zfile-explorer


Dans ce cas, nw-builder ne regroupera que le premier trié par nom du fichier. Projet de dossier : nw-demo


3. Comment implanter des variables globales dans nw

Prérequis : Besoin d'être dans nw. projet Le champ principal de package.json est spécifié sous forme de fichier *.js. Ou spécifiez le fichier .html local puis chargez le fichier js

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

Dans le fichier js spécifié dans le champ principal, utilisez nw.Window.open pour charger le fichier local spécifié page ou URL externe, telle que :

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

Dans ce fichier js, vous pouvez utiliser 4 méthodes pour implanter des variables globales ou des méthodes globales :
1. et attribuez des variables globales à l'aide de var
2. Attribuez des variables globales directement sans définition
3. Montez les variables globales sur window
4. Montez les variables globales sur global Sur

code de test :

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

Écrire le code test dans la page chargée dynamiquement avec nw

./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>

Conclusion:
Dans les pages chargées dynamiquement, ne peut utiliser que la global.* méthode pour accéder aux variables globales.
La raison en est que l'environnement d'exécution de nw est un mélange de chrome et de Nodejs. Le code Nodejs peut donc être exécuté dans la page Web js.
Vous pouvez mais vous ne devriez pas !
Du point de vue de la cohérence de la responsabilité du code de la page, le code nodejs ne doit pas être écrit dans le code de la page Web, donc les objets du global doivent être écrits dans l'objet window de chaque page Web. Après cela, le code de la page appelle 从window.*

dans

. La méthode

implantée dans chaque fenêtre de page peut être implémentée en utilisant les nw package.json et inject_js_start de l'extension inject_js_end. champ. .

Description officielle :
inject_js_start : Le code JavaScript injecté doit être exécuté après tout fichier CSS, mais avant la construction d'un autre DOM ou l'exécution d'un autre script. .

inject_js_end : Le code JavaScript injecté doit être exécuté après le chargement de l'objet document, avant le déclenchement de l'événement onload. Il doit principalement être utilisé comme option de Window.open(. ) pour injecter JS dans une nouvelle fenêtre. Pointe vers le fichier js local, qui peut être exécuté avant qu'une page js ne soit exécutée dans n'importe quelle page chargée.

inject_js_startDans le fichier js implanté, assignez les variables en global à la fenêtre de la page actuelle

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",}

Vous pouvez ensuite accéder aux variables globales via

dans n'importe quelle page ouverte par nw.

4. Le processus principal nwjs n'affiche pas le formulaire après qu'une exception se produit

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

Phénomèneswindow.xxcanghai_1 : Le processus principal nwjs n'affiche pas le formulaire après qu'une exception se produit, et aucune invite d'erreur ne s'affiche. Le processus se terminera automatiquement

Cause

 : Le champ

dans le fichier est un fichier , et ce problème se produira lorsqu'une erreur se produit dans ce fichier js.
Solution : Utilisez le champ package.json dans le fichier main à l'aide du fichier .js, puis chargez le nouveau fichier js du programme principal à exécuter. De cette façon, même si une erreur est signalée, une fenêtre vide s'affichera. En même temps, la cause du problème pourra être vérifiée via la barre d'outils du développeur, et l'utilisateur pourra également fermer l'application sans pouvoir terminer l'application. processus.
Autres articles de didacticielspackage.jsonEmballage d'une application Web en tant qu'application de bureau à l'aide de NW.jsmain

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!