Electron 教程：绑定UI控件
Electron应用程序的用户界面是用html语言、css和js构建的。因此，我们可以利用所有可用的工具进行前端开发。您可以使用诸如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> <!--引入bootstrap的css库--> <link rel = "stylesheet" href = "./bower_components/bootstrap/dist/css/bootstrap.min.css" /> </head> <body> <!--使用bootstrap的组件构建页面--> <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
上述命令将生成如下图所示的输出
你可以像构建网站一样构建自己的原生应用。如果你不希望用户被限制在一个确切的窗口大小，你可以利用响应设计，并允许用户以灵活的方式使用你的应用程序。