node-webkit 使用requirejs 小结

lobd9776 9年前

来自: http://www.cnblogs.com/breakdown/p/4290478.html


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;
配置文件中需要添加   "node-remote": "*.test.com",

在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  })