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