1. 程式人生 > >使用Bootstrap、Electron和JavaScript開發桌面應用

使用Bootstrap、Electron和JavaScript開發桌面應用

就會 ans .org 正在 ctype sso 環境變量 由於 力量

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前端的,或是轉行,或是大學生,還有工作中想提升自己能力的,正在學習的小夥伴歡迎加入

點擊:加入

使用Bootstrap、Electron和JavaScript開發桌面應用