站長資訊網
        最全最豐富的資訊網站

        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
        JS開發桌面端應用程序教程?

        對于這種情況nw-builder只會打包出按文件名排序的第一個文件夾項目:nw-demo
        JS開發桌面端應用程序教程?

        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的運行環境是chromiumNodejs混合的。所以可以在網頁js中執行Nodejs代碼。
        雖然可以但不應該!
        從頁面代碼的責任一致性上不應該在網頁代碼中編寫nodejs代碼,遂應該將global中的對象寫入每個網頁的window對象中。之后頁面代碼再從window.*中調用

        植入每個頁面window中的方法

        可利用nw的對package.json擴展字段的inject_js_startinject_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 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字段指向本地的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 應用打包為桌面應用

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 精品福利视频一区二区三区| 国产成人精品cao在线| 四虎精品成人免费永久| 亚洲av无码国产精品夜色午夜| 国产精品嫩草影院久久| 99视频精品全部在线观看| 中日精品无码一本二本三本| 国产精品久久久99| 精品久久一区二区| 国产精品天天看天天狠| 日韩精品无码一本二本三本| 四虎精品免费永久免费视频| 国产精品自在线拍国产第一页| 欧美久久精品一级c片片| 岛国精品一区免费视频在线观看| 午夜精品射精入后重之免费观看 | 亚洲精品成人久久久| 国产精品单位女同事在线| 国产精品网址你懂的| 国产精品天天看天天狠| 日本VA欧美VA欧美VA精品| 在线观看亚洲精品国产| 亚洲精品tv久久久久| 中文字幕精品一区二区三区视频| 四虎成人精品国产永久免费无码| 欧美成人精品一区二三区在线观看 | 日韩经典精品无码一区| 久久精品成人免费观看97| 国内精品99亚洲免费高清| 国产精品自在线拍国产第一页 | 亚洲国产精品成人精品无码区在线| 欧美精品福利视频一区二区三区久久久精品| 国产99久久九九精品无码| 亚洲国产精品一区| 亚洲精品欧美综合| 2023国产精品自拍| 99热成人精品国产免男男| 国产福利精品视频自拍 | 精品国产毛片一区二区无码| 精品亚洲欧美无人区乱码 | 久久人人爽人人精品视频|