OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

使用Bootstrap、Electron和JavaScript开发桌面应用


分享到
分类 技术前沿   关键字 JavaScript   发布 ourjs  1470116906054
注意 转载须保留原文链接,译文链接,作者译者等信息。  

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就属于你的了。

欢迎添加微信公共号:frontend-guru了解更多的信息。或者扫描下面的二维码。

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 44个 Javascript 变态题解析 (上\下)
  2. JavaScript中该如何安排后台任务
  3. 三星拟收购NodeJS主要赞助商Joyent
  4. Python 之父谈 Python 的未来
  5. JavaScript的 Event Loop 模型
  6. Redis和Memcached的区别-从源码解读Reids的实现原理
  7. 乌云和漏洞盒子停业整顿—可能与国内“白帽子”黑客圈高度关注的“袁炜事件”有关
  8. AirJD-简单好用的免费建站工具

 相关阅读 - 技术前沿
  1. 使用Bootstrap、Electron和JavaScript开发桌面应用
  2. Redis和Memcached的区别-从源码解读Reids的实现原理
  3. 三星拟收购NodeJS主要赞助商Joyent
  4. 快速激发灵感的7个安卓应用模板
  5. 天猫双11前端分享系列(四):大规模 Node.js 应用
  6. Mozilla Firefox将停止支持不安全的HTTPS
  7. 2015年度开发者调查:JS最流行;ObjC工资最高;最想学Android
  8. TypeScript新功能实例讲解:支持更多EcmaScript6特性
  9. NativeScript的工作原理:用JavaScript调用原生API实现跨平台
  10. 微软博客:Angular 2将基于TypeScript

 关键字 - JavaScript
  1. 如何用CSS将select/option文本居中或居右对齐
  2. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  3. JavaScript中怪异的地方
  4. 在JavaScript中创建命名空间的几种写法
  5. JavaScript中的继承,构造函数以及new关键字的作用
  6. 纽约时报使用Html5 WebRTC记录访问者IP地址
  7. 正则中test、exec、match的简单区别,以及括号的用法
  8. NativeScript的工作原理:用JavaScript调用原生API实现跨平台
  9. 2015年的JavaScript:Angular之类的框架将被库取代
  10. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号