Electron+HTML做界面,C#做後臺(一)創建Electron項目

1.安裝nodejs【自行百度,下載安裝包,安裝即可】

2.安裝visual stuido任一版本就可【推薦使用 vs2012,vs2013,vs2015,vs2017】

3.創建文件目錄【當前系統是window10】如下圖

在這裏插入圖片描述

4.在當前的空白區域 按住 Shit鍵+鼠標右鍵,打開Powershell

在這裏插入圖片描述

如果打開的和Cmd一樣,不要恐懼擔憂,不影響以下使用,只需要路徑相同即可
在這裏插入圖片描述

5.使用 命令創建Electron程序,一定要檢查nodejs是否安裝合適

5.1使用 npm init 設置app信息

npm init

在這裏插入圖片描述
如上圖,OK 創建好了

5.2 安裝 electron ,使用全局命令

npm install electron -g

在這裏插入圖片描述
如上圖,OK 在系統中安裝了 electron

5.3給當前的項目安裝 electron,使用命令

npm install --save-dev electron

在這裏插入圖片描述
如上圖,OK創建成功,
如果中途下載安裝失敗,請將 npm 切換成 cnpm 【具體百度】

5.3創建 main.js文件並添加以下內容


const electron = require("electron");
const { app, ipcMain, BrowserWindow, session} = electron;

var myWork;
app.on("ready", (e) => {
    myWork = new BrowserWindow({
        center: true,
        webPreferences: {
            plugins: true,
            allowDisplayingInsecureContent: true,
            allowRunningInsecureContent: true,
        }
    });
    myWork.loadURL(__dirname + "/index.html");
    myWork.show();
    myWork.openDevTools();
});



5.4在當前目錄下創建 index.html,並添加以下內容

<!doctype html>
<html>
	<head>
		<title>hello Word</title>
	</head>
	<body>
		<h1>這是用Electron創建的程序,這個程序後面將會使用C#來實現數據邏輯處理</h1>
	</body>
</html>

5.5 修改 package.json文件中的main值

在這裏插入圖片描述

以上內容如果完整無誤的情況下,Electron的項目已經創建好了,可以使用在當前位置使用Powersell執行Electron .
在這裏插入圖片描述
效果圖
在這裏插入圖片描述

當前目錄結構

在這裏插入圖片描述
項目源碼傳送門
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章