Steps to create electron app
命令:
npm install electron-prebuilt -g
電子項目需要三個文件:
- 的index.html:在默認情況下呈現的網頁。
- main.js:啓動應用程序並創建一個瀏覽器窗口來呈現HTML。
- package.json:列出所需的應用程序依賴項,元數據和文件。
的package.json並添加以下:
{
"name": "hero-browser",
"version": "0.1.0",
"main": "main.js",
"dependencies": {
"dotenv": "^2.0.0",
"md5": "^2.1.0"
}
}
'use strict';
const electron = require('electron');
const app = electron.app; // Module to control application life.
const BrowserWindow = electron.BrowserWindow; // Module to create native browser window.
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/app/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});
應用/ index.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Marvel Super Hero Browser</title>
<link href="css/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Marvel Super Hero Browser</h1>
<em>Thanks to Marvel for their API.</em>
<div id="character_list"></div>
<script src="js/index.js"></script>
</body>
</html>
PP/CSS/index.css並添加一些基本的CSS以幫助佈局。
#character_list .character img {
width: 100px;
}
.character {
float: left;
padding: 25px;
max-width: 100px;
}
應用程序/ JS/index.js。
這將是大多數應用程序功能發生的地方。首先設置所需的相關性和變量:
'use strict';
require('dotenv').config();
var md5 = require('md5');
var publicKey = process.env.MARVEL_PUBLIC_KEY;
var privateKey = process.env.MARVEL_PRIVATE_KEY;
var ts = String(new Date().getTime());
var hash = md5(ts+privateKey+publicKey);
var url = `https://gateway.marvel.com/v1/public/characters?ts=${ts}&apikey=${publicKey}&hash=${hash}&limit=25`;
感謝您的努力! – anu