node-webkit 使用requirejs 小結

1. node-webkit 啓動頁使用requrejs

將webapp中的require改成requirejs，由於requirejs原本就應該用requirejs的，require只是requirejs的一個別名。

requirejs(["angular","script/app","jquery"],function(angular,app){
    angular.element().ready(function(){
        angular.resumeBootstrap([app["name"]]);
    });
});;

 

2. node-webkit前端 requirejs模塊中調用node-wbkit的原生api：

nw.gui  是node-webkit native api的模塊。

引入 nw.gui 能夠經過var gui = require(‘nw.gui’); || global.window.nwDispatcher.requireNwGui()兩種方法

由於nw.gui並非nodejs 的內置的全局模塊，使用require(‘nw.gui’)方法必須在啓動頁中的script標籤中執行，  因此若是想作到在一個requrirjs的amd模塊或者node-modules下的node文件中調用nw.gui只能使用global.window.nwDispatcher.requireNwGui()(詳見 https://github.com/rogerwang/node-webkit/issues/707)

demo :調用node-webkit api  生成原生菜單 ，窗體最小化

define(function(){

    var winMenuCtrl=["$scope","$element",function($scope, element){

        gui=global.window.nwDispatcher.requireNwGui() ;
        var win = gui.Window.get();

        $scope.minimize=function(){
            win.minimize();
            win.on('minimize', function () {
                console.log("窗口最小化")

            });
        }  /* 窗口最小化 */

        creatMenu=function(){
            var menubar = new gui.Menu({ type: 'menubar' });   /*建立一級菜單*/

            var sub1 = new gui.Menu();   /*建立二級菜單*/
            sub1.append(new gui.MenuItem({
                label: '子菜單1',
                click: function() {
                    var element = document.createElement('div');
                    element.appendChild(document.createTextNode('Test 1'));
                    document.body.appendChild(element);
                }
            }));/* 向二級菜單添加menuitem */
            
            
            sub1.append(new gui.MenuItem({
                label: '子菜單2',
                click: function() {
                    var element = document.createElement('div');
                    element.appendChild(document.createTextNode('Test 1'));
                    document.body.appendChild(element);
                }
            }));/* 向二級菜單添加menuitem */
            

            menubar.append(new gui.MenuItem({ label: '菜單1', submenu: sub1 }));  /* 向一級菜單添加menuitem。*/

            var win = gui.Window.get();

            win.menu = menubar;  /* 將一級菜單指定問窗口菜單 */
        }
        creatMenu()/* 生成原生菜單 */

    }]

    return winMenuCtrl
})

　　

 

3.node-webkit 前端requrejs 模塊中調用nodejs 模塊

解決辦法： 保存nodejs 的require方法到全局變量 （在requirejs 加載以前）    

window.requireNode = window.require;

在requirejs 模塊中使用window.requireNode加載nodejs的module，之因此沒有改變requirejs 

一方面node是最早加載在webview啓動以前就加載完成了， 而requiejs是頁面啓動的時候才加載。

而另外一方面 爲了保證web端 與客戶端代碼一直 改動最小的原則

demo :amd模塊中調用nodejs 文件系統

define(function(require){

        var d3TestCtrl=["$scope","$element",function($scope, element){
        var d3=require("D3")
         requireNode ('fs').readdir('D:/', function (err, files) {
                if (err) {
                    document.write(err);
                } else {
              
                    for (var i = 0; i < files.length; ++i) {
                        var div = document.createElement('div');
                        div.className = "item";
                        var content = document.createTextNode(files[i]);
                        div.appendChild(content);
                        element[0].appendChild(div);
                        div.onclick = function () {
                        }
                    }
                }
            })

    }]

    return d3TestCtrl
})