node-webkit 使用requirejs 小结
来自: 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 })