5
npm init 
npm install electron-prebuilt --save-dev 
Create index.js 
npm install electron-packager --save-dev 
npm run build OR electron-packager . --all 

私は過去にelectronjsアプリケーションを作成するためにこれらの手順を使用し、起動フォルダに実行可能ファイルを配置してシステム起動時に実行しました。しかし、ポストウィンドウの更新、私はタブモードでアプリを実行しているときに発生するいくつかの問題があります。だから、私は新しいアプリを作るつもりだが、これらのコマンドは完全には機能していない。私はそれに問題がある。electronjs自動起動アプリケーションの作成中に問題を解決する

私が正確にやってみたいのは、auto-launch electron appを作成することです。私が提供した手順でエラーが発生するため、誰でも正しい手順を教えてくれますか?

ありがとうございます。

答えて

1

Steps to create electron app

コマンド:

  • のindex.html:デフォルトでは、レンダリングされたウェブページ

    npm install electron-prebuilt -g 
    

    アン電子プロジェクトは3つのファイルを必要とします。

  • 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`; 
+0

ありがとうございました! – anu

関連する問題