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

自己是从事了五年的前端工程师,不少人私下问我,2019年前端该怎么学,方法有没有?

没错,年初我花了一个多月的时间整理出来的学习资料,希望能帮助你快速学习前端,拿高薪offer!

如果你依然在编程的世界里迷茫,不知道自己的未来规划,可以加入web前端学习交流群:731771211 里面可以与大神一起交流并走出迷茫。新手可进群免费领取学习资料,看看前辈们是如何在编程的世界里傲然前行!群里不停更新最新的教程和学习方法(进群送web前端系统学习路线,详细的前端项目实战教学视频),有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入

点击:加入

原文地址:http://blog.51cto.com/14197670/2352644

时间: 2024-10-30 00:14:25

使用Bootstrap、Electron和JavaScript开发桌面应用的相关文章

用JavaScript开发的桌面应用

electron是用JavaScript开发桌面应用的平台之一 http://electron.atom.io/apps/ 基于electron的著名项目有 https://github.com/Microsoft/vscode/ https://github.com/atom/atom 而且,它们是开源的! 基于electron的项目的优势: 跨平台 网页的开发模式

使用nwjs开发桌面应用之Hello,World!

今天发现原来JavaScript也可以用来开发桌面应用程序,顿时有一种很牛逼的感觉,于是马上就开始了Hello,World!,感受一下JavaScript的强大. 可以用来开发桌面应用的js框架有三种: 1.NW.js NW.js是Intel的工程师写的一个基于node.js和chromium的应用程序运行环境.项目地址是:https://github.com/rogerwang/node-webkit 2.Electron Electron是一款利用Web技术开发跨平台桌面应用的框架.项目地址

Electron - 创建跨平台的桌面客户的应用程序

Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromium 开源项目,并用于在 Atom 编辑器中.Electron 是开源的,由 GitHub 维护,有一个活跃的社区.最重要的是,Electron 应用服务构建和运行在 Mac,Windows 和 Linux. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个

HTML5开发桌面应用:选择node-webkit还是有道heX

近几年,移动应用和web2.0大行其道,相比之下.传统桌面应用程序开发显得相对冷清(包含该领域技术人才的后继力量),但在一些场景下,它依旧有其不可替代的优势. 将HTML5和Node.JS的技术优势.应用于桌面应用程序开发.使得工作变得简单而高效. 因此在AOL中搜索"html 开发桌面应用",结果发现了王文睿的node-webkit和有道的heX这两款技术.非常明显node-webkit是较hex之前开发的.那究竟选择那个好呢?以下简介一下这两款技术: node-webkit is

JavaScript开发工具大全

译者按: 最全的JavaScript开发工具列表,总有一款适合你! 原文: THE ULTIMATE LIST OF JAVASCRIPT TOOLS 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 简介 2017年1月,Stack Overflow年度开发者调研一共访问了64000个程序员,发现JavaScript已经连续5年成为最流行的编程语言. 这篇博客将介绍一些常用的JavaScript开发工具: 构建&自动化 IDE&

(转)heX——基于 HTML5 和 Node.JS 开发桌面应用

本文转载自:http://techblog.youdao.com/?p=685 简介:heX,一个允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁琐的UI和交互开发工作,使其变的简单而高效.特别适合重UI,重交互的桌面应用软件. 欢迎关注http://hex.youdao.com  或微博 @youdao_hex. 一.项目背景 二.用heX开发桌面应用的优势 三.如何用heX开始一个桌面应

Windows Store App JavaScript 开发:简单对象绑定

简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到HTML元素的属性.下面通过一个示例来演示如何使用HTML5和JavaScript开发一个实现简单对象绑定的Windows应用商店应用程序.在这个应用程序中将一个img控件与一个包含图片路径信息的对象相绑定,实现在img控件中显示图片. 在Visual Studio 2012中新建一个JavaScript的Windows应用商店的空白应用程序项目,将其命名为SimpleObjectBinding.接着添加项目中用到的图片文件,在项

Windows Store App JavaScript 开发:页内导航

页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用PageControlNavigator控件加载其他页面的内容.WinJS.Navigation.navigate函数以一个包含页面地址的对象为参数,在该函数执行时将触发WinJS.Navigation.onnavigated事件并把页面地址传递给该事件.PageControlNavigator控件

有什么比较好的javascript开发工具?

在web前端开发中,JavaScript是必备的全能脚本语言,可以创建更加友好的用户交互式网站和应用.但也正是由于JS代码在前端运行,所以很多初学者在刚开始写JS代码的时候,基本上都不会太考虑网站性能问题.今天小编为大家分享7个可以帮你优化网站性能的JavaScript工具. 1.Meteor Meteor可以让web开发人员在简单环境中更加快捷的创建现代的网站和网络应用程序.该框架设计的目的是为了让web应用程序的开发更加简单.容易和快速.目前,Meteor 支持Linux和Mac OS x,