问题描述
我正在尝试使用电子(用于网站和桌面应用程序)和 express(用于会话等)制作网络应用程序
I'm trying to make a webapplication using electron (for the website and desktop application) and express (for sessions etc.)
现在,我把它作为我的 app.js:
Now, I got this as my app.js:
const express = require('express'); const {app, BrowserWindow} = require('electron'); exp = express(); exp.set('views', __dirname + '/views/'); exp.use(express.static(process.cwd() + '/views')); exp.get('/', function(req, res) { res.render('index', {}); }); function onAppReady() { mainWindow = new BrowserWindow({ width: 1080, height: 720, autoHideMenuBar: true, useContentSize: true, resizable: false }); mainWindow.loadURL('http://localhost:5000/'); mainWindow.focus(); mainWindow.webContents.openDevTools(); } app.on('ready', onAppReady);
现在,有几个问题:
- 如果我使用 node app.js,我会收到此错误:
- If I use node app.js, I get this error:
Line: `app.on('ready', onAppReady);` TypeError: Cannot read property 'on' of undefined at Object.<anonymous> (/home/josh/chat_program/client/app.js:26:4) at Module._compile (module.js:571:32) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.runMain (module.js:605:10) at run (bootstrap_node.js:420:7) at startup (bootstrap_node.js:139:9) at bootstrap_node.js:535:3
- 如果我使用 electron .,应用程序会启动,但我没有收到请求或网页.我得到的只是基本的 HTML,没有任何东西(只有 doctype HTML HEAD 和 BODY).
- If I use electron ., the application starts, but I don't get either a request or a webpage. All I get is basic HTML without anything (only doctype HTML HEAD and BODY).
找了半天也没找到.
推荐答案
两件事.
首先我要澄清一下你的路径设置和使用,更像这样:
First I'd clarify your pathing setup and usage, more like this:
const publicPath = path.resolve(__dirname, '/views'); // point for static assets app.use(express.static(publicPath)); //view engine setup app.set('views', path.join(__dirname, '/views/')); app.engine('html', require('ejs').renderFile); app.set('view engine', 'html');
其次,我会将我所有的 express 代码包装到一个文件中,该文件是一个自执行函数,因此它会在您需要时运行一次.比如我的快递文件,我称之为 app.js 文件:
Second, I would wrap all my express code into a single file that is a self-executing function, so it runs once when you require it. Such as my express file which I call my app.js file:
'use strict'; (function () { const express = require('express'); const path = require('path'); const logger = require('morgan'); const cookieParser = require('cookie-parser'); const bodyParser = require('body-parser'); const routes = require('./routes.js'); const app = express(); const publicPath = path.resolve(__dirname, '../dist'); const port = 3000; // point for static assets app.use(express.static(publicPath)); //view engine setup app.set('views', path.join(__dirname, '../dist')); app.engine('html', require('ejs').renderFile); app.set('view engine', 'html'); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended:true })); app.use('/', routes); app.use(cookieParser()); const server = app.listen(port, () => console.log(`Express server listening on port ${port}`)); module.exports = app; }());
然后在我的主文件(在我的例子中我称之为 main.js 而不是 app.js)中,我将应用程序和 express 服务器实例化如下:
Then in my main file (which I call main.js not app.js, in my case), I instantiate the app and the express server as follows:
'use strict'; const app = require('electron').app; const Window = require('electron').BrowserWindow; // jshint ignore:line const Tray = require('electron').Tray; // jshint ignore:line const Menu = require('electron').Menu; // jshint ignore:line const fs = require('fs'); const server = require('./ServerSide/app'); let mainWindow = null; app.on('ready', function () { const path = require('path'); const iconPath = path.resolve(__dirname, './dist/myicon.ico'); const appIcon = new Tray(iconPath); mainWindow = new Window({ width: 1280, height: 1024, autoHideMenuBar: false, useContentSize: true, resizable: true, icon: iconPath // 'node-integration': false // otherwise various client-side things may break }); appIcon.setToolTip('My Cool App'); mainWindow.loadURL('http://localhost:3000/'); // remove this for production var template = [ { label: 'View', submenu: [ { label: 'Reload', accelerator: 'CmdOrCtrl+R', click: function(item, focusedWindow) { if (focusedWindow) { focusedWindow.reload(); } } }, { label: 'Toggle Full Screen', accelerator: (function() { if (process.platform === 'darwin') { return 'Ctrl+Command+F'; } else { return 'F11'; } })(), click: function(item, focusedWindow) { if (focusedWindow) { focusedWindow.setFullScreen(!focusedWindow.isFullScreen()); } } }, { label: 'Toggle Developer Tools', accelerator: (function() { if (process.platform === 'darwin') { return 'Alt+Command+I'; } else { return 'Ctrl+Shift+I'; } })(), click: function(item, focusedWindow) { if (focusedWindow) { focusedWindow.toggleDevTools(); } } } ] } ]; const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu); mainWindow.focus(); }); // shut down all parts to app after windows all closed. app.on('window-all-closed', function () { app.quit(); });
请注意,我在 Windows 平台上成功使用了此功能,因此可能需要对本示例中列出的任何平台特定项目进行小幅调整.
Note that I am using this with success on Windows platform, so small tweaks may be needed for any platform specific items listed in this example.