JS desktop application development tutorial

Preface

This article is about various problems encountered in the development of nw. It is only recorded for memo and some solutions for people who have encountered the same problem.

1. The window field in package.json is invalid

Cause: The window field in package.json, It is only valid when the main field is *.html or an external URL. It is invalid when it is *.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
  },}

For the available configurations in other package.json, please see the official website:

2. nw-builder can only package one project at a time

nw does not include packaging into .exe files by default, so the nw-builder project is a program that automatically packages and compresses nw applications into executable files.
See:

Assume that the configuration file of nw-builder is as follows:

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

The configuration field files specifies all files in the app folder, But there are two projects under the app folder: nw-demo and zfile-explorer


In this case, nw-builder will only package the first file sorted by file name. Clip project: nw-demo


3. Method of implanting global variables in nw

Prerequisite: Need to be in the nw project The main field in package.json is specified as a *.js file. Or specify the local .html file and then load the js file

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

In the js file specified in the main field, use nw.Window.openTo load the specified local page or external URL, such as:

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

In this js file, you can use 4 methods to implant global variables or global methods:
1. Use the var method to declare and assign global variables.
2. Assign global variables directly without definition.
3. Mount global variables to window
4. Global variables are mounted on global

Test code:

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

Write in the page dynamically loaded with nw Code test

./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:
In a dynamically loaded page, access global variables can only use the global.* method .
The reason for this is that the running environment of nw is a mixture of chromium and Nodejs. So Nodejs code can be executed in web page js.
Although it is possible, it should not be!
From the perspective of the responsibility consistency of the page code, nodejs code should not be written in the web page code, so the objects in the global should be written into the window object of each web page. After that, the page code calls the

method implanted in each page window from window.*

You can use nw's pairpackage.jsoninject_js_start and inject_js_end of the extension field are implemented.

Official description:
inject_js_start: The injecting JavaScript code is to be executed after any files from css, but before any other DOM is constructed or any other script is run .

inject_js_end: The injecting JavaScript code is to be executed after the document object is loaded, before onload event is fired. This is mainly to be used as an option of Window.open( ) to inject JS in a new window.

http://docs.nwjs.io/en/latest/References/Manifest%20Format/#inject_js_start

inject_js_start The field points to the local js file, which can be executed before any page js is executed in any page loaded.

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

In the implanted js file, assign the variables in global to the current page window

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

Afterwards, you can access global variables through window.xxcanghai_1 in any page opened by nw.

4. The nwjs main process does not display the form after an exception occurs

Phenomenon : The nwjs main process does not display the form after an exception occurs, no error prompt pops up, and no The process will automatically end
Reason: The main field in the package.json file is the .js file, and this js file This problem occurs when an error occurs.
Solution: Use the main field in the package.json file, and then load the file to be executed nw main program js file is enough. In this way, even if an error is reported, an empty window will be displayed. At the same time, the cause of the problem can be checked through the developer toolbar, and the user can also close the application without being unable to end the process. Other tutorial articles

Use NW.js to package a web application as a desktop application

The above is the detailed content of JS desktop application development tutorial. For more information, please follow other related articles on the PHP Chinese website!