Electron教程翻译5：创建UI

在Electron应用中，我们使用HTML、CSS和JS来创建用户界面（User Interface, UI）,因此前端开发的一切技术在这里都可以用上，例如我们可以使用Angular、Backbone、React、Bootstrap和Foundation等来构建应用。

你可以使用Bower来管理这些前端开发依赖库，可以用以下命令来安装bower：

$ npm install -g bower

现在就可以用它来安装前端开发需要的JS和CSS框架、库和插件了，例如，如果要安装最新版的bootstrap，只需要用以下命令就可以了：

$ bower install bootstrap

这一命令会在bower_components中下载bootstrap，然后你就可以在HTML文件中来引用这个库。现在我们来创建一个使用这些库的简单页面，这里，我们先使用npm来安装jquery库：

$ npm install --save jquery

接下去，我们需要在view.js文件中用required来标记引用，我们已经有了一个形如下文的main.js文件：

const {app, BrowserWindow} = require('electron')const url = require('url')const path = require('path')let winfunction 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，输入以下代码：

   
      
      
      
   
   
   
      

         
This page is using Bootstrap and jQuery!
         

         Click here
         
      
   

创建一个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

上述命令执行后，应该会产生以下的输出界面：

运行效果

所以你可以像创建网站一样来创建桌面应用，如果你不想让用户界面限制在一个固定的尺寸里，你可以使用响应式设计（responsive design），这样用户使用应用时会更加灵活。

原文：https://www.tutorialspoint.com/electron/electron_building_uis.htm
始发： http://gzs.ilester.net