NW.js基础

最新推荐文章于 2024-04-17 09:50:10 发布

我的镜子

最新推荐文章于 2024-04-17 09:50:10 发布

阅读量241

点赞数 1

分类专栏：毕业前的笔记

本文链接：https://blog.csdn.net/dongye2016/article/details/79196061

版权

毕业前的笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

NW.js基础

What can NW.js do?

NW.js is based on Chromium and Node.js. It lets you call Node.js code and modules directly from browser and also use Web technologies in your app. Further, you can easily package a web application to a native application.

Hello World

Step 1.Create package.json:

{
  "name": "helloworld",   //unique name used among NW.js apps
  "main": "index.html"  //the first page opened by the NW.js if referenced to an HTML file
}

Use JS File as Main : the JS file will be loaded in the background page on start and no window is opened by default. Usually you can do some initialization and open the window manually later.

Step 2.Create index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

This is the normal HTML file. You can use any web technologies supported by latest browsers, like CSS.

Step 3.Run your app:

cd /path/to/your/app
/path/to/nw .

Using NW.js APIS

All NW.js APIs are loaded in nw object globally and can be used directly in JavaScript files.

<!DOCTYPE html>
<html>
<head>
  <title>Context Menu</title>
</head>
<body style="width: 100%; height: 100%;">

<p>'Right click' to show context menu.</p>

<script>
// Create an context menu, Add some items with label
var menu = new nw.Menu();
menu.append(new nw.MenuItem({
  label: 'Item A',
  click: function(){
    alert('You have clicked at "Item A"');
  }
}));
menu.append(new nw.MenuItem({ label: 'Item B' }));
menu.append(new nw.MenuItem({ type: 'separator' }));
menu.append(new nw.MenuItem({ label: 'Item C' }));

// Hooks the "contextmenu" event
document.body.addEventListener('contextmenu', function(ev) {
  // Prevent showing default context menu
  ev.preventDefault();
  // Popup the native context menu at place you click
  menu.popup(ev.x, ev.y);

  return false;
}, false);

</script>  
</body>
</html>

Using Node.js API

You can call node.js and modules directly from the DOM. So it enabless possibilities for writing apps with nw.js.
eg:

<!DOCTYPE html>
<html>
<head>
  <title>My OS Platform</title>
</head>
<body>
<script>
// get the system platform using node.js
var os = require('os');
document.write('You are running on ', os.platform());
</script>
</body>
</html>

我的镜子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
NW.js基础

NW.js基础What can NW.js do?NW.js is based on Chromium and Node.js. It lets you call Node.js code and modules directly from browser and also use Web technologies in your app. Further, you can eas
复制链接

扫一扫