最初のelectronプロジェクトの作成

11490 ワード

必要書類
package.json main.jsページファイル
package
パッケージファイルには主にプロジェクトの構成が配置されています(コマンドnpm initを使用して作成できます).
main

//   electron  
var electron = require('electron');

//            
var app = electron.app;

//          
var BrowserWindow = electron.BrowserWindow;
//         ，     ，          window   
var mainWindow;
//       ready     ，       
app.on('ready', function() {
    //        。
    mainWindow = new BrowserWindow({
        width:400,
        height: 200,
    });
    //    example     index.html，             mainWindow.loadURL('file://'+__dirname+'/start.html');
});

マスターノートをもう1つ置く方法

var app = require('app');  //            。

var BrowserWindow = require('browser-window');  //             


//        window        ，  ，  JavaScript   GC，
// window        
var mainWindow = null;
//  npapi
app.commandLine.appendSwitch('--enable-npapi');
//   Electron                     
//         
app.on('ready', function() {

  //        。
  mainWindow = new BrowserWindow({
    'width': 1080, 
    'height': 1920,
    'frame':false,
    'fullscreen':true,
      'kiosk':true,//    ，      
    'web-preferences':{
        'plugins':true
    }
});

    //       
  mainWindow.openDevTools();
  //       index.html
  mainWindow.loadUrl('file://' + __dirname + '/app/start.html');
});

開始ページ
上にindexが指定されているからです.htmlでindexを作成します.htmlファイル


<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!title>
  head>
  <body>
    <h1>Hello World!h1>
    We are using node <script>document.write(process.versions.node)script>,
    Chrome <script>document.write(process.versions.chrome)script>,
    and Electron <script>document.write(process.versions.electron)script>.
  body>
html>

アプリケーションの開始
electronモジュールをグローバルにインストール

npm install electron -g

packageでjsonに"scripts": {"start": "electron ."} packageを追加する.jsonファイルは以下の通りです

{ "name": "dianchaji",
  "version": "1.0.0",
  "description": "fangfang",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  }

使用命令取付npm install使用命令運転npm start梱包する
コマンドnpm install --save-dev electron-packager electron-packagerを使用するインストールパッケージに必要なモジュールのインストールが完了するとpackageが表示される.jsonファイルに何行か追加されました

{
  "name": "dianchaji",
  "version": "1.0.0",
  "description": "fangfang",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "chenyidong",
  "license": "ISC",
  "devDependencies": {
    "electron-packager": "^10.1.0"
  }
}

そしてパッケージングを行います
まずプロジェクトのルートディレクトリの下にあるpackage.jsonにコードを追加し、

"packager": "electron-packager ../dapaidang dapaidang --platform=win32 --out app --arch x64 --version 1.0.0 --electron-version 1.7.9 --overwrite"

フォーマットは次のとおりです.

electron-packager <location of project> <name of project> <platform> --out <    > <architecture> <    > <electron-version>

コマンド説明:*location of project:プロジェクトの所在経路*name of project:パッケージされたプロジェクト名*platform:どのプラットフォームを構築するアプリケーション(Windows、Mac、Linux)を決定します.*architecture:x 86を使用するかx 64を使用するか、または両方のアーキテクチャを使用するかを決定します*electron version:electronのバージョン*optional options:オプションでコマンドを使用します.

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ npm run packager

Windowsの使用

npm set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

コンパイルを実行します

apache alias構成がエラーになりやすい場所

dockerはbusyboxのみを起動でき、高度なコンテナは起動できません.CentOS 6はカーネルをアップグレードします.