Electron開發桌面應用(1)：環境準備、入門Demo搭建

阿新 • • 發佈：2019-01-21

介紹

Electron 是使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用。
具體介紹參考官方網站：
https://electronjs.org/

環境準備

npm install electron

入門demo

建立專案：

E:\NodeStu>mkdir demo

E:\NodeStu>cd demo

E:\NodeStu\demo>npm init -y
Wrote to E:\NodeStu\demo\package.json:

{
  "name": "demo",
  "version": "1.0.0" 
,
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

新增依賴：

E:\NodeStu\demo>npm install electron -S

> electron@1.7.10 postinstall E:\NodeStu\demo\node_modules\electron
> node install.js 


npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN demo@1.0.0 No description
npm WARN demo@1.0.0 No repository field.

+ electron@1.7.10
added 152 packages in 10.059s

E:\NodeStu\demo>

修改：package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "" 
,
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^1.7.10"
  }
}

新建：main.js

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

let mainWindow;

function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 1024, 
        height: 640,
        transparent: false,
        frame: true,
        resizable : true //固定大小
    });

    const URL = url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
      })

    mainWindow.loadURL(URL);
    console.log(URL);
    mainWindow.openDevTools()

    mainWindow.on('closed', function () {
      mainWindow = null;
    });

}

app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X 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', function () {
  // On OS X 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 (mainWindow === null) {
    createWindow();
  }
});

新建：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    hello!
</body>
</html>

命令測試啟動專案：

E:\NodeStu\demo>npm install
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

up to date in 0.639s

E:\NodeStu\demo>npm start

> [email protected] start E:\NodeStu\demo
> electron .


file:///E:\NodeStu\demo\index.html

E:\NodeStu\demo>

啟動成功：
這裡寫圖片描述

其他配置

配置啟動logo：

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

let mainWindow;

function createWindow () {
    var ico = path.join(__dirname, 'img', 'logo.png');

    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 1024, 
        height: 640,
        transparent: false,
        frame: true,
        icon: ico, 
        resizable : true //固定大小
    });


    const URL = url.format({
      pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
      })

    mainWindow.loadURL(URL);
    console.log(URL);
    mainWindow.openDevTools()

    mainWindow.on('closed', function () {
      mainWindow = null;
    });

}

app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X 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', function () {
  // On OS X 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 (mainWindow === null) {
    createWindow();
  }
});

啟動後會有啟動logo：

這裡寫圖片描述

Electron開發桌面應用(1)：環境準備、入門Demo搭建

介紹 Electron 是使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用。具體介紹參考官方網站： https://electronjs.org/ 環境準備

Android開發之旅1：環境搭建及HelloWorld

lan 及其其它 ply 新項目 bsp 驗證 for 對話框 ——工欲善其事必先利其器引言本系列適合0基礎的人員，因為我就是從0開始的，此系列記錄我步入Android開發的一些經驗分享，望與君共勉！作為Android隊伍中的一個新人的

Electron 構建桌面應用程序開發資料整理

tps desktop ade googl spa 運行文檔 lec span Electron 是什麽？ Electron 是一個程序庫，基於Electron庫我們可以使用HTML、CSS、JS來開發跨平臺桌面應用程序（building cross-platform

雲上樹莓派（1）：環境準備

roc add latest test limit class rdp windows 兩個 1. 設備準備準備好的設備包括：樹莓派3B，來自某寶電源，來自某寶 8G 10級 microSD 卡（TF卡），包括讀卡器，來自某東散熱片兩個，來自某寶

雲中樹莓派（1）：環境準備

1. 裝置準備準備好的裝置包括：樹莓派3B，來自某寶電源，來自某寶 8G 10級 microSD 卡（TF卡），包括讀卡器，來自某東散熱片兩個，來自某寶 SDH22 溫度溼度感測器，來自某寶樹莓派確實和一張信用卡一般大小，如下圖所示。它有4個USB，1個有線網口，1個H

COCOS-JS開發1：環境搭建

cocos2d-js cocos2d-js宣稱是跨全平臺的遊戲引擎，這一點應該是最最吸引人的地方。而且伴隨著微信小遊戲的火爆，cocos2d-js對其支援到位，也註定在未來有更廣闊的空間。 Cocos2d-js是cocos2d-x的JS版本，前身是cocos

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

