node-webkit教程(8)Platform Service之Clipboard

時間 2019-11-30

標籤 node webkit 教程 platform service clipboard 简体版

原文原文鏈接

node-webkit教程(8)Platform Service之Clipboard

文/玄魂html

目錄html5

node-webkit教程(8)Platform Service之Clipboard. 1node

前言... 1ios

8.1 Clipboard 操做... 2git

8.6 小結... 6github

前言

幾個月前，要開發一個簡易的展現應用，要求支持離線播放（桌面應用）和在線播放（web應用）。web

當時第一想到的是flex，同一套代碼（或者只需少許的更改）就能夠同時運行在桌面和瀏覽器上。因爲不少展示效果要全新開發，我想到了impress.js(https://github.com/bartaz/impress.js/)。若是選擇impress.js，就意味着要將html5做爲桌面應用，當時想到要封裝webkit，可是本人對這方面也不是很熟悉，時間也頗有限，就又沿着這個方向搜索，找到了node-webkit(https://github.com/rogerwang/node-webkit)。json

node-webkit解決了我經過html和js來編寫桌面應用的難題。api

至於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-處理文件和相關參數

8.1 Clipboard 操做

Clipboard是對操做系統剪貼板的一個抽象，目前只支持獲取和設置純文本內容。

新建clip.html和package.json。

clip.html內容以下：

<html>

<head>

<title>appDemo</title>

</head>

<body >

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()方法，清除剪貼板，想要驗證是否清除成功，只需再次點擊獲取內容按鈕，看是否有內容輸出便可。

8.6 小結

本文內容主要參考node-webkit的官方英文文檔，作了適當的調整（https://github.com/rogerwang/node-webkit/wiki/Clipboard）。

下一篇文章，介紹Tray。

鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）

ps：nw.js，electron交流羣 313717550

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。