我正在尝试使用电子(用于网站和桌面应用程序)和表达(用于会话等)进行Web应用程序
现在,我把它作为我的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);
现在,有一些问题:
>如果我使用节点app.js,我收到此错误:
行:app.on(‘ready’,onAppReady);
TypeError:无法读取未定义的属性’on’
在对象. (/home/josh/chat_program/client/app.js:26:4)
在Module._compile(module.js:571:32)
at Object.Module._extensions..js(module.js:580:10)
在Module.load(module.js:488:32)
在tryModuleLoad(module.js:447:12)
在Function.Module._load(module.js:439:3)
在Module.runMain(module.js:605:10)
在运行时(bootstrap_node.js:420:7)
在启动时(bootstrap_node.js:139:9)
在bootstrap_node.js:535:3
>如果我使用电子.应用程序启动,但我没有得到请求或网页.我得到的只是没有任何东西的基本HTML(只有doctype HTML HEAD和BODY).
我搜索了很长时间但找不到任何东西.
解决方法:
两件事情.
首先,我将澄清您的路径设置和用法,更像是这样的:
var 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');
其次,我将所有快速代码包装到一个自动执行函数的文件中,因此在需要时它会运行一次.比如我调用app.js文件的express文件:
(function () { 'use strict'; var express = require('express'); var path = require('path'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var routes = require('./routes.js'); var app = express(); var publicPath = path.resolve(__dirname, '../dist'); var 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()); var server = app.listen(port, function () { console.log('Express server listening on port ' + server.address().port); }); module.exports = app;}());
然后在我的主文件(我称之为main.js而不是app.js,在我的情况下),我实例化应用程序和快速服务器,如下所示:
var app = require('electron').app; var Window = require('electron').BrowserWindow; // jshint ignore:line var Tray = require('electron').Tray; // jshint ignore:line var Menu = require('electron').Menu; // jshint ignore:line var fs = require('fs'); var server = require('./ServerSide/app'); var mainWindow = null; app.on('ready', function () { 'use strict'; var path = require('path'); var 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(); } } }, ] } ]; var 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 () { 'use strict'; app.quit();});
请注意,我在Windows平台上成功使用此功能,因此本示例中列出的任何平台特定项目可能需要进行小的调整.
实用工具: JSON字符串格式化 | js压缩代码格式化工具 | 异步XMLHttpRequests库axios.js文档 | vue-axios文档 | Go语言文档