<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                # node-webkit學習(2)基本結構和配置 > 作者:玄魂 > 來源:[node-webkit學習(2)基本結構和配置](http://www.cnblogs.com/xuanhun/p/3656003.html) ## 目錄 + 2.1 基本程序結構 + 2.2 package.json + 2.2.1 必須的配置 + 2.2.2 特性控制字段 + 2.3 小結 ## 2.1 基本程序結構 ![](img/101109029344419.jpg) 如上圖,是一個nw程序的基本組織結構,在根目錄下package.json,程序的配置文件;index.html(可以是任意名稱),應用的啟動頁面;js/css/resources,應用的樣式、腳本、html、圖片等資源文件;node_modules存放node.js的擴展組件。 nw在啟動應用程序時,首先要讀取package.json文件,初始化基本屬性,下面我們看看package.json的參數。 ## 2.2 package.json 一個完整的package.json實例如下: ``` { "main": "index.html", "name": "nw-demo", "description": "demo app of node-webkit", "version": "0.1.0", "keywords": [ "demo", "node-webkit" ], "window": { "title": "node-webkit demo", "icon": "link.png", "toolbar": true, "frame": false, "width": 800, "height": 500, "position": "mouse", "min_width": 400, "min_height": 200, "max_width": 800, "max_height": 600 }, "webkit": { "plugin": true } } ``` ### 2.2.1 必須的配置 在上面的配置中`main`和`name`是必須的屬性。 `main`指定程序的起始頁面。 `name`字符串必須是小寫字母或者數字,可以包含"." 或者"_"或者"-" ,不允許帶空格。`name`必須全局唯一。 ### 2.2.2 特性控制字段 `nodejs` bool值,如果設置為false,將禁用webkit的node支持。 在上一篇文章([node-webkit學習(1)hello world](http://www.xuanhun521.com/Blog/2014/4/9/node-webkit%E5%AD%A6%E4%B9%A01hello-world))中的示例,在helloWorld.html中,輸出了node.js的版本信息,現在我們在pakage.json中禁用node。 ![](img/101109147789868.png) 結果如下: ![](img/101109205433608.png) 版本信息沒有輸出,同時在終端會出現未捕獲異常: ``` [10894:0409/144559:INFO:CONSOLE(8)] "Uncaught ReferenceError: process is not defined", source: file:///tmp/.org.chromium.Chromium.F4YVql/helloword.html (8) ``` `node-main` 字符串。指定一個node.js文件,當程序啟動時,該文件會被運行,啟動時間要早于node-webkit加載html的時間。它在node上下文中運行,可以用它來實現類似后臺線程的功能。 在node-main腳本中還可以訪問全局的“`window`”對象,它指向DOM窗口,但是如果頁面導航發生變化,訪問到的window對象也會發生變化。因為它執行時間要早于DOM加載,所以要等頁面加載完畢,才能使用“`window`”對象。 同時,在DOM頁面中,可以通過`process.mainModule`來獲取node-main信息。 繼續修改之前的helloworld,在程序源文件夾下,添加一個hello.js,內容如下: ``` var i = 0; exports.callback0 = function () { console.log(i + ": " + window.location); window.alert ("i = " + i); i = i + 1; } ``` 修改helloworld.html為: ``` <html> <head> <title>Hello World!</title> </head> <bodyonload="process.mainModule.exports.callback0()"> <h1>Hello World!</h1> We are using node.js <script>document.write(process.version); </script> </body> </html> ``` ![](img/101109289344943.png) 修改package.json,添加“node-main”配置。 ![](img/101109351687839.png) 重新打包所有文件,運行。 ![](img/101109407478635.png) 不停的刷新頁面,可以看到i值在不斷增加,證明node-main中的代碼在單獨的contex中運行。 ![](img/101109496061128.png) `single-instance` bool值。默認情況下,如果將node-webkit程序打包發布,那么只運行同時啟動一個該應用的實例。如果你希望允許同時啟動多個實例,將該值設置為false。 `window` 設置窗口外觀。由一組子屬性構成,分別如下: `title` 字符串,設置默認title。 `width/height` 主窗口的大小。 `toolbar` bool值。是否顯示導航欄。 現在修改package.json如下: ![](img/101109585593592.png) 重新運行程序,結果如下: ![](img/101110063254987.png) 在圖中我們可以看到,窗口的title、大小和顯示位置都發生 了變化,同時導航欄消失 了。 `icon` 窗口的icon。 `position` 字符串。窗口打開時的位置,可以設置為“null”、“center”或者“mouse”。 `min_width/min_height` 窗口的最小值。 `max_width/max_height` 窗口顯示的最大值。 `as_desktop` bool值。(暫時還沒明白具體作用) `resizable` bool值。是否允許調整窗口大小。 `always-on-top` bool值。窗口置頂。 `fullscreen` bool值。是否全屏顯示。 `show_in_taskbar` 是否在任務欄顯示圖標。 ![](img/101110168403409.png) 如上圖,配置程序在任務欄顯示,在windows和ubuntu下運行,都可以看到顯示任務欄圖標。 ![](img/101110242008159.png) `frame` bool值。如果設置為false,程序將無邊框顯示。 示例package.json: ![](img/101110334348837.png) 運行效果如下: ![](img/101110399654177.png) 默認情況下,無邊框的程序,將不可拖動。 可以通過添加如下樣式來使窗口可拖動: ``` <html> <head> <style> body { -webkit-user-select:none; -webkit-app-region:drag; } </style> </head> <body onload="process.mainModule.exports.callback0()"> <h1>Hello World!</h1> We are using node.js <script>document.write(process.version); </script> </body> </html> ``` `show` bool值,如果設置為false,啟動時窗口不可見。 `kiosk` bool值。是否使用kiosk模式。如果使用kiosk模式,應用程序將全屏顯示,并且阻止用戶離開應用。 `webkit` webkit屬性,用來控制webkit一些特性的打開或者關閉,由一組屬性組成。 `plugin` bool值,是否加載插件,如flash,默認值為false。 `java` bool值,是否加載Java applets,默認為false。 `page-cache` bool值,是否啟用頁面緩存,默認為false。 `user-agent` 應用發起http請求時,使用的user-agent頭信息。下列占位符可以被替換: + %name: 替換配置中的name屬性 + %ver: 替換配置中的version屬性 + %nwver: 被node-webkit版本信息替換. + %webkit_ver: 被WebKit 引擎的版本信息替換. ·+%osinfo: 被 操作系統和 CPU 信息 替換,在瀏覽器的 user agent 字符串中可以被看到. 示例配置: ``` { "name": "nw-demo", "main": "helloword.html", "nodejs":true, "node-main":"hello.js", "window": { "title": "設置默認", "toolbar": true, "width": 300, "height": 200, "resizable":true, "show_in_taskbar":true, "frame":true, "kiosk":false }, "webkit":{ "plugin":true } "user-agent": "測試 %ver %nwver %webkit_ver windows7" /* 替換占位符內容即可 */ } ``` `chromium-args` string類型,自定義chromium啟動參數。詳細的參數列表參考:[http://src.chromium.org/svn/trunk/src/content/public/common/content_switches.cc](http://src.chromium.org/svn/trunk/src/content/public/common/content_switches.cc) `js-flags` string類型,傳遞給js引擎(V8)的參數。例如,想啟用Harmony Proxies和 Collections功能,可以使用如下配置方式: ``` { "name": "nw-demo", "main": "index.html", "js-flags": "--harmony_proxies --harmony_collections" } ``` `inject-js-start / inject-js-end` string 類型。指定一個js文件。 對于inject-js-start,該js文件會在所有css文件加載完畢,dom初始化之前執行。 對于inject-js-end,該js文件會在頁面加載完畢,onload事件觸發之前執行。 `snapshot` string類型,應用程序的快照文件路徑。包含編譯的js代碼。使用快照文件可以有效的保護js代碼。后續文章會詳細介紹。 `dom_storage_quota` int類型,dom 存儲的限額(以自己為單位)。建議限制為你預想大小的2倍。 `no-edit-menu` bool值,Edit菜單是否顯示。僅在Mac系統下有效。 `description` 簡要描述 `version` 版本信息 `keywords` 關鍵詞 `maintainers` 軟件維護者信息,是一個數組,示例如下: ``` "maintainers":[ { "name": "Bill Bloggs", "email": "billblogs@bblogmedia.com", "web": "http://www.bblogmedia.com", }] ``` 每個維護人的信息中,name字段是必須字段,其他兩個(email和web)是可選字段。 `contributors` 貢獻者信息,格式同maintainers,按照約定,第一個contributor是該應用的作者。 `bugs` 提交bug的url。可以是“mailto:”或者“[http://](http://i.cnblogs.com)”格式。 `licenses` 一個數組,可以包含多個聲明。每個聲明包含“type”和“url”兩個屬性,分別指定聲明的類型和文本。 示例如下: ``` "licenses": [ { "type": "GPLv2", "url": "http://www.example.com/licenses/gpl.html", } ] ``` `repositories` 程序包的存儲地址數組。示例如下: ``` "repositories": [ { "type": "git", "url": "http://github.com/example.git", "path": "packages/mypackage" } ] ``` type和url指定可以下載或者克隆程序包的地址,如果程序包不在根目錄中,需要在path屬性指定相對目錄。 ## 2.3 小結 本篇文章基本涵蓋了package.json的所有字段的說明,有些字段本人也不明白實際用途,還有些字段現階段node-webkit也沒有使用(description,version,keywords,maintainers,contributors,bugs,licenses,repositories)。 下一篇文章介紹常用的native api。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看