前端Electron新手入門教程詳解

 更新時間:2019-06-25 03:00:49   作者:佚名   我要評論(0)

Electron 是什么
定義


Electron是一個能讓你使用傳統前端技術(Nodejs, Javascript, HTML, CSS)開發一個跨平臺桌面應用的框架。這里所說的桌面應用指的是

Electron 是什么

定義

Electron是一個能讓你使用傳統前端技術(Nodejs, Javascript, HTML, CSS)開發一個跨平臺桌面應用的框架。這里所說的桌面應用指的是在Windows、OSX及Linux系統上運行的程序。

歷史

2013年的時候,Atom編輯器問世,作為實現它的底層框架Electron也逐漸被熟知,到2014年時被開源,那時它還是叫Atom Shell。

接下來的幾年,Electron在不斷的更新迭代,幾乎每年都有一個重大的里程碑

  • 2013年4月11日,Electron以Atom Shell為名起步。
  • 2014年5月6日,Atom以及Atom Shell以MIT許可證開源。
  • 2015年4月17日,Atom Shell改名為Electron。
  • 2016年5月11日,1.0版本發布。
  • 2016年5月20日,允許向Mac應用商店提交軟件包。
  • 2016年8月2日,支持Windows商店。

在最新的穩定版本V3.x中,Electorn集成了Nodejs v10.2.0和內核為v66.0.3359.181的Chromium

基于Electron實現的軟件

Electron現已被多個開源應用軟件所使用,其中被廣大程序員所熟知和使用的Atom和VsCode編輯器就是基于Electron實現的。嘗試打開VsCode,點擊幫助菜單中的切換開發人員工具,可以在界面上看到我們熟悉的Chrome devtool,如下圖

底層實現

由于應用場景是在系統平臺上開發應用,所以我們開發時需要有能調用原生系統api的能力。為了能讓前端語言能跟底層可以交互,Electron集成了Nodejs+Chromium。Nodejs主要負責應用程序主線程邏輯控制、底層交互等功能,Chromium主要負責渲染線程窗口的業務邏輯。主要的架構如下圖:

這樣的架構讓單獨升級Chromium版本成為可能。假設你的程序當前使用的是Electron v3.x的版本,這個版本的Electron所帶的Chromium是66版本。這時如果你用的某些特性必須要使用Chromium 69版本,除了整體升級Electron到指定最新版本外,你還可以單獨的對Chromium版本進行升級。

但是一般情況我們不建議這么做,因為成功的升級需要你具備C和C++相關的知識,并且對Chromium的底層實現具有一定的了解。即使你成功升級了Chromium的版本,但是對于軟件整體的穩定性是無法保證的。

為什么要用

