ionic3 - 与 Ionic 一起使用时,电子无法找到图像
问题描述
我正在尝试将我的代码库用于已经构建的离子项目,但是当我运行时electron .
,电子窗口打开但没有显示我在离子应用程序中显示的图像。我交叉检查了文件路径,它们是正确的。这是我的package.json
,electron.js
和index.html
文件
{
"name": "thebuisnessapp",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"electron": "electron .",
"electron dist": "electron .",
"ebuild":"node_modules/.bin/build"
},
"config": {
"ionic_copy": "./config/copy.config.js",
"ionic_sass": "./config/sass.config.js",
"ionic_bundler": "webpack",
"ionic_webpack": "./config/webpack.config.js"
},
"main": "electron/electron.js",
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@firebase/webchannel-wrapper": "^0.2.11",
"@ionic-native/core": "^4.17.0",
"@ionic-native/email-composer": "^4.18.0",
"@ionic-native/file": "^4.19.0",
"@ionic-native/file-opener": "^4.19.0",
"@ionic-native/in-app-browser": "^4.18.0",
"@ionic-native/local-notifications": "^4.17.0",
"@ionic-native/network": "^4.17.0",
"@ionic-native/social-sharing": "^4.19.0",
"@ionic-native/splash-screen": "~4.12.0",
"@ionic-native/status-bar": "^4.12.2",
"@ionic-native/stripe": "^4.17.0",
"@ionic-native/unique-device-id": "^4.17.0",
"@ionic/pro": "2.0.3",
"@ionic/storage": "2.1.3",
"angular": "^1.7.5",
"angularfire2": "^5.1.0",
"chart.js": "^2.7.2",
"cordova-android": "7.0.0",
"cordova-plugin-actionsheet": "^2.3.3",
"cordova-plugin-badge": "^0.8.8",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-email-composer": "^0.8.15",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-opener2": "^2.1.4",
"cordova-plugin-inappbrowser": "^3.0.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^3.0.0",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-local-notifications": "git+https://github.com/katzer/cordova-plugin-local-notifications.git#ios10",
"cordova-plugin-network-information": "^2.0.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-stripe": "^1.5.3",
"cordova-plugin-uniquedeviceid": "^1.3.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-socialsharing": "^5.4.4",
"cordova-sqlite-storage": "^2.4.0",
"cron": "^1.4.1",
"electron": "^4.0.2",
"electron-builder": "^20.38.5",
"es6-promise-plugin": "^4.2.2",
"firebase": "^5.5.8",
"font-awesome": "^4.7.0",
"ionic-angular": "3.9.2",
"ionic-select-searchable": "^2.10.0",
"ionicons": "3.0.0",
"moment": "^2.22.2",
"node-schedule": "^1.3.0",
"number-flip": "^1.0.28",
"pdfmake": "^0.1.40",
"promise-polyfill": "^8.1.0",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.0",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-sqlite-storage": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-actionsheet": {},
"cordova-plugin-stripe": {},
"cordova-plugin-network-information": {},
"cordova-plugin-uniquedeviceid": {},
"cordova-plugin-email-composer": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-local-notification": {},
"cordova-plugin-file-opener2": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-file": {},
"cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
}
},
"scripts": {
"build": "ng build && npm run copy:hosting && npm run build:ssr && npm run build:functions",
"copy:hosting": "cp -r ./dist/YOUR_PROJECT_NAME/* ./public && rm ./public/index.html",
"build:functions": "npm run --prefix functions build"
},
"platforms": [
"android"
],
"build": {
"appId": "com.lohanitech.ionic-electron-test",
"electronVersion": "1.6.2",
"asar": false,
"files": [
"www/**/*",
"electron/*"
]
}
} }
我的electron.js
'use strict';
const electron = require('electron');
// Module to control application life.
const {
app } = electron;
// Module to create native browser window.
const {
BrowserWindow
} = electron;
let win;
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 1024,
height: 600
});
var url = 'file://' + __dirname + '/../www/index.html';
var Args = process.argv.slice(2);
Args.forEach(function (val) {
if (val === "test") {
url = 'http://localhost:8100'
}
});
// and load the index.html of the app.
win.loadURL(url);
// Open the DevTools.
win.webContents.openDevTools();
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null;
});
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow();
}
});
对于如何让我的图像开始显示的任何帮助,我将不胜感激
解决方案
This eventually worked later on but I had to add hot reloading to my code using foreman as directed in this tutorial https://competenepal.com/ionic2-electron/ Other than adding hot reloading, I also added a build to my package.json file. It's all in the link above though. Hope it helps
推荐阅读
- javascript - 如何通过 forEach 方法使用多个节点列表
- linux - nftables 配置命令失败,操作不支持
- vue.js - Laravel mix - 更改编号 js 文件的输出目录
- python - 时间序列:预测变量何时达到某个值(季节性传感器数据)python
- r - spotfire - 尝试做 kde 或只是弯曲线
- opencv - 正方体未发现错误:
未安装或不在您的 PATH 中 - node.js - Node JS:“electron.asar”文件的电子问题
- html - 过滤功能删除过滤词
- rust - 如何为 `<&Self as IntoIterator>` 绑定 `IntoIter` 类型?
- nginx - 通过 Nginx 代理的 API 请求需要 rfc1123 日期