V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
calidion
V2EX  ›  Node.js

利用 Bootstrap 也可以开发桌面了

  •  
  •   calidion · 2016-07-31 23:04:04 +08:00 · 5241 次点击
    这是一个创建于 3023 天前的主题,其中的信息可能已经有所发展或是发生改变。

    原文:

    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
        1
    Vanilla  
       2016-07-31 23:09:54 +08:00   ❤️ 5
    这不主要说的是 Electron 么,和 Bootstrap 有很大关系吗
    calidion
        2
    calidion  
    OP
       2016-07-31 23:18:59 +08:00
    @Vanilla

    两个都是主要的。
    大多数人都接触并熟悉 Bootstrap 。
    如果使用 Electron ,可以优先考虑基于 Bootstrap 创作桌面。
    同时 Bootstrap 作为 UI 框架也是很成熟的,个人比较推荐。
    SourceMan
        3
    SourceMan  
       2016-07-31 23:19:43 +08:00 via iPhone
    @Vanilla 主要是说公众号
    DoraJDJ
        4
    DoraJDJ  
       2016-07-31 23:22:38 +08:00 via Android
    @Vanilla 一看到开始的 electron 马上就知道结局了,直接飞奔评论。
    calidion
        5
    calidion  
    OP
       2016-07-31 23:24:38 +08:00
    @DoraJDJ 科普:)
    @SourceMan 都重要,都重要:)
    menc
        6
    menc  
       2016-07-31 23:25:22 +08:00   ❤️ 1
    确实,你这样写, electron 很不开心
    zhujinliang
        7
    zhujinliang  
       2016-08-01 00:09:34 +08:00 via iPhone   ❤️ 4
    利用 leftpad 也可以开发桌面了
    Perry
        8
    Perry  
       2016-08-01 00:12:05 +08:00
    真的不算桌面应用,还是在浏览器里面啊
    WittBulter
        9
    WittBulter  
       2016-08-01 00:14:31 +08:00
    吃相太难看 block
    viko16
        10
    viko16  
       2016-08-01 00:44:31 +08:00 via Android
    倒是开发个“桌面”来看看哦…
    superalsrk
        11
    superalsrk  
       2016-08-01 00:59:53 +08:00
    歧义太大了
    calidion
        12
    calidion  
    OP
       2016-08-01 01:02:12 +08:00
    @superalsrk

    标题没起好。呵呵。
    Ahri
        13
    Ahri  
       2016-08-01 05:34:10 +08:00
    “大多数人都接触并熟悉 Bootstrap 。”是统计过还是看看周围小圈子还是拍脑袋?
    calidion
        14
    calidion  
    OP
       2016-08-01 05:46:03 +08:00
    Ahri
        15
    Ahri  
       2016-08-01 06:12:34 +08:00
    楼主 Google Trends 比较的关键词是:

    bootstrap
    atom shell
    github atom
    electron

    高!实在是高!
    calidion
        16
    calidion  
    OP
       2016-08-01 07:02:55 +08:00
    @Ahri

    应该用什么呢?求高人提点。
    mzsongyan
        17
    mzsongyan  
       2016-08-01 07:03:26 +08:00 via Android
    图片呢,还有最后的二维码呢,不专业啊
    calidion
        18
    calidion  
    OP
       2016-08-01 07:05:31 +08:00
    @mzsongyan

    还不会弄图片,原文上有图片。
    Symars
        19
    Symars  
       2016-08-01 07:49:27 +08:00 via iPhone
    这个还是要浏览器支撑 还不是纯粹的桌面应用
    murmur
        20
    murmur  
       2016-08-01 07:49:48 +08:00
    electron 这个打包这么大 还是.net
    warDoggie
        21
    warDoggie  
       2016-08-01 08:21:19 +08:00
    即不桌面,也不应用。这样写 bootstrap 很不开心+ 1 😔
    iTakeo
        22
    iTakeo  
       2016-08-01 08:32:52 +08:00 via iPhone
    这跟 bootstrap 关系真不大
    Vanilla
        23
    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
        24
    Shura  
       2016-08-01 09:21:17 +08:00 via Android
    有啥用呢?能调用 win32 API 吗?
    qiutc
        25
    qiutc  
       2016-08-01 09:51:11 +08:00
    秀智商?
    Tankpt
        26
    Tankpt  
       2016-08-01 09:56:00 +08:00
    跟 bootstrap 。。。没关系吧。。
    xcodebuild
        27
    xcodebuild  
       2016-08-01 09:56:54 +08:00
    和 bootstrap 没啥关系。。和桌面也没啥关系。。
    amlun
        28
    amlun  
       2016-08-01 09:59:55 +08:00
    捉急~
    aitaii
        29
    aitaii  
       2016-08-01 10:01:30 +08:00
    感觉说了很多,很想看图片啊,图片在哪。。。
    whahuzhihao
        30
    whahuzhihao  
       2016-08-01 10:42:36 +08:00
    @codefalling 强行没关系
    huntererer
        31
    huntererer  
       2016-08-01 10:45:08 +08:00
    标题党。。。
    xcodebuild
        32
    xcodebuild  
       2016-08-01 10:50:51 +08:00
    @whahuzhihao 有啥关系么。。。完全是 electron 的事情,桌面应用就桌面应用,,写桌面是个什么鬼。。
    Navee
        33
    Navee  
       2016-08-01 12:41:35 +08:00
    有些人总想用标题搞点大新闻
    zhangdawei
        34
    zhangdawei  
       2016-08-01 12:43:36 +08:00
    标题党
    learnshare
        35
    learnshare  
       2016-08-01 12:50:15 +08:00
    跟 Bootstrap 没有什么关系
    coderluan
        36
    coderluan  
       2016-08-01 14:27:52 +08:00
    实话实说感觉很麻烦,和 nw.js 相比有什么优势?
    calidion
        37
    calidion  
    OP
       2016-08-01 14:34:34 +08:00
    其实文章本来就是写给会使用 Bootstrap 的开发者的。
    跟 Bootstrap 怎么会没有关系呢?
    为什么必须说是 Electron?
    下次写的是 Bootstrap 运行在 NW 上呢?
    这不就跟 Electron 没有任何关系了吗?

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

    标题的问题在于少打了应用两字。
    jarlyyn
        38
    jarlyyn  
       2016-08-01 14:44:07 +08:00
    居然还说别人喷子。

    这年头真是什么人都想学推广了啊。
    calidion
        39
    calidion  
    OP
       2016-08-01 14:55:21 +08:00
    这年头,猴子也会打字了:)
    daysv
        40
    daysv  
       2016-08-01 15:10:35 +08:00
    我觉得这主题不太对.
    另外 electron 不支持 XP 对产品来说是大忌.
    所以我用 nw
    duian
        41
    duian  
       2016-08-01 15:32:31 +08:00
    你这么标题党, 你妈妈知道么
    zhqy
        42
    zhqy  
       2016-08-01 16:07:46 +08:00
    bootstrap 其实是前端的 UI 框架,但是 electron 已经将前后端模糊了。 所以在 electron 里,前端与后端是可以共存的。 即 nodejs 后端与浏览器前端已经融合在一起了。 所有的 js 代码即可以运行于浏览器,也同样可以运行于 nodejs 。

    噗,这段我都笑出声了。
    calidion
        43
    calidion  
    OP
       2016-08-01 16:26:12 +08:00
    @zhqy

    你笑了,我也笑了。笑点似乎不同?
    aristotll
        44
    aristotll  
       2016-08-01 19:30:10 +08:00
    r#43 @calidion 没看出笑点, 求指教一二
    zapper
        45
    zapper  
       2016-08-01 19:49:24 +08:00
    大约前端的确快统一世界了
    calidion
        46
    calidion  
    OP
       2016-08-01 20:04:56 +08:00
    @aristotll

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


    @zapper

    前后端融合很厉害。也就是 Web 技术已经深入到田间地头了。
    dphdjy
        47
    dphdjy  
       2016-08-01 20:13:23 +08:00 via Android
    最近 v2 冷饭好多。。。
    exoticknight
        48
    exoticknight  
       2016-08-01 20:26:27 +08:00
    我穿越了?
    Ahri
        49
    Ahri  
       2016-08-01 22:11:07 +08:00
    其实文章本来就是写给会使用 HTML 的开发者的。
    跟 HTML 怎么会没有关系呢?
    为什么必须说是 Bootstrap?
    下次写的是 Semantic UI 呢?
    这不就跟 Bootstrap 没有任何关系了吗?

    所以上面的很多喷子们还是没有搞清楚问题的实质。
    yoa1q7y
        50
    yoa1q7y  
       2016-08-01 22:15:03 +08:00
    这帖子就是来找骂的。。
    calidion
        51
    calidion  
    OP
       2016-08-01 22:52:56 +08:00
    @yoa1q7y

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

    @viko16

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

    就跟几年前一群喷子认为 js 无法开发后台一样。
    喷也麻烦喷的有水平点。谢谢合作。
    Kilerd
        52
    Kilerd  
       2016-08-01 22:56:14 +08:00
    除了呵呵,还能 Block

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

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

    微信公众号宣传贴!!!
    calidion
        53
    calidion  
    OP
       2016-08-01 23:03:08 +08:00
    @Kilerd

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

    你的 CSS 呢?

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

    希望你还是屏掉我吧。

    我伺候不了你这样的。
    viko16
        54
    viko16  
       2016-08-01 23:22:35 +08:00 via Android
    @calidion

    别扯开话题,倒是用 Bootstrap 开发个“类似于 GNOME 的桌面”来看看哦…
    Ahri
        55
    Ahri  
       2016-08-01 23:24:17 +08:00
    散了散了。 The OP is completely clueless.
    calidion
        56
    calidion  
    OP
       2016-08-01 23:34:20 +08:00
    @viko16

    果然喷子理解不了我说的话的意思:)
    calidion
        57
    calidion  
    OP
       2016-08-01 23:35:06 +08:00
    @viko16

    看来 Android 桌面也没有玩过啊。
    fliu2476
        58
    fliu2476  
       2016-08-02 00:35:25 +08:00 via iPhone
    发图 markdown
    calidion
        59
    calidion  
    OP
       2016-08-02 01:04:42 +08:00
    有意思。这帖子被屏了。
    williamx
        60
    williamx  
       2016-08-02 06:54:11 +08:00
    我觉得不错啊,正想涉足这一块。
    不用理他们!
    hrong
        61
    hrong  
       2016-08-02 07:49:32 +08:00 via Android
    标题,标题,还是标题!重要的事说三遍
    techme
        62
    techme  
       2016-08-02 08:54:47 +08:00
    ljcarsenal
        63
    ljcarsenal  
       2016-08-02 10:16:36 +08:00
    怎么知道帖子被屏蔽了么有
    ayaseangle
        64
    ayaseangle  
       2016-08-02 10:34:21 +08:00
    傻逼标题党。。
    msg7086
        65
    msg7086  
       2016-08-02 11:23:13 +08:00
    本站都是喷子,楼主你来本站发帖你是抖 M 吧。
    赶紧右上角点击登出按钮,并将本站移出收藏夹,从此远离我们这样的喷子。

    多谢。
    whahuzhihao
        66
    whahuzhihao  
       2016-08-02 11:35:36 +08:00   ❤️ 1
    喷子实在太多,要说标题有问题,也就是没区别桌面和桌面应用。
    在 node 区看到这个标题第一眼就知道是 electron 或者 nw ,很多人反正进来先喷一遍。
    calidion
        67
    calidion  
    OP
       2016-08-02 16:38:54 +08:00
    @ljcarsenal

    对比啊。你没登录,就打不开了。
    而别的帖子是可以打开的。
    calidion
        68
    calidion  
    OP
       2016-08-02 16:47:27 +08:00
    @whahuzhihao

    其实开发桌面也是可以的。
    只是 BootStrap 只是负责 UI 。
    刚好给我提了个醒,我以后可以直接使用 HTML 给自己开发一个桌面。
    VmuTargh
        69
    VmuTargh  
       2016-08-02 22:19:40 +08:00
    @calidion electron 写 UI ?您就自己卡去吧。举一个例子: Vivaldi 的 UI 全部用 node.js 建构,跑在一个 blink 的 frame 里面,结果占用比 chrome 还恐怖,甚至出现过调试浏览器 UI 本身的恶俗事件。
    VmuTargh
        70
    VmuTargh  
       2016-08-02 22:21:39 +08:00
    @VmuTargh 纠正一下 “ electron 写 UI ?”——> “ electron 写 DE?"
    VmuTargh
        71
    VmuTargh  
       2016-08-02 22:22:36 +08:00
    @Kilerd CSS 写个主题还是可以的(逃
    lq007
        72
    lq007  
       2016-08-03 08:46:18 +08:00
    照楼主的逻辑其实可以说成 jquery 也可以开发桌面、 seajs 也可以开发桌面等等,楼主阿, bootstrap 只是一个 UI 框架,在你说的技术栈里 html-bootstrap-electron electon 是关键,什么叫关键?去掉 bootstrap ,这个桌面应用还是能出来,你去掉 electron ,就只能是个网站了。所以你的标题是很不妥滴。
    errorlife
        73
    errorlife  
       2016-09-26 15:42:32 +08:00
    你好。图片都挂了
    errorlife
        74
    errorlife  
       2016-09-26 15:43:07 +08:00
    @errorlife 所以我去微信公众号看,不用在意。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2603 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 10:34 · PVG 18:34 · LAX 02:34 · JFK 05:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.