以Windows平臺為例,大部分人會首先想到使用QT(C++),WPF(C#) 等語言去開發應用。不可否認的是,這些已經是非常成熟的開發方案了。但是,我們來看下如下兩種場景:

  • 公司要做個全新的APP,但是技術人員構成大部分都是前端開發
  • 公司原本就有在線的web應用,但是想包個殼能在桌面直接打開,同時增加一些與系統交互的功能

對于第一種場景,團隊中開發人員對于C++和C#并不熟悉,雖然可以現學,但是整個項目的技術管理和項目管理就會變得不可控。

對于第二種場景,對于應用的業務邏輯要求并不多,只是套一個具有瀏覽器的運行環境,單獨為此配置一個C++、C#開發人員劃不來。

對于這兩種情況,如果現有的前端開發人員能直接搞定,那就非常完美了。

Electron的誕生提供了這種可能性。它可以幫助前端開發者在不需要學習其他語言和技能的前提下,快速開發跨平臺的桌面應用。

怎么用

在后面的章節中,我們會根據主要的知識點并輔以實際案例來具體講解如何使用Electron進行開發。這里我們只簡單的介紹下如何使用Electron寫一個經典的Hello World。

首先,新建一個目錄,初始化npm

mkdir helloword
npm init

修改package.json文件,增加npm run start命令

{
"name": "electron demo",
"version": "1.0.0",
"description": "",
"main": "main.js", //修改為main.js
"scripts": {
"start": "electron ." //增加start命令
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^3.0.10"
}
}

通過npm安裝Electron

npm i electron --save-dev

在根目錄創建main.js和index.html

main.js

const { app, BrowserWindow } = require('electron')
function createWindow () { 
// 創建瀏覽器窗口
win = new BrowserWindow({ width: 800, height: 600 })
// 然后加載應用的 index.html。
win.loadFile('index.html')
}
app.on('ready', createWindow)

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

到這里,我們所有的準備工作都完成了,接下來就是運行它!

npm run start

看看效果

關于Electron的簡單介紹就到這里為止,想必大家已經對Electron有了一些初步的認識。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:

  • 利用Electron簡單擼一個Markdown編輯器的方法
  • Electron-vue開發的客戶端支付收款工具的實現
  • 解決Vue+Electron下Vuex的Dispatch沒有效果問題
  • electron-vue利用webpack打包實現多頁面的入口文件問題
  • Electron 如何調用本地模塊的方法
  • 詳解使用webpack+electron+reactJs開發windows桌面應用

相關文章

  • 前端Electron新手入門教程詳解

    前端Electron新手入門教程詳解

    Electron 是什么 定義 Electron是一個能讓你使用傳統前端技術(Nodejs, Javascript, HTML, CSS)開發一個跨平臺桌面應用的框架。這里所說的桌面應用指的是
    2019-06-25
  • 微信小程序開發注意指南和優化實踐(小結)

    微信小程序開發注意指南和優化實踐(小結)

    前言 轉眼間已經參與過我廠好幾個小程序的開發了,下面本妹子將開發中的那些注意點和各位小伙伴們分享下,妥妥的干貨一枚。 一、WXML 不要換行寫,有空格不行
    2019-06-25
  • vue elementUI使用tabs與導航欄聯動

    vue elementUI使用tabs與導航欄聯動

    不使用tabs標簽頁時,點擊導航菜單,router-view映射相應的組件即可顯示頁面。但我們想在點擊導航欄時在tabs中映射相應的組件,這就需要使用tabs組件 在sli
    2019-06-25
  • 深入淺解正則表達式在Java中的使用

    深入淺解正則表達式在Java中的使用

    介紹 &#8226;正則表達式一般用于字符串匹配, 字符串查找和字符串替換. 別小看它的作用, 在工作學習中靈活運用正則表達式處理字符串能夠大幅度提高效率, 編
    2019-06-25
  • 微信小程序實現下拉刷新動畫

    微信小程序實現下拉刷新動畫

    微信小程序動畫之下拉刷新動畫的具體代碼,供大家參考,具體內容如下 簡易的效果 下面放代碼: js: var animation = wx.createAnimation({}) var i = 1;
    2019-06-25
  • 還不會正則表達式?趕快看這篇!

    還不會正則表達式?趕快看這篇!

    正則表達式是很多程序員,甚至是一些有了多年經驗的開發者薄弱的一項技能。大家都很多時候都會覺得正則表達式難記、難學、難用,但不可否認的是正則表達式是
    2019-06-25
  • 常用JavaScript正則表達式匯編與示例詳解

    常用JavaScript正則表達式匯編與示例詳解

    1.1 前言 目前收集整理了21個常用的javaScript正則表達式,其中包括用戶名、密碼強度、整數、數字、電子郵件地址(Email)、手機號碼、身份證號、URL地址、 I
    2019-06-25
  • 微信小程序實現消息框彈出動畫

    微信小程序實現消息框彈出動畫

    微信小程序動畫之消息框彈出,供大家參考,具體內容如下 上圖 js: Page({ data: { showModalStatus: false }, powerDrawer: function(e) { va
    2019-06-25
  • js事件觸發操作實例分析

    js事件觸發操作實例分析

    本文實例講述了js事件觸發操作。分享給大家供大家參考,具體如下: click包含了(mousedown,mouseup)叫做MouseEvents; keydown,keypress,keyup之流叫做UI
    2019-06-25
  • JavaScript  正則表達式備忘單實例代碼

    JavaScript 正則表達式備忘單實例代碼

    正則表達式或“regex”用于匹配字符串的各個部分 下面是我創建正則表達式的備忘單。 匹配正則 使用 .test() 方法 let testString = "My test string"; let
    2019-06-25

最新評論

买宝宝用品赚钱吗 股票分析软件使用免费 体彩福建31选7开奖结果19210 上海期货配资 宋钱 五河北11选五走势图 七星彩近30期 云南11选5分布走势图 好彩1生肖走势图 股票配资爆仓 11选5专业版软件下载 宁夏十一选五走势图规律 北京pk10下载 体彩中奖了在哪里领奖 股票推荐及行业分析 上海时时乐走势图单选 秒速赛车五码免费计划 重庆幸运农场软件