PhoneGap+Framework7如何动态设置应用起始页面？

我来帮你搞定这个动态启动页的问题！核心思路就是用本地存储记住用户的身份选择，然后在应用初始化的时候读取这个存储值，再动态加载对应的起始页面。下面分步骤给你具体实现方案：

1. 第一步：创建身份选择页面 #

首先你需要一个初始的选择页面（比如叫identity-select.html），让用户选择贡献者或普通用户，然后把选择结果存在本地存储里。示例代码大概是这样：

<!-- identity-select.html -->
<!DOCTYPE html>
<html>
<body>
  <h3>请选择你的身份</h3>
  <button onclick="setIdentity('contributor')">贡献者</button>
  <button onclick="setIdentity('user')">普通用户</button>

  <script>
    function setIdentity(identity) {
      // 把身份存在localStorage里，持久化保存
      localStorage.setItem('app_identity', identity);
      // 跳转到对应的页面或者直接让应用加载目标页
      window.location.href = identity === 'contributor' ? 'contributor-home.html' : 'user-home.html';
    }
  </script>
</body>
</html>

2. 第二步：修改应用启动逻辑 #

原来的固定启动页是<content src="index.html" />，现在你需要调整启动逻辑，先检查本地存储里有没有已保存的身份，再决定加载哪个页面：

如果是桌面应用（比如Electron） #

主进程的启动逻辑可以这么改，用electron-store来存储身份（比直接用localStorage更可靠，不会被用户误删缓存影响）：

// 主进程代码（main.js）
const { app, BrowserWindow } = require('electron');
const path = require('path');
const Store = require('electron-store');
const store = new Store();

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  const savedIdentity = store.get('app_identity');
  if (savedIdentity) {
    // 有保存的身份，直接加载对应页面
    mainWindow.loadFile(path.join(__dirname, `${savedIdentity}-home.html`));
  } else {
    // 没有选择过，加载身份选择页
    mainWindow.loadFile(path.join(__dirname, 'identity-select.html'));
  }
}

app.whenReady().then(createWindow);

如果是Web应用 #

把原来的index.html改成一个自动跳转的启动页，逻辑如下：

<!-- index.html 现在作为启动跳转页 -->
<!DOCTYPE html>
<html>
<head>
  <script>
    window.onload = function() {
      const savedIdentity = localStorage.getItem('app_identity');
      if (savedIdentity) {
        // 跳转到对应身份的首页
        window.location.href = savedIdentity === 'contributor' ? 'contributor-home.html' : 'user-home.html';
      } else {
        // 未选择过身份，跳转到选择页
        window.location.href = 'identity-select.html';
      }
    }
  </script>
</head>
<body>
  <p>正在初始化应用...</p>
</body>
</html>

3. 第三步：添加身份切换功能（可选） #

如果需要允许用户之后切换身份，可以在各个页面里加一个切换按钮，点击时清除存储的身份并跳回选择页：

function switchIdentity() {
  // 清除保存的身份
  localStorage.removeItem('app_identity');
  // 如果是Electron应用，就用 store.delete('app_identity');
  // 跳回身份选择页
  window.location.href = 'identity-select.html';
}

注意事项 #

• 本地存储（localStorage）在Web应用里是持久化的，除非用户手动清除浏览器缓存或者你主动删除；桌面应用用electron-store更稳定。
• 确保各个页面的路径配置正确，避免出现加载失败的情况。
• 可以在跳转页面添加简单的加载动画，提升用户体验。

这样就能实现用户选择身份后，下次启动自动加载对应页面的需求啦！

内容的提问来源于stack exchange，提问作者user9354171