使用Bootstrap、Electron和JavaScript开发桌面应用-原创手记-慕课网

HTML一直是桌面软件的重点，各种桌面软件或者多或少都会嵌入一些HTML的代码。而自从在了Nodejs后，使用HTML制作桌面就成为了可能。

这要感谢node-webkit引入了对桌面的支持，然后electron推动了这个趋势。

由于node-webkit的支持力度似乎不够大，而electron已经有相应的比较成熟的产品Atom/VSCode，所以我倾向了electron.

今天我要介绍如何使用electron与bootsrap做一个桌面的应用。

安装Electron

Electron的安装是很方便的

npm install -g electron-prebuilt

你需要添加一个环境变量，执行命令变成是：

ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install -g electron-prebuilt

当你安装完成后，输入命令：

electron --help

得到

Electron 1.3.1 - Build cross platform desktop apps with JavaScript, HTML, and CSS

  Usage: electron [options] [path]

  A path to an Electron app may be specified. The path must be one of the following:

    - index.js file.
    - Folder containing a package.json file.
    - Folder containing an index.js file.
    - .html/.htm file.
    - http://, https://, or file:// URL.

  Options:
    -h, --help            Print this usage message.
    -i, --interactive     Open a REPL to the main process.
    -r, --require         Module to preload (option can be repeated)
    -v, --version         Print the version.
    --abi                 Print the application binary interface.

这表示我们的electron已经安装完成了。

初试牛刀：Hello Electron!

上面的提示告诉我们：

electron后面可以接.js也可以接.html

所以我们任意创建一个a.html页面：

<!DOCTYPE html>
<html>

<body>
    <h1>
        Hello Electron!
    </h1>
</body>

</html>

然后打入:

electron a.html

出现如下的图片：

这是最简单的办法，但是控制力量不够，也不方便加入初始化的代码，所以我们通常会偏向于选择使用.js文件作为入进点。

官方做法

官方提供了做为进入点的Demo:

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

这个时候就会出现一个窗口:

这样我们就完成了一个最基本的electron框架。

这个框架的目录结构是这样的：

.
├── index.html
├── LICENSE.md
├── main.js
├── package.json
├── README.md
└── renderer.js

添加bootstrap

前面我们已经将electron的示例项目安装完成，下面我们来安装bootstrap.

bootstrap其实是前端的UI框架，但是electron已经将前后端模糊了。
所以在electron里，前端与后端是可以共存的。
即nodejs后端与浏览器前端已经融合在一起了。
所有的js代码即可以运行于浏览器，也同样可以运行于nodejs。

安装bootstrap

但是我们在这里还是用到了前端的工具bower，执行

bower install bootstrap

下载bootstrap代码。

如果没有安装bower的话，执行一下：

npm install -g bower

先安装bower

执行成功后,就会多出来一个目录bower_components,结构如下：

bower_components/
├── bootstrap/
└── jquery/

这时表示我们的bootstrap下载成功。

引入bootstrap

现在我们就将bootstrap引入到我们的项目中来。

 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" crossorigin="anonymous">

注意href的路径，就是bower安装的包的目标目录。
由于我们暂时不需要动态功能，所以可以不添加bootstrap的js文件。

添加新代码

现在我们已经将bootstrap的CSS添加进来了，下面我们放上组件进行测试一下。

添加代码如下。

<div class="text-center">
    <button type="button" class="btn btn-default">Default</button>

    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">Primary</button>
  </div>

再运行

npm start

得到如下结果：

这里我们看到了bootstrap的按钮，

表示我们的桌面版的bootstrap已经调用成功了!!!

下面你就可以随意的添加各个Bootstrap组件来编写你的electron桌面应用了。

是不是很简单呢？

赶紧试一下吧，也许下一个google就属于你的了。