成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Electron寫桌面應(yīng)用入門

lixiang / 520人閱讀

摘要：本節(jié)目標(biāo)你可以在分鐘內(nèi)開(kāi)始運(yùn)行一個(gè)最簡(jiǎn)單。是一個(gè)能幫你用來(lái)寫桌面程序的項(xiàng)目。原先是為打造的，后來(lái)直接演化成兄弟項(xiàng)目。現(xiàn)在已經(jīng)有很多大廠也開(kāi)始使用來(lái)寫桌面了。全局安裝，因?yàn)槲覀円玫剿拿钚?。完美天才第一步，達(dá)成

本節(jié)目標(biāo)：你可以在10分鐘內(nèi)開(kāi)始運(yùn)行一個(gè)最簡(jiǎn)單electron app。不要考慮太多的概念，直接復(fù)制粘貼開(kāi)始吧。

Electron是一個(gè)能幫你用JS來(lái)寫桌面程序的node項(xiàng)目。原先是為Atom打造的，后來(lái)直接演化成兄弟項(xiàng)目?，F(xiàn)在已經(jīng)有很多大廠也開(kāi)始使用Electron來(lái)寫桌面app了。比如獨(dú)角獸slack、微軟的VS code、avocode、weFlow等等等等。

ok，接下來(lái)就讓我們來(lái)開(kāi)始動(dòng)手吧。以下內(nèi)容除去下載文件的時(shí)間，三分鐘就可以完成。

1.安裝Electron。

// 全局安裝electron，因?yàn)槲覀円玫剿拿钚小?$ npm install electron -g

// 但是npm安裝electron要從國(guó)外下載一個(gè)45MB左右的zip包，特別的慢（8KB...），所以我們可以采用下面的這條安裝命令。
// 這條安裝命令會(huì)從淘寶的鏡像站下載這個(gè)zip包，速度很快，達(dá)到你的帶寬巔峰。
$ npm install electron -g --registry=http://registry.npm.taobao.org

// 當(dāng)然你也可以使用cnpm來(lái)全局安裝electron
$ npm install cnpm -g --registry=http://registry.npm.taobao.org
$ cnpm install electron -g

2.準(zhǔn)備三個(gè)小文件(以下內(nèi)容直接粘貼復(fù)制)
本部分來(lái)自于官網(wǎng)quick start。

新建一個(gè)項(xiàng)目目錄文件夾，名字就叫desktopApp好了。
新建三個(gè)文件

desktopApp/
├── package.json
├── main.js
└── index.html

三個(gè)文件填入以下內(nèi)容：

在package.json中：

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

在main.js中

const {app, BrowserWindow} = require("electron")
const path = require("path")
const url = require("url")

// Keep a global reference of the window object, if you don"t, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, "index.html"),
    protocol: "file:",
    slashes: true
  }))

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on("closed", () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow)

// Quit when all windows are closed.
app.on("window-all-closed", () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== "darwin") {
    app.quit()
  }
})

