node-webkit 使用requirejs 小结

时间:2021-09-30 05:28:35

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