如何使用Electron和React

如何解决如何使用Electron和React

我正在使用React开发一个Web应用程序，并希望分发使用Electron框架构建的客户端。 用户将可以更改他的服务器URL，所以我希望可以修改配置文件，在该文件中设置后端URL，以允许客户端收听它。

在使用Electron之前，我首先在公用文件夹中创建了一个config.js文件，如下所示：

config = {
    "BACKEND_URL": "http://localhost:3000"
}

然后在我的index.html中添加一个标签以指向此脚本。在我的React组件中，我使用window.config.BACKEND_URL来获取服务器URL。

是否有实用的解决方案对捆绑的Electron应用程序执行类似的操作？预先感谢

解决方法

我建议secure-electron-template用于您的应用程序吗？它有一个现有的store，可以安全地管理键/值对文件中的变量。

可以通过这种方式使用库，这可以在任何react组件中完成。否则，模板将内置电子商店中的读写示例：

读取值

import { readConfigRequest,readConfigResponse } from "secure-electron-store";

// ...

window.api.store.onReceive(readConfigResponse,function(args){
    if (args.success){
         console.log(`Received '${args.key}:${args.value}' from file.`);
    }    
});
window.api.store.send(readConfigRequest,"myvalue");

写入值

import { writeConfigRequest } from "secure-electron-store";

// ...

window.api.store.send(writeConfigRequest,"myvalue","14");

我是图书馆的作者

,

像所有应用程序一样，将这些配置变量存储在application data目录中。

const getAppDataPath = () => {
    switch (process.platform) {
        case 'darwin': {
          return path.join(process.env.HOME,'Library','Application Support','xxx.json')
        }
        case 'win32': {
          return path.join(process.env.APPDATA,'xxx.json')
        }
        case 'linux': {
          return path.join(process.env.HOME,'xxx.json')
        }
        default: {
          console.log('Unsupported platform')
          process.exit(1)
        }
      }
}

const appDataPath = getAppDataPath();
if (!fs.existsSync(appDataPath)) {
  fs.writeFileSync(appDataPath,JSON.stringify({config: "....."}))
}

// read
const {config} = JSON.parse(fs.readFileSync(appDataPath).toString());

,

将所有配置保存在文件中。

---

1：检查文件是否已经存在，如果不使用默认数据创建文件

2：阅读

3：需要一些面板进行更新

Saving files locally with electron

或者是这样的：electron-json-config