V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3031 天前的主题，其中的信息可能已经有所发展或是发生改变。

原文：

http://mp.weixin.qq.com/s?__biz=MzA4MTM5ODM3MA==&mid=2649868233&idx=1&sn=14886c4697b926a57b2811b51c86da0a#rd

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>
    <button type="button" class="btn btn-primary">Primary</button>
  </div>

再运行：

npm start

得到如下结果：

这里我们看到了 bootstrap 的按钮，表示我们的桌面版的 bootstrap 已经调用成功了!!!

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

是不是很简单呢？
赶紧试一下吧，也许下一个 google 就属于你的了。

欢迎微信公共号:frontend-guru 了解更多的信息，或者扫描二维码：

74 条回复 • 2016-09-26 15:43:07 +08:00

Vanilla

2016-07-31 23:09:54 +08:00

这不主要说的是 Electron 么，和 Bootstrap 有很大关系吗

calidion

2016-07-31 23:18:59 +08:00

@Vanilla

两个都是主要的。
大多数人都接触并熟悉 Bootstrap 。
如果使用 Electron ，可以优先考虑基于 Bootstrap 创作桌面。
同时 Bootstrap 作为 UI 框架也是很成熟的，个人比较推荐。

SourceMan

2016-07-31 23:19:43 +08:00 via iPhone

@Vanilla 主要是说公众号

DoraJDJ

2016-07-31 23:22:38 +08:00 via Android

@Vanilla 一看到开始的 electron 马上就知道结局了，直接飞奔评论。

calidion

2016-07-31 23:24:38 +08:00

@DoraJDJ 科普:)
@SourceMan 都重要，都重要:)

menc

2016-07-31 23:25:22 +08:00

确实，你这样写， electron 很不开心

zhujinliang

2016-08-01 00:09:34 +08:00 via iPhone

利用 leftpad 也可以开发桌面了

Perry

2016-08-01 00:12:05 +08:00

真的不算桌面应用，还是在浏览器里面啊

WittBulter

2016-08-01 00:14:31 +08:00

吃相太难看 block

viko16

2016-08-01 00:44:31 +08:00 via Android

倒是开发个“桌面”来看看哦…

superalsrk

2016-08-01 00:59:53 +08:00

歧义太大了

calidion

2016-08-01 01:02:12 +08:00

@superalsrk

标题没起好。呵呵。

Ahri

2016-08-01 05:34:10 +08:00

“大多数人都接触并熟悉 Bootstrap 。”是统计过还是看看周围小圈子还是拍脑袋？

calidion

2016-08-01 05:46:03 +08:00

@Ahri

google trend 会用吗？
打开链接看看吧。

https://www.google.com/trends/explore#q=bootstrap%2C%20atom%20shell%2C%20github%20atom%2C%20electron&cmpt=q&tz=Etc%2FGMT-8

Ahri

2016-08-01 06:12:34 +08:00

楼主 Google Trends 比较的关键词是：

bootstrap
atom shell
github atom
electron

高！实在是高！

calidion

2016-08-01 07:02:55 +08:00

@Ahri

应该用什么呢？求高人提点。

mzsongyan

2016-08-01 07:03:26 +08:00 via Android

图片呢，还有最后的二维码呢，不专业啊

calidion

2016-08-01 07:05:31 +08:00

@mzsongyan

还不会弄图片，原文上有图片。

Symars

2016-08-01 07:49:27 +08:00 via iPhone

这个还是要浏览器支撑还不是纯粹的桌面应用

murmur

2016-08-01 07:49:48 +08:00

electron 这个打包这么大还是.net 吧

warDoggie

2016-08-01 08:21:19 +08:00

即不桌面，也不应用。这样写 bootstrap 很不开心＋ 1 😔

iTakeo

2016-08-01 08:32:52 +08:00 via iPhone

这跟 bootstrap 关系真不大

Vanilla

2016-08-01 09:18:16 +08:00

@calidion Google trend 说明不了什么

https://www.google.com/trends/explore#q=bootstrap%2C%20semantic%20ui%2C%20foundation%2C%20Skeleton&cmpt=q&tz=Etc%2FGMT-8

像 foundation 这种名字框架还不占够了便宜

bower 也是一个已经死了的项目，还在这里推荐看不到意义

对了， Bootstrap 不是给后端用的么？：）