app.on("activate", () => {
  // On macOS it"s common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app"s specific main process
// code. You can also put them in separate files and require them here.

在index.html中



  
    
    Hello World!
  
  
    
Hello World!

    We are using node ,
    Chrome ,
    and Electron .

3.運(yùn)行
在這個(gè)項(xiàng)目目錄下面運(yùn)行一條命令就可以啟動(dòng)我們的app了。

$ electron .

Done!完美！天才第一步，達(dá)成！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86612.html

相關(guān)文章

  • Electron入門介紹

    摘要：本文主要講解的入門?？梢詭椭覀児芾戆南螺d依賴部署發(fā)布等?？梢哉J(rèn)為是中的。后續(xù)使用中，全部替換為即可。命令根據(jù)它，自動(dòng)下載所需模塊用于創(chuàng)建窗口和處理系統(tǒng)事件安裝包的位置。 Electron是什么 可以認(rèn)為Electron是一種運(yùn)行環(huán)境庫(kù)，我們可以基于此，用HTML、JS和CSS寫桌面應(yīng)用。PC端的UI交互，主要有web應(yīng)用和桌面應(yīng)用。具體采用哪種方式，主要看系統(tǒng)的應(yīng)用場(chǎng)景，哪個(gè)更合適...

    wing324 評(píng)論0 收藏0

  • 一口氣完成electron的入門學(xué)習(xí)

    摘要：目前類似的工具有，等。在渲染進(jìn)程中，直接調(diào)用原生的接口是十分危險(xiǎn)的。這里介紹一種，通過(guò)和對(duì)象，以消息的方式進(jìn)行通信。主進(jìn)程獲得消息后，通過(guò)返回信息。另外，還提供了一種同步的消息傳遞方式。打包完成功能代碼后，我們需要將代碼打成可運(yùn)行的包。 介紹 目前，使用前端技術(shù)開(kāi)發(fā)桌面應(yīng)用已經(jīng)越來(lái)越成熟，這使得前端同學(xué)也可以參與桌面應(yīng)用的開(kāi)發(fā)。目前類似的工具有electron，NW.js等。這里我們著...

    Ethan815 評(píng)論0 收藏0

  • Electron，從玩玩具的心態(tài)開(kāi)始，到打造出一款越來(lái)越優(yōu)秀的桌面客戶端產(chǎn)品

    摘要：首發(fā)于酷家樂(lè)前端博客標(biāo)題是我以第一視角基于開(kāi)發(fā)客戶端產(chǎn)品的體驗(yàn)，我將在之后分一系列文章向有興趣的朋友一步一步介紹我是怎么從玩玩具的心態(tài)開(kāi)始接觸到去開(kāi)發(fā)客戶端產(chǎn)品，最后隨著業(yè)務(wù)和功能的復(fù)雜度提升再不斷地優(yōu)化客戶端。 首發(fā)于酷家樂(lè)前端博客 標(biāo)題是我以第一視角基于 Electron 開(kāi)發(fā)客戶端產(chǎn)品的體驗(yàn)，我將在之后分一系列文章向有興趣的朋友一步一步介紹我是怎么從玩玩具的心態(tài)開(kāi)始接觸 Ele...

    Markxu 評(píng)論0 收藏0

  • Electron 快速入門

    摘要：當(dāng)一個(gè)實(shí)例被銷毀后，相應(yīng)的渲染進(jìn)程也會(huì)被終止。之所以命名為，主要是為了與主進(jìn)程這個(gè)概念對(duì)應(yīng)。部分在事件觸發(fā)后才能使用。當(dāng)全部窗口關(guān)閉時(shí)退出。主進(jìn)程接收到消息并處理之后，會(huì)返回處理結(jié)果。 簡(jiǎn)介 Electron 是一個(gè)可以使用 Web 技術(shù)如 JavaScript、HTML 和 CSS 來(lái)創(chuàng)建跨平臺(tái)原生桌面應(yīng)用的框架。借助 Electron，我們可以使用純 JavaScript 來(lái)調(diào)用豐...

    Drummor 評(píng)論0 收藏0

  • Electron指南 - 快速入門

    摘要：快速入門提供了豐富的本地操作系統(tǒng)的，使你能夠使用純來(lái)創(chuàng)建桌面應(yīng)用程序。這并不意味著是一個(gè)綁定圖形用戶界面的庫(kù)。每個(gè)頁(yè)面在里是運(yùn)行在自己的進(jìn)程里，這些進(jìn)程被稱為渲染進(jìn)程。有些只能在該事件發(fā)生后才能被使用。 快速入門 Electron提供了豐富的本地（操作系統(tǒng)）的API，使你能夠使用純JavaScript來(lái)創(chuàng)建桌面應(yīng)用程序。與其它各種的Node.js運(yùn)行時(shí)不同的是Electron專注于桌面...

    SQC 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<