Electron - 構建使用者介面

Electron 應用的使用者介面是使用 HTML、CSS 和 JS 構建的。因此，我們也可以在這裡利用所有可用於前端 Web 開發的工具。你可以使用 Angular、Backbone、React、Bootstrap 和 Foundation 等工具構建應用。

你可以使用 Bower 來管理這些前端依賴項。使用以下命令安裝 Bower：

$ npm install -g bower

現在你可以使用 Bower 查詢所有可用的 JS 和 CSS 框架、庫和外掛等。例如，要獲取最新穩定版本的 Bootstrap，請輸入以下命令：

$ bower install bootstrap

這會在 bower_components 中下載 Bootstrap。現在你可以在自己的 HTML 中引用此庫。讓我們使用這些庫建立一個簡單的頁面。

現在讓我們使用 npm 命令安裝 jquery：

$ npm install --save jquery

此外，這將在我們的 view.js 檔案中是必需的。我們已將 main.js 設定如下：

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
}

app.on('ready', createWindow)

開啟你的 index.html 檔案並在其中輸入以下程式碼：

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Hello World!</title>
      <link rel = "stylesheet" 
         href = "./bower_components/bootstrap/dist/css/bootstrap.min.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>This page is using Bootstrap and jQuery!</h1>
         <h3 id = "click-counter"></h3>
         <button class = "btn btn-success" id = "countbtn">Click here</button>
         <script src = "./view.js" ></script>
      </div>
   </body>
</html>

建立 view.js 並在其中輸入點選計數器邏輯：

let $ = require('jquery')  // jQuery now loaded and assigned to $
let count = 0
$('#click-counter').text(count.toString())
$('#countbtn').on('click', () => {
   count ++ 
   $('#click-counter').text(count)
})

使用以下命令執行應用：

$ electron ./main.js

以上命令將生成如下螢幕截圖所示的輸出：

你可以像構建網站一樣構建你的原生應用。如果你不想讓使用者侷限於一個確切的視窗大小，你可以利用響應式設計，允許使用者靈活地使用你的應用。

列印頁面

上一個

下一個