JS開發桌面端應用程式教程

前言

本文為開發nw中遇到的各種問題，僅以記錄供備忘以及遇到相同問題的人的一點點解決思路。

1. package.json中的window字段無效

原因：package.json中的window字段，只在main欄位為*.html或是外部網址時有效，當為*.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
  },}

關於其他package.json中的可使用的配置請參閱官網：

2. nw-builder一次只能打包一個項目

nw預設不包含打包成.exe檔的形式，遂nw-builder項目為自動將nw應用打包壓縮成可執行檔的程式。
詳見：

假設nw-builder的設定檔如下：

#

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

設定欄位files指定了app資料夾下的所有文件，但app資料夾下存在兩個項目：nw-demo和zfile-explorer


對於這種情況nw-builder只會打包出按檔案名稱排序的第一個文件夾項目：nw-demo


3. 在nw中植入全域變數的方法

前提：需要在nw專案中的package.json中的main欄位指定為*.js檔案。或是指定本地的.html檔案後再載入js檔案

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

#在mian欄位指定的js檔案中，再使用nw.Window.open來載入指定本機頁面或是外部網址，如：

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

在這個js檔案中可以使用4種方法植入全域變數或全域方法：
1、將全域變數使用var方式宣告賦值
2、將全域變數直接賦值，無定義
3、將全域變數掛載到window上
4、將全域變數掛載到global上

測試程式碼：

#

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

在用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>

結論：
在動態載入的頁面中，存取全域變數只能使用global.*的方式 。
之所以會這樣是因為nw的運行環境是chromium和Nodejs混合的。所以可以在網頁js執行Nodejs程式碼。
雖然可以但不應該！
從頁面程式碼的責任一致性上不應該在網頁程式碼中編寫nodejs程式碼，遂應該將global中的物件寫入每個網頁的window物件中。之後頁面代碼再從window.*中呼叫

植入每個頁面window中的方法

可利用nw的對package.json擴充字段的inject_js_start和inject_js_end來實作。

官方說明：
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 script script is runother .

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 openas an option of Windasow.option of Windasow. ) to inject JS in a new window.

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

inject_js_start 欄位指向本地的js文件，他可以在載入的任何頁面的任何頁面js執行前執行。

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

在植入的js檔案中，將global中的變數賦值到目前頁面window中

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

之後即可在任何nw開啟的頁面中透過window.xxcanghai_1來存取全域變數了。

4. nwjs主進程出現異常後不顯示窗體

現象：nwjs主進程出現異常後不顯示窗體，不彈出錯誤提示，也不會自動結束進程
原因：package.json文件中的main欄位為.js文件，同時此js文件出現error時會出現此問題。
解決方案：package.json文件中的main欄位使用.html文件，然後再載入要執行的nw主程式js檔即可。這樣即使報錯了也會顯示出空窗口，同時也可以透過開發者工具列查看問題原因，使用者也可以關閉應用，不至於無法結束進程。

其他教學文章

使用 NW.js 將 Web 應用程式打包為桌面應用程式

以上是JS開發桌面端應用程式教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！