文/玄魂
目錄
node-webkit教程(8)Platform Service之Clipboard
前言
8.1 Clipboard 操作
8.6 小結
幾個月前，要開發一個簡易的展示應用，要求支持離線播放（桌面應用）和在線播放（web應用）。
當時第一想到的是flex，同一套代碼（或者只需少量的更改）就可以同時運行在桌面和瀏覽器上。由於很多展現效果要全新開發，我想到了impress.js(https://github.com/bartaz/impress.js/)。如果選擇impress.js，就意味着要將html5作為桌面應用，當時想到要封裝webkit，但是本人對這方面也不是很熟悉，時間也很有限，就又沿着這個方向搜索，找到了node-webkit(https://github.com/rogerwang/node-webkit)。
node-webkit解決了我通過html和js來編寫桌面應用的難題。
至於node-webkit的定義，按照作者的說法：
“ 基於node.js和chromium的應用程序實時運行環境，可運行通過HTML(5)、CSS(3)、Javascript來編寫的本地應用程序。node.js和webkit的結合體，webkit提供DOM操作，node.js提供本地化操作；且將二者的context完全整合，可在HTML代碼中直接使用node.js的API。”
從本篇文章開始，為您介紹Platform Services些列的API，本系列由以下類別：
· App – 每個應用運行時全局api
· Clipboard – 剪貼板
· Tray – 狀態欄圖標，消息通知
· File dialogs-文件選擇對話框
· Shell – 桌面相關
· Handling files and arguments-處理文件和相關參數
Clipboard是對操作系統剪貼板的一個抽象，目前只支持獲取和設置純文本內容。
新建clip.html和package.json。
clip.html內容如下：
<html>
<head>
<title>appDemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<h1>app api 測試</h1>
<button onclick="getText()">獲取內容</button>
<button onclick="setText()">寫入內容</button>
<button onclick="clearText()">清除內容</button>
<script>
var gui = require('nw.gui');
// We can not create a clipboard, we have to receive the system clipboard
var clipboard = gui.Clipboard.get();
function apendText(text) {
var element = document.createElement('div');
element.appendChild(document.createTextNode(text));
document.body.appendChild(element);
}
function clearText()
{
// And clear it!
clipboard.clear();
apendText('剪貼板內容已清除');
}
function setText()
{
// Or write something
clipboard.set('這是node-webkit向剪貼板寫的內容', 'text');
}
function getText()
{
// Read from clipboard
var text = clipboard.get('text');
apendText(text);
}
</script>
</body>
</html>
package.json內容如下：
{
"name": "clip-demo",
"main": "clip.html",
"nodejs":true,
"window": {
"title": "clipDemo",
"toolbar": true,
"width": 800,
"height": 600,
"resizable":true,
"show_in_taskbar":true,
"frame":true,
"kiosk":false,
"icon": "2655716405282662783.png"
},
"webkit":{
"plugin":true
}
}
示例代碼准備完畢之后，我們打開程序，如圖：
程序有三個按鈕，分別是獲取、寫入和清除剪貼板內容。在操作剪貼板之前，我們需要先獲取clipboard對象：
var clipboard = gui.Clipboard.get();
現在我們先單擊第二個按鈕，向剪貼板寫入內容，代碼如下：
function setText()
{
// Or write something
clipboard.set('這是node-webkit向剪貼板寫的內容', 'text');
}
clipboard.set方法接收兩個參數，第一個參數是要寫入的內容，第二個參數是內容類型，目前只支持text類型。
是否寫入成功了呢？我們再單擊第一個按鈕，事件處理代碼如下：
function getText()
{
// Read from clipboard
var text = clipboard.get('text');
apendText(text);
}
第一個按鈕通過clipboard.get方法獲取剪貼板內容然后輸出，get方法接收一個參數，指明內容類型，目前只支持text類型。寫入和獲取都成功，會出現如下界面：
下面我們再看清楚內容的按鈕做了什么：
function clearText()
{
// And clear it!
clipboard.clear();
apendText('剪貼板內容已清除');
}
調用了clipboard.clear()方法，清除剪貼板，想要驗證是否清除成功，只需再次點擊獲取內容按鈕，看是否有內容輸出即可。
本文內容主要參考node-webkit的官方英文文檔，做了適當的調整（https://github.com/rogerwang/node-webkit/wiki/Clipboard）。
下一篇文章，介紹Tray。
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）
更多相關內容，歡迎訪問玄魂的博客(更多node-webkit相關內容 http://www.xuanhun521.com/Blog/Tag/node-webkit)
ps：nw.js，electron交流群 313717550