electron之Windows下使用 html js css 開發桌面應用程式

来源:http://www.cnblogs.com/yhcao/archive/2016/01/26/5159659.html
-Advertisement-
Play Games

1.atom/electron github: "https://github.com/atom/electron" 中文文檔: "https://github.com/atom/electron/tree/master/docs translations/zh CN" 2.下載 ele...


1.atom/electron

github:

https://github.com/atom/electron

中文文檔:

https://github.com/atom/electron/tree/master/docs-translations/zh-CN

2.下載 electron-v0.36.5-win32-x64

https://github.com/atom/electron/releases/download/v0.36.5/electron-v0.36.5-win32-x64.zip

3.新建一個項目-快速入門:

https://github.com/atom/electron/blob/master/docs-translations/zh-CN/tutorial/quick-start.md

大體上,一個 Electron 應用的目錄結構如下:

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

you-app:

electron之Windows下使用html,js,css,開發桌面應用程式_you-app.rar

package.json:

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

main.js:

var app = require('app');  // 控制應用生命周期的模塊。
var BrowserWindow = require('browser-window');  // 創建原生瀏覽器視窗的模塊
// 保持一個對於 window 對象的全局引用,不然,當 JavaScript 被 GC,
// window 會被自動地關閉
var mainWindow = null;
// 當所有視窗被關閉了,退出。
app.on('window-all-closed', function() {
  // 在 OS X 上,通常用戶在明確地按下 Cmd + Q 之前
  // 應用會保持活動狀態
  if (process.platform != 'darwin') {
app.quit();
  }
});
// 當 Electron 完成了初始化並且準備創建瀏覽器視窗的時候
// 這個方法就被調用
app.on('ready', function() {
  // 創建瀏覽器視窗。
  mainWindow = new BrowserWindow({width: 800, height: 600});
  // 載入應用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  // 打開開發工具
  mainWindow.openDevTools();
  // 當 window 被關閉,這個事件會被髮出
  mainWindow.on('closed', function() {
// 取消引用 window 對象,如果你的應用支持多視窗的話,
// 通常會把多個 window 對象存放在一個數組裡面,
// 但這次不是。
mainWindow = null;
  });
});

index.html:

<!DOCTYPE html>
<html>
  <head>
<title>Hello World!</title>
  </head>
  <body>
<h1>Hello World!</h1>
We are using io.js <script>document.write(process.version)</script>
and Electron <script>document.write(process.versions['electron'])</script>.
  </body>
</html>

4.應用部署:

https://github.com/atom/electron/blob/master/docs-translations/zh-CN/tutorial/application-distribution.md

為了使用Electron部署你的應用程式,你存放應用程式的文件夾需要叫做 app 並且需要放在 Electron 的資源文件夾下(在 OS X 中是指 Electron.app/Contents/Resources/,在 Linux 和 Windows 中是指 resources/) 就像這樣:

在 Windows 和 Linux 中:

electron/resources/app
├── package.json
├── main.js
└── index.html

Windows環境下的NodeJS+NPM+Bower安裝配置

http://jingyan.baidu.com/article/2d5afd69e243cc85a2e28efa.html

下載並安裝node-v5.5.0-x64.msi

https://nodejs.org/dist/v5.5.0/node-v5.5.0-x64.msi

檢驗是否安裝成功:

C:\Users\yhcao>node -v
v5.5.0

C:\Users\yhcao>npm -v
3.3.12

用nmp打包成asar:

第一步:安裝asar

npm install -g asar

第二步:打包

asar pack your-app app.asar

例如:asar pack F:\atom_project\myatom_1 F:\atom_project\app.asar
這樣就會把myatom_1打包成app.asar

electron之Windows下使用html,js,css,開發桌面應用程式_app.rar

5.更改Electron名稱

你可以將 electron.exe 改成任意你喜歡的名字,然後可以使用像 rcedit 或者ResEdit 編輯它的icon和其他信息。

ResEdit:

http://www.cr173.com/soft/12721.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • js 隨機星星 document.createElement(); setAttribute()無標題文檔
  • 一、Jquery List DragSort 對於有些頁面,如首頁的定製,需要進行動態的拖拽排序。由於自己實現比較困難,我們一般會使用一些js插件來實現。dragsort 就是幫助我們完成這一需求。通過dragsort我們可以很方便地對html頁面上的素動態地推拽,進行排序。dragsort是一.....
  • 在AngualrJS中使用$http每次向遠程API發送請求,等待響應,這中間有些許的等待過程。如何優雅地處理這個等待過程呢?如果我們在等待過程中彈出一個遮罩層,會是一個比較優雅的做法。這就涉及到了對$http的請求響應進行攔截了。請求的時候,彈出一個遮罩層,收到響應的時候把遮罩層隱藏。其實,$ht...
  • 在Firefox,chrome,opera,safari,ie9,ie8等瀏覽器直接可以用JSON對象的stringify()和parse()方法。1、JSON.stringify(obj)將JS對象轉為JSON字元串。//JS對象var obj={"name":"tom","sex":"男","a...
  • 分享一款基於CSS3 Sprite僵屍行走動畫特效。這是一款使用animation動畫的steps屬性製作的僵屍行走CSS3 Sprite動畫特效。效果圖如下 :線上預覽源碼下載實現的代碼。css代碼:@charset "utf-8";/* CSS Document *//* General CSS...
  • 1.window.location.hash window.location.hash這個屬性主要是讀取和寫入網頁位置的,我們經常會用來控制網頁單頁面跳轉或者是控制網頁位置。然而這個屬性在firefox下遇到中文時卻會被自動轉碼為UTF-8,這是火狐等相似瀏覽器對中文url的一些處理的不同。以下介....
  • 現在有那麼多的JavaScript資源可供使用,很難分辨有多少是重疊和多餘的,更不要說識別無用信息。實際上,大部分的JavaScript技能培訓都是很糟糕的。
  • 在文章《前端開發的技術資料和雞湯美文彙總(一)》里,向大家介紹了前端入門的基礎資料,今天小編彙總了5篇前端技術進階實操的乾貨,趕緊來看看吧!另外,喜歡寫博客的工程師博主可以加工程師博主交流群:391519124,分享你的博文,和大牛們一起交流技術~一、助力Web開發20個超實用CSS庫在這篇文件章中...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...