Electron開發實踐II
Electron開發實踐II
在上一篇博客中，我向大家介紹了Electron以及Electron開發環境的部署，在這篇博客中，我將向大家介紹簡單Electron應用的開發過程。
Electron程序的入口
程序入口往往是初學者在學習前的第一個疑問：這個程序是怎么跑起來的？由于Electron是Node的runtime，所以它的入口是在 package.json 中的 main 進行定義的。接觸過Node的讀者對此會非常熟悉，對于接觸過Chrome程序開發的讀者可以把 package.json 簡單理解成 manifest.json 。無論是 package.json 還是 manifest.json ，它們都是一個程序信息的描述文件，里面聲明了程序的名稱、簡介、版本等信息。
比如下面是一個簡單的例子：
{
"name": "My Electron App",
"version": "1.0.0",
"main": "app.js"
}上例中定義了程序的名稱為“My Electron App”，版本為“1.0.0”，入口腳本是“app.js”，這樣當用戶運行這個程序時， app.js 就會被執行。
一個簡單的Electron應用
接下來編寫一個非常簡單的程序，在 package.json 同目錄下新建一個 app.js 文件，并寫入以下內容：
var fs = require('fs');
fs.writeFileSync('message.txt',
'This is my first Electron app!',
'utf8');對于沒有接觸過Node的讀者可能對上面代碼中出現的 require 感到陌生，這里的 require 和C語言的 include 或Java中的 import 類似，通過 require ， app.js 將 fs 模塊引入進來，并在后面調用了它的 writeFileSync 方法。
fs 模塊是Node中提供操作文件功能的模塊， writeFileSync 是 fs 模塊提供同步寫入文件的方法，上面的代碼就是在當前目錄下，將“This is my first Electron app!”以 utf-8 編碼方式寫入 message.txt 文件中。運行結果如下：
怎么樣，是不是非常簡單！
我們需要一個界面
如果僅僅創建一個在后臺默默運行的應用，那么Electron的一半特性就被忽略了。既然Electron是一個桌面應用開發框架，那么就一定離不開界面。
Electron內置了WebKit渲染器，所以可以直接使用HTML編寫程序的界面。在上一篇博客中提到的例子是包含了一個界面，這個界面也是由 app.js 創建的。
對上例的 app.js 進行修改：
var app = require('app'),
BrowserWindow = require('browser-window');
app.on('ready', function() {
mainWindow = new BrowserWindow({
width: 400,
height: 300
});
mainWindow.loadURL('file://' + __dirname + '/app.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});新代碼中引入了 app 和 browser-window 兩個模塊，這兩個模塊都是Electron提供的。 app.on 方法在整個程序生命周期中進行事件監聽， ready 事件在程序初始化完成之后觸發。在上面的代碼中，程序準備就緒之后，創建了一個 BrowserWindow 實例 mainWindow ，這個實例就是打開的窗口。在創建 BrowserWindow 實例時定義了窗口的尺寸，隨后定義了窗口中需要加載的HTML文件位置。 __dirname 是Node中的一個常量，指向當前運行腳本所在的目錄，所以 app.html 和 app.js 處于同一目錄下。最后實例 mainWindow 通過監聽 closed 事件進行自我銷毀，即關閉窗口。
創建 app.html 寫入以下內容：
<!doctype html>
<html>
<head>
<title>My First Electron App</title>
<style type="text/css">
body {
margin: 0;
}
textarea {
width: 100%;
border: none;
background: #eee;
margin: 10px 0;
padding: 0;
outline: none;
}
</style>
</head>
<body>
<textarea rows="10"></textarea>
<button>Write</button>
</body>
</html>這是一個非常簡單的HTML文件，只包含一個文本框和一個按鈕， style 標簽中是對頁面上元素樣式的簡單描述。運行結果如下：
還是挺丑的對吧，畢竟只是個Demo嘛。
界面和邏輯的聯系
上面的程序僅僅提供了一個無用的界面，無論怎么點擊都不會有任何交互，所以需要把界面和程序功能聯系在一起。
創建 main.js 并在 app.js 中通過 script 標簽引入，將以下代碼寫入 main.js ：
var fs = require('fs'),
textarea = document.getElementsByTagName('textarea')[0],
button = document.getElementsByTagName('button')[0];
function writeFile() {
var text = textarea.value;
fs.writeFileSync('message.txt',
text, 'utf8');
}
button.onclick = writeFile;需要注意的一點是，在 app.html 中， main.js 要在頁面的最后引用，否則 main.js 中的 textarea 和 button 無法正確獲取的元素。
是不是很神奇，居然可以在網頁中調用Node模塊！這就是Electron的魅力所在。最后的運行結果如下：
S Posted at 2016-01-05
來自： http://sneezry.com/2016/01/05/electron-develop-practice-part2/