就會 ans .org 正在 ctype sso 環境變量由於力量 HTML一直是桌面軟件的重點，各種桌面軟件或者多或少都會嵌入一些HTML的代碼。而自從在了Nodejs後，使用HTML制作桌面就成為了可能。這要感謝node-webkit引入了對桌面的支持，然後ele

html基礎1(環境準備、標簽)

溝通 html基礎 ctrl 動圖 -1 chrom height oct new 學習目的 1，能改前端的模板 2，自己裝修頁面 3、前後端交互多個技術 4、能操作網頁元素 5、能和前端開發人員溝通開發工具: pychar

##1.Centos7環境準備--openstack

cli /usr usr 規劃 led service openss .com dev ##1.Centos7環境準備 ##1.Centos7環境準備 #Centos 7 x86_64 #安裝 yum -y install wget vim ntp net-tool

如果你想開發一個應用(1-9)

出了 ioe keys osi mail dsta 字母 bdb dao 上一章的結尾，我們看到現有的代碼雖然經過了一些改進，但仍然有很多壞味道，首當其沖的就是Controller太厚了，Controller應該僅僅作為一個控制器使用，要盡可能的薄。這時候，上一章裏提到過

用Macbook開發桌面應用，使用Alamofire鏈接.Net Core Webapi的註意事項！

結果放棄 ads http 代碼 content ipaddress span rec ------------https方式----------------------- 因為Swift9之後訪問接口只能使用https，所以在後臺加入pfx文件（怎麽生成，自行百度吧）1

部署k8s ssl集群實踐1:基礎環境準備

基礎 you code hub 錯誤 systemctl 第一個 base 感謝參考文檔:https://github.com/opsnull/follow-me-install-kubernetes-cluster感謝作者的無私分享。集群環境已搭建成功跑起來。文章是部署

electron開發桌面端

安裝electron 　　第一步：安裝node ,node下自帶npm; 　　第二步：npm install -g electron (如果不行就使用sudo,或cnpm、淘寶映象下載）檢測 electron -v; 　　第三步：np

Exchange/Office365 自動處理腳本：環境準備篇（一）

conn ise 相關 -exec rev use sof ant set 一、服務器要求操作系統：Windows Server 2008/2012 R2網絡要求：加入域允許訪問office365相關網址開通到Exchange/Skype 的端口443，5985，5

基於Vue+Electron構建桌面應用程式實踐

Electron 是由 GitHub 開發的開源庫，用於構建擁有 HTML、CSS 和 JavaScript 的跨平臺桌面應用程式。Electron 通過把 Chromium 和 Node.js 組合到一個執行時來實現這一點，並且可以為 Mac、Windows 和 Linux 打包應用程式

Mixin 開發簡明教程 1：寫個機器人

我是 @lyric，本教程應 Mixin COO @薄荷邀約而寫，旨在向區塊鏈領域以外的工程師們介紹如何以依託 Mixin Network，用最簡單的方式開發自己的區塊鏈應用程式。本文是系列教程的第一篇，如果對本文感興趣，你可以：訂閱我的部落格 lyric.im 訂閱我的

gulp構建專案（一）：環境準備

一、建立package.json檔案 npm init // 一路回車就行（預設已安裝node） package.json內容如下: { "name": "gulp-project", "version": "1.0.0", "des

jmeter教程（二）：環境準備

寫了半天，按了一下鍵盤，全沒了，好吧，我逗B了，重新寫過。。。要想使用jmeter，肯定要先安裝jmeter，而jmeter的執行，得依賴jdk，當然還有錄製指令碼的badboy（可選）。先從基本的jdk安裝說起，那麼這裡會講在windows版和linux版的安裝。先講windows版的：

【資料結構】順序表應用1：多餘元素刪除之移位演算法

Problem Description 一個長度不超過10000資料的順序表，可能存在著一些值相同的“多餘”資料元素（型別為整型），編寫一個程式將“多餘”的資料元素從順序表中刪除，使該表由一個“非純表

Electron開發桌面應用(1)：環境準備、入門Demo搭建

介紹

環境準備

入門demo

其他配置

相關推薦