Как экспортировать электронное приложение для использования в браузере - PullRequest
0 голосов
/ 12 апреля 2020

Я хочу создать свое первое электронное приложение. Цель - открыть, изменить и сохранить файл. С помощью быстрого запуска я создал приложение, которое работает.

Это мой главный. js

const { app, BrowserWindow, dialog } = require('electron')
const path = require('path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('index.html')

  mainWindow.webContents.openDevTools()
}
app.whenReady().then(createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

Это мой индекс. html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title!</title>
  </head>
  <body>
        <div>
            <textarea id="content-editor" style="width:100%;height:500px"></textarea>
            <input type="button" id="save-changes" value="Save changes"/>
        </div>
    <script src="./renderer.js"></script>
  </body>
</html>

Это моя предварительная загрузка. js

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
        const element = document.getElementById(selector)
        if (element)
            element.innerText = text
    }

    for (const type of ['chrome', 'node', 'electron']) {
        replaceText(`${type}-version`, process.versions[type])
    }

    const remote = require('electron').remote;
    const app = remote.app;
    const fs = require('fs');
    var dialog = remote.dialog;
    var filetoupdate = './configuration/config.json'
    readFile(filetoupdate);

    document.getElementById('save-changes').addEventListener('click', function () {
        console.log('save-file');
        saveChanges(filetoupdate);

    }, false);

    function readFile(filepath) {
        console.log('readFile ..');
        fs.readFile(filepath, 'utf-8', function (err, data) {
            if (err) {
                alert("An error ocurred reading the file :" + err.message);
                return;
            }

            document.getElementById("content-editor").value = data;
        });
    }

    function saveChanges(filepath, content) {
        var content = document.getElementById("content-editor").value;
        console.log('ssavechanged ..');
        console.log(filepath);
        console.log(content);
        fs.writeFile(filepath, content, function (err) {
            if (err) {
                alert("An error ocurred updating the file" + err.message);
                console.log(err);
                return;
            }

            alert("The file has been succesfully saved");
        });
    }})

Мой рендер. js пуст.

Если я запускаю npm start, все в порядке. Файл, который я хочу отредактировать (в настоящее время жестко запрограммирован), загружен, и я могу его изменить. Но когда я открываю индекс. html в браузере, мой файл не загружается. Я не вижу ошибки.

Что я делаю не так

1 Ответ

0 голосов
/ 13 апреля 2020

Две вещи:

1) Открытие index.html в Google Chrome или другом браузере не загрузит остальную часть вашего приложения. Скрипт preload.js выполняется Electron. Чтобы добавить прослушиватели событий и прочее в DOM вашего HTML, вам необходимо загрузить содержимое preload.js в виде сценария, как если бы вы работали с обычной интерфейсной разработкой (например, с тегом <script/>. * 1007). *

2) Даже если вы выполните вышеуказанное решение, приложение все равно не сможет работать в браузере. Вы используете fs NodeJS API, который недоступен ни в одной среде браузера. (В целом, предоставление веб-сайту произвольного доступа к диску представляет большую угрозу безопасности.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...