Electron学习笔记（二）：UI开发

发表于

UI开发由于使用的是HTML、CSS、Javascript，所以以前怎么来，现在还是怎么来，你甚至可以使用以前用的习惯的各种框架：Angular、Bootstrap、JQuery等等

你可以使用Bower来管理依赖，输入以下命令来安装Bower：

1
$ npm install -g bower

然后就可以通过Bower来管理各种依赖库了：

1
$ bower install bootstrap

通过这个命令，依赖库将被安装到bower_components当中，你可以在你的HTML页面里边直接引用

搭建UI实例

安装前文所说，准备一个项目（package.json，main.js，index.html）
main.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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)

安装JQuery：

1
$ npm install --save jquery

index.html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Hello Electron!</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，拷入以下代码：

1
2
3
4
5
6
7
let $ = require('jquery')  // 引用jQuery并赋值给$符号
let count = 0
$('#click-counter').text(count.toString())
$('#countbtn').on('click', () => {
   count ++ 
   $('#click-counter').text(count)
})

输入命令，运行App：

1
$ electron ./main.js

运行结果如图：