📜  电子-构建用户界面

📅  最后修改于: 2020-10-25 10:54:13             🧑  作者: Mango


Electron应用程序的用户界面是使用HTML,CSS和JS构建的。因此,我们也可以在此处利用所有可用的工具进行前端Web开发。您可以使用Angular,Backbone,React,Bootstrap和Foundation等工具来构建应用程序。

您可以使用Bower来管理这些前端依赖项。使用以下命令安装凉亭-

$ npm install -g bower

现在,您可以使用bower获得所有可用的JS和CSS框架,库,插件等。例如,要获取最新的稳定版引导程序,请输入以下命令-

$ 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文件,并在其中输入以下代码-


      Hello World!
      
   
   
   
      

This page is using Bootstrap and jQuery!

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

上面的命令将生成输出,如以下屏幕截图所示:

用户界面

您可以像构建网站一样构建本机应用程序。如果您不希望将用户限制在确切的窗口大小,则可以利用响应式设计,并允许用户以灵活的方式使用您的应用程序。