Shura

2016-08-01 09:21:17 +08:00 via Android

有啥用呢？能调用 win32 API 吗？

qiutc

2016-08-01 09:51:11 +08:00

秀智商？

Tankpt

2016-08-01 09:56:00 +08:00

跟 bootstrap 。。。没关系吧。。

xcodebuild

2016-08-01 09:56:54 +08:00

和 bootstrap 没啥关系。。和桌面也没啥关系。。

amlun

2016-08-01 09:59:55 +08:00

捉急～

aitaii

2016-08-01 10:01:30 +08:00

感觉说了很多，很想看图片啊，图片在哪。。。

whahuzhihao

2016-08-01 10:42:36 +08:00

@codefalling 强行没关系

huntererer

2016-08-01 10:45:08 +08:00

标题党。。。

xcodebuild

2016-08-01 10:50:51 +08:00

@whahuzhihao 有啥关系么。。。完全是 electron 的事情，桌面应用就桌面应用，，写桌面是个什么鬼。。

Navee

2016-08-01 12:41:35 +08:00

有些人总想用标题搞点大新闻

zhangdawei

2016-08-01 12:43:36 +08:00

标题党

learnshare

2016-08-01 12:50:15 +08:00

跟 Bootstrap 没有什么关系

coderluan

2016-08-01 14:27:52 +08:00

实话实说感觉很麻烦，和 nw.js 相比有什么优势？

calidion

2016-08-01 14:34:34 +08:00

其实文章本来就是写给会使用 Bootstrap 的开发者的。
跟 Bootstrap 怎么会没有关系呢？
为什么必须说是 Electron?
下次写的是 Bootstrap 运行在 NW 上呢？
这不就跟 Electron 没有任何关系了吗？

所以上面的很多喷子们还是没有搞清楚问题的实质。

标题的问题在于少打了应用两字。

jarlyyn

2016-08-01 14:44:07 +08:00

居然还说别人喷子。

这年头真是什么人都想学推广了啊。

calidion

2016-08-01 14:55:21 +08:00

这年头，猴子也会打字了:)

daysv

2016-08-01 15:10:35 +08:00

我觉得这主题不太对.
另外 electron 不支持 XP 对产品来说是大忌.
所以我用 nw

duian

2016-08-01 15:32:31 +08:00

你这么标题党，你妈妈知道么

zhqy

2016-08-01 16:07:46 +08:00

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

噗，这段我都笑出声了。

calidion

2016-08-01 16:26:12 +08:00

@zhqy

你笑了，我也笑了。笑点似乎不同？

aristotll

2016-08-01 19:30:10 +08:00

r#43 @calidion 没看出笑点, 求指教一二

zapper

2016-08-01 19:49:24 +08:00

大约前端的确快统一世界了

calidion

2016-08-01 20:04:56 +08:00

@aristotll

如果你不跟他一样能找到笑点，那你肯定也不理解我的笑点了。

@zapper

前后端融合很厉害。也就是 Web 技术已经深入到田间地头了。

dphdjy

2016-08-01 20:13:23 +08:00 via Android

最近 v2 冷饭好多。。。

exoticknight

2016-08-01 20:26:27 +08:00

我穿越了？

Ahri

2016-08-01 22:11:07 +08:00

其实文章本来就是写给会使用 HTML 的开发者的。
跟 HTML 怎么会没有关系呢？
为什么必须说是 Bootstrap?
下次写的是 Semantic UI 呢？
这不就跟 Bootstrap 没有任何关系了吗？

所以上面的很多喷子们还是没有搞清楚问题的实质。

yoa1q7y

2016-08-01 22:15:03 +08:00

这帖子就是来找骂的。。

calidion

2016-08-01 22:52:56 +08:00

@yoa1q7y

至少没看到有人可以象样的骂起来。
如果真有什么的错误，我想这些喷子们也发现不了。

@viko16

开发桌面又有什么不能？
开发一个类似于 GNOME 的桌面也未偿不行。
并没有什么不行的，你不行不代表别人也不行。
只有什么都不懂的人才会发现不了可能性。

就跟几年前一群喷子认为 js 无法开发后台一样。
喷也麻烦喷的有水平点。谢谢合作。

Kilerd

2016-08-01 22:56:14 +08:00

