Electron create a first launch page

Question

我想知道如何制作一个只显示一次然后再也不显示的页面，或者在初次启动时像Visual Studio代码一样使“不再显示我”复选框。

Answer 1

You could use localStorage :

//Place this code in your electron app's initialisation
if (localStorage.getItem("showStartUpWindow") == "No")  {
    //Show main window
} else {
    //Show startup window and wait until the "OK" button is clicked
    if (doNotShowStartUpWindowCheckBox.checked) {
        localStorage.setItem("showStartUpWindow", "No");
    }
}

Answer 2

The problem using localStorage

the problem is that when the application is deleted the data stored using localStorage can continue to persist

C:\Users\%USERNAME%\AppData\Roaming\Atom

contains localDB, indexedDB and a few other cache things

use some other way of persisting data

I think you can persist in the data in a JSON file or any configuration file text, in this case, create a json file(in any path)

javascript

const electron = require('electron');
const path = require('path');
const fs = require('fs');

class Store {
constructor(opts) {
    // Renderer process has to get `app` module via `remote`, whereas the main process can get it directly
    // app.getPath('userData') will return a string of the user's app data directory path.
    const userDataPath = (electron.app || electron.remote.app).getPath('userData');
    // We'll use the `configName` property to set the file name and path.join to bring it all together as a string
    this.path = path.join(userDataPath, opts.configName + '.json');

    this.data = parseDataFile(this.path, opts.defaults);
}

// This will just return the property on the `data` object
get(key) {
    return this.data[key];
}

// ...and this will set it
set(key, val) {
    this.data[key] = val;
    // Wait, I thought using the node.js' synchronous APIs was bad form?
    // We're not writing a server so there's not nearly the same IO demand on the process
    // Also if we used an async API and our app was quit before the asynchronous write had a chance to complete,
    // we might lose that data. Note that in a real app, we would try/catch this.
    fs.writeFileSync(this.path, JSON.stringify(this.data));
}
}

function parseDataFile(filePath, defaults) {
// We'll try/catch it in case the file doesn't exist yet, which will be the case on the first application run.
// `fs.readFileSync` will return a JSON string which we then parse into a Javascript object
try {
    return JSON.parse(fs.readFileSync(filePath));
} catch(error) {
    // if there was some kind of error, return the passed in defaults instead.
    return defaults;
}
}

// expose the class
module.exports = Store;

the file is created for the first time and there if it could be validated if this value exists in the configuration file

javascript

const { app, BrowserWindow } = require('electron');
const path = require('path');
const Store = require('./store.js');
let mainWindow; //do this so that the window object doesn't get GC'd

// First instantiate the class
const store = new Store({
  configName: 'user-preferences',
  defaults: {
    initialLaunch: true
  }
});

and get that value and process it

let { initialLaunch } = store.get('initialLaunch');
if(initialLaunch){
  //show initial config window
}else{
  //show other window
}