電子桌面APP

我想了解如何使用Electron開發桌面應用程序。我發現指南： http://www.toptal.com/javascript/electron-cross-platform-desktop-apps-easy 電子桌面APP

但很多事情已經改變（ 'ICP' 模塊現已棄用如）現在：

這裏是我的代碼

app.js

var app = require('app'), 
     ipc = require('electron').ipcMain, 
     BrowserWindow = require('browser-window'); 

    var mainWindow = null, 
     insertWindow = null; 

    function createInsertWindow() { 
     insertWindow = new BrowserWindow({ 
      width: 640, 
      height: 480, 
      show: false 
     }); 

     insertWindow.loadURL('file://' + __dirname + '/windows/insert/insert.html'); 

     insertWindow.on('closed',function() { 
      insertWindow = null; 
     }); 

     insertWindow.show(); 
    } 

    app.on('ready', function() { 
     mainWindow = new BrowserWindow({ 
      width: 1024, 
      height: 768 
     }); 

     mainWindow.loadURL('file://' + __dirname + '/windows/main/main.html'); 
     mainWindow.openDevTools(); 

     ipc.on('toggle-insert-view', function() { 
       if(! insertWindow) { 
         createInsertWindow(); 
       } else { 
        return (insertWindow.isVisible()) ? insertWindow.hide() :  insertWindow.show(); 
       } 
      }); 
     });

main.html

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="../../bower_components/angular/angular.min.js"></script> 
    <script src="./main.view.js"></script> 


     <meta charset="utf-8"> 
     <title>Electron Desktop App</title> 
    </head> 
    <body> 
     <h1>EDA</h1> 
     <div ng-controller="MainCtrl as vm"> 
      <button toggle-insert-view class="mdl-button"> 
       add 
      </button> 
     </div> 


    </body> 
    </html>

main.view.js var ipcRenderer = require（'electron'）。ipcRenderer;

angular 
     .module('Utils', []) 
     .directive('toggleInsertView', function() { 
      return function(scope, el) { 
       el.bind('click', function(e) { 
        e.preventDefault(); 
        ipcRenderer.send('toggle-insert-view'); 
       }); 
      }; 
     });

當主窗口顯示我點擊按鈕「添加」 & &沒有什麼變化。

來源

2016-01-22 Mr.noob

你應該將ipc.on('toggle-insert-view', function...)外app.on('ready', function...)

來源

2016-04-14 09:29:52 Lawnzapper

TNX我會盡力盡快的 –

電子桌面APP

回答

相關問題