除了呵呵，还能 Block

讲道理，几个概念都没搞清楚，就学人写这种文章？？？

严重标题党。 “利用 CSS 也可以开发桌面应用了！！！”

微信公众号宣传贴！！！

calidion

2016-08-01 23:03:08 +08:00

@Kilerd

关键是你有没有道理呢？
bootstrap 包括 HTML+CSS+JS 。
所以能基于 Bootstrap 的地方一定可以基于 HTML5+CSS+JS 。
所以相当于利用 HTML+CSS+JS 开发桌面应用。
所以有什么问题吗？

你的 CSS 呢？

呵呵。你的道理从那里来？

希望你还是屏掉我吧。

我伺候不了你这样的。

viko16

2016-08-01 23:22:35 +08:00 via Android

@calidion

别扯开话题，倒是用 Bootstrap 开发个“类似于 GNOME 的桌面”来看看哦…

Ahri

2016-08-01 23:24:17 +08:00

散了散了。 The OP is completely clueless.

calidion

2016-08-01 23:34:20 +08:00

@viko16

果然喷子理解不了我说的话的意思:)

calidion

2016-08-01 23:35:06 +08:00

@viko16

看来 Android 桌面也没有玩过啊。

fliu2476

2016-08-02 00:35:25 +08:00 via iPhone

发图 markdown

calidion

2016-08-02 01:04:42 +08:00

有意思。这帖子被屏了。

williamx

2016-08-02 06:54:11 +08:00

我觉得不错啊，正想涉足这一块。
不用理他们！

hrong

2016-08-02 07:49:32 +08:00 via Android

标题，标题，还是标题！重要的事说三遍

techme

2016-08-02 08:54:47 +08:00

致

ljcarsenal

2016-08-02 10:16:36 +08:00

怎么知道帖子被屏蔽了么有

ayaseangle

2016-08-02 10:34:21 +08:00

傻逼标题党。。

msg7086

2016-08-02 11:23:13 +08:00

本站都是喷子，楼主你来本站发帖你是抖 M 吧。
赶紧右上角点击登出按钮，并将本站移出收藏夹，从此远离我们这样的喷子。

多谢。

whahuzhihao

2016-08-02 11:35:36 +08:00

喷子实在太多，要说标题有问题，也就是没区别桌面和桌面应用。
在 node 区看到这个标题第一眼就知道是 electron 或者 nw ，很多人反正进来先喷一遍。

calidion

2016-08-02 16:38:54 +08:00

@ljcarsenal

对比啊。你没登录，就打不开了。
而别的帖子是可以打开的。

calidion

2016-08-02 16:47:27 +08:00

@whahuzhihao

其实开发桌面也是可以的。
只是 BootStrap 只是负责 UI 。
刚好给我提了个醒，我以后可以直接使用 HTML 给自己开发一个桌面。

VmuTargh

2016-08-02 22:19:40 +08:00

@calidion electron 写 UI ？您就自己卡去吧。举一个例子： Vivaldi 的 UI 全部用 node.js 建构，跑在一个 blink 的 frame 里面，结果占用比 chrome 还恐怖，甚至出现过调试浏览器 UI 本身的恶俗事件。

VmuTargh

2016-08-02 22:21:39 +08:00

@VmuTargh 纠正一下 “ electron 写 UI ？”——> “ electron 写 DE?"

VmuTargh

2016-08-02 22:22:36 +08:00

@Kilerd CSS 写个主题还是可以的（逃

lq007

2016-08-03 08:46:18 +08:00

照楼主的逻辑其实可以说成 jquery 也可以开发桌面、 seajs 也可以开发桌面等等，楼主阿， bootstrap 只是一个 UI 框架，在你说的技术栈里 html-bootstrap-electron electon 是关键，什么叫关键？去掉 bootstrap ，这个桌面应用还是能出来，你去掉 electron ，就只能是个网站了。所以你的标题是很不妥滴。

errorlife

2016-09-26 15:42:32 +08:00

你好。图片都挂了

errorlife

2016-09-26 15:43:07 +08:00

@errorlife 所以我去微信公众号看，不用在意。。

利用 Bootstrap 也可以开发桌面了

安装 Electron

初试牛刀： Hello Electron!

官方做法

添加 bootstrap

安装 bootstrap

引入 bootstrap

添加新代码