1. <wbr id="m8vu6"></wbr>

      <del id="m8vu6"><center id="m8vu6"><source id="m8vu6"></source></center></del>
        <p id="m8vu6"><sub id="m8vu6"></sub></p>

        VB.net 2010 視頻教程 VB.net 2010 視頻教程 python基礎視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 網站開發 > JavaScript >
        • JavaScript教程之JavaScript教程之electron——初探

        是什么?

        • Electron是由Github開發,用HTML,CSS和JavaScript來構建跨平臺桌面應用程序的一個開源庫。
        • Electron通過將Chromium和Node.js合并到同一個運行時環境中,并將其打包為Mac,Windows和Linux系統下的應用來實現這一目的。

        為什么選擇electron?

        先來看一下官方的兩句話

        使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用

        如果你可以建一個網站,你就可以建一個桌面應用程序。 Electron 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術創建原生程序的框架,它負責比較難搞的部分,你只需把精力放在你的應用的核心上即可。

        如果你是一個前端,你就明白這個有多簡單了

        哦,對了!或許你還不知道,Visual Studio Code 、wordpress 和 slack 等客戶端都是基于 Electron 開發的。

        1.可以用 Web 前端技術開發跨平臺的桌面客戶端

        這是 Electron 最迷人的地方,究其根本是因為它是建立在 Chromium 和 Node 之上的,一個負責界面,一個負責背后的邏輯,有句話怎么說來著 你負責貌美如花,我負責賺錢養家,所以Electron 能夠開發跨平臺的桌面應用也就可以理解了。

        作為一名前端小菜鳥來說:

        • 可以用自己熟悉的方式去寫應用界面,ps: 不要和我說什么java、c語言,鄙人行走江湖就一把js,遇到需求就是干,學好js,走遍天下都不怕(????)
        • 邏輯部分也還是 JS,如果你精通 Node ,那就更好了,后端也一并寫了,ps: sorry,會js就是無所不能,我不是針對某個語言,我是說在座的所有,都是。。。(開玩笑,不要打我╥﹏╥...)

        so,一個 Web 前端開發者可以花很少的成本去上手 Electron,而相比于以前開發多平臺客戶端的成本,利用 ELectron 開發多平臺客戶端的成本是極低的

        2.可以從 Node 的生態獲得極大的助力

        因為 Electron 是基于 Node 的,意味著,Node 這個大生態下的模塊,Electron 也都可以用,這減少了很多造輪子的時間,你要寫一些邏輯將首先思考有沒有成熟的模塊可以引入,而不是自己吭哧吭哧閉門造車,自己造時間精力會大量得被消耗,上路還可能翻車。

        3.為什么需要客戶端?

        既然 Electron 是用 Web 技術寫客戶端,那么看上去 Electron 要做的事,可以搬到網站上,為什么還要搬到客戶端,這里有3個角度的回答:

        • 用戶角度: 客戶端是一款獨立的軟件,其綜合體驗一般都是比網站高的,尤其是涉及到「工具」范疇的應用,此外,特定的用戶群體也會有類似的使用習慣
        • 發行方角度: 客戶端是另一種產品形式,是一種產品的分發方式和入口,客戶端可以實現很多本地應用獨有的需求去觸達用戶,也能提供更加可靠的服務
        • 開發角度: 終于...不用考慮瀏覽器兼容了!!!,Chromium 也足夠開發使用一些先進的 CSS 或 JS 特性,我們現在還沒計劃引入 webpack 和 babel,因為現在好像夠用,克制才是愛,除了寫起來爽,對于開發來說,終于跳出了瀏覽器的沙盒,你可以自己去控制 Electron 中的「瀏覽器」,莫名的開心

        這些綜合起來回答這個小節的問題就是,用 Electron 開發客戶端,用戶體驗好,開發麻煩小,功能更強大,世界更和平~~~

        怎么用?

        從開發的角度來看, Electron application 本質上是一個 Node. js 應用程序。 與 Node.js 模塊相同,應用的入口是 package.json 文件。 一個最基本的 Electron 應用一般來說會有如下的目錄結構:

        your-app/
        ├── package.json
        ├── main.js
        └── index.html

        為你的新Electron應用創建一個新的空文件夾。 打開你的命令行工具,然后從該文件夾運行npm init

        npm init

        npm 會幫助你創建一個基本的 package.json 文件。 其中的 main 字段所表示的腳本為應用的啟動腳本,它將會在主進程中執行。 如下片段是一個 package.json 的示例:

        {
          "name": "your-app",
          "version": "0.1.0",
          "main": "main.js"
        }

        注意:如果 main 字段沒有在 package.json 中出現,那么 Electron 將會嘗試加載 index.js 文件(就像 Node.js 自身那樣)。 如果你實際開發的是一個簡單的 Node 應用,那么你需要添加一個 start 腳本來指引 node 去執行當前的 package:

        {
          "name": "your-app",
          "version": "0.1.0",
          "main": "main.js",
          "scripts": {
            "start": "electron ."
          }
        }

        安裝 Electron

        現在,您需要安裝electron。 我們推薦的安裝方法是把它作為您 app 中的開發依賴項,這使您可以在不同的 app 中使用不同的 Electron 版本。 在您的app所在文件夾中運行下面的命令:

        npm install --save-dev electron

        開發一個簡易的 Electron

        Electron apps 使用JavaScript開發,其工作原理和方法與Node.js 開發相同。 electron模塊包含了Electron提供的所有API和功能,引入方法和普通Node.js模塊一樣:

        const electron = require('electron')

        electron 模塊所提供的功能都是通過命名空間暴露出來的。 比如說: electron.app負責管理Electron 應用程序的生命周期, electron.BrowserWindow類負責創建窗口。 下面是一個簡單的main.js文件,它將在應用程序準備就緒后打開一個窗口:

        const { app, BrowserWindow } = require('electron')
        
        function createWindow () {   
          // 創建瀏覽器窗口
          let win = new BrowserWindow({
            width: 800,
            height: 600,
            webPreferences: {
              nodeIntegration: true
            }
          })
        
          // 加載index.html文件
          win.loadFile('index.html')
        }
        
        app.on('ready', createWindow)

        您應當在 main.js 中創建窗口,并處理程序中可能遇到的所有系統事件。 下面我們將完善上述例子,添加以下功能:打開開發者工具、處理窗口關閉事件、在macOS用戶點擊dock上圖標時重建窗口,添加后,main. js 就像下面這樣:

        const { app, BrowserWindow } = require('electron')
        
        // 保持對window對象的全局引用,如果不這么做的話,當JavaScript對象被
        // 垃圾回收的時候,window對象將會自動的關閉
        let win
        
        function createWindow () {
          // 創建瀏覽器窗口。
          win = new BrowserWindow({
            width: 800,
            height: 600,
            webPreferences: {
              nodeIntegration: true
            }
          })
        
          // 加載index.html文件
          win.loadFile('index.html')
        
          // 打開開發者工具
          win.webContents.openDevTools()
        
          // 當 window 被關閉,這個事件會被觸發。
          win.on('closed', () => {
            // 取消引用 window 對象,如果你的應用支持多窗口的話,
            // 通常會把多個 window 對象存放在一個數組里面,
            // 與此同時,你應該刪除相應的元素。
            win = null
          })
        }
        
        // Electron 會在初始化后并準備
        // 創建瀏覽器窗口時,調用這個函數。
        // 部分 API 在 ready 事件觸發后才能使用。
        app.on('ready', createWindow)
        
        // 當全部窗口關閉時退出。
        app.on('window-all-closed', () => {
          // 在 macOS 上,除非用戶用 Cmd + Q 確定地退出,
          // 否則絕大部分應用及其菜單欄會保持激活。
          if (process.platform !== 'darwin') {
            app.quit()
          }
        })
        
        app.on('activate', () => {
          // 在macOS上,當單擊dock圖標并且沒有其他窗口打開時,
          // 通常在應用程序中重新創建一個窗口。
          if (win === null) {
            createWindow()
          }
        })
        
        // 在這個文件中,你可以續寫應用剩下主進程代碼。
        // 也可以拆分成幾個文件,然后用 require 導入。

        最后,創建你想展示的 index.html

        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="UTF-8">
            <title>Hello World!</title>
          </head>
          <body>
            <h1>Hello World!</h1>
            We are using node <script>document.write(process.versions.node)</script>,
            Chrome <script>document.write(process.versions.chrome)</script>,
            and Electron <script>document.write(process.versions.electron)</script>.
          </body>
        </html>

        啟動你的應用

        在創建并初始化完成 main.js、 index.htmlpackage.json之后,您就可以在當前工程的根目錄執行 npm start 命令來啟動剛剛編寫好的Electron程序了。

        參考文章:

        Electron,從玩玩具的心態開始,到打造出一款越來越優秀的桌面客戶端產品

        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看