feat: add wechat miniprogram webview login

miniprogram/app.json

@@ -15,6 +15,7 @@
     "uploadFile": 60000,
     "downloadFile": 60000
   },
+  "permission": {},
   "style": "v2",
   "sitemapLocation": "sitemap.json"
 }

miniprogram/config.js

@@ -3,6 +3,16 @@
 // 注意：必须是 https 域名，不能是 localhost、IP 地址或未备案域名。
 const WEB_VIEW_ENTRY_URL = 'https://dev.genarrative.world/';
 
+// 中文注释：这里填写 Rust api-server 的公网 HTTPS 域名，必须在“小程序后台-开发设置-request 合法域名”中配置。
+// 如果 H5 和 API 同域，可保持和 WEB_VIEW_ENTRY_URL 同一个域名；请求路径会固定走 /api/auth/wechat/miniprogram-login。
+const API_BASE_URL = 'https://dev.genarrative.world/';
+
+// 中文注释：这里填写微信小程序 AppID，用于后端记录会话来源；project.config.json 里的 appid 也要保持一致。
+const MINI_PROGRAM_APP_ID = 'wx3da23ea14ca66b65';
+
+// 中文注释：按当前上传版本填写 develop / trial / release，后端会写入会话来源快照。
+const MINI_PROGRAM_ENV = 'develop';
+
 // 中文注释：给 H5 加一个来源标记，便于后续前端或后端识别这是微信小程序 web-view 宿主。
 const WEB_VIEW_SOURCE_QUERY = {
   clientType: 'mini_program',
@@ -10,6 +20,9 @@ const WEB_VIEW_SOURCE_QUERY = {
 };
 
 module.exports = {
+  API_BASE_URL,
+  MINI_PROGRAM_APP_ID,
+  MINI_PROGRAM_ENV,
   WEB_VIEW_ENTRY_URL,
   WEB_VIEW_SOURCE_QUERY,
 };

miniprogram/pages/web-view/index.js

@@ -1,10 +1,28 @@
-const { WEB_VIEW_ENTRY_URL, WEB_VIEW_SOURCE_QUERY } = require('../../config');
+const {
+  API_BASE_URL,
+  MINI_PROGRAM_APP_ID,
+  MINI_PROGRAM_ENV,
+  WEB_VIEW_ENTRY_URL,
+  WEB_VIEW_SOURCE_QUERY,
+} = require('../../config');
+
+const MINI_PROGRAM_CLIENT_TYPE = 'mini_program';
+const MINI_PROGRAM_CLIENT_RUNTIME = 'wechat_mini_program';
+const CLIENT_INSTANCE_STORAGE_KEY = 'genarrative:mini-program-client-instance-id';
 
 function isConfiguredEntryUrl(value) {
   const trimmed = String(value || '').trim();
   return /^https:\/\/[^/]+/i.test(trimmed);
 }
 
+function trimTrailingSlash(value) {
+  return String(value || '').trim().replace(/\/+$/u, '');
+}
+
+function isConfiguredApiBaseUrl(value) {
+  return /^https:\/\/[^/]+/i.test(String(value || '').trim());
+}
+
 function appendQuery(url, query) {
   const pairs = Object.keys(query)
     .filter((key) => query[key])
@@ -20,25 +38,188 @@ function appendQuery(url, query) {
   return `${url}${url.includes('?') ? '&' : '?'}${pairs.join('&')}`;
 }
 
-function resolveWebViewUrl() {
+function appendHashParams(url, params) {
+  const pairs = Object.keys(params)
+    .filter((key) => params[key])
+    .map(
+      (key) =>
+        `${encodeURIComponent(key)}=${encodeURIComponent(String(params[key]))}`,
+    );
+  if (pairs.length === 0) {
+    return url;
+  }
+
+  const hashIndex = url.indexOf('#');
+  const baseUrl = hashIndex >= 0 ? url.slice(0, hashIndex) : url;
+  const rawHash = hashIndex >= 0 ? url.slice(hashIndex + 1) : '';
+  const separator = rawHash ? '&' : '';
+  return `${baseUrl}#${rawHash}${separator}${pairs.join('&')}`;
+}
+
+function resolveWebViewUrl(authResult) {
   const entryUrl = String(WEB_VIEW_ENTRY_URL || '').trim();
   if (!isConfiguredEntryUrl(entryUrl)) {
     return '';
   }
 
-  return appendQuery(entryUrl, WEB_VIEW_SOURCE_QUERY);
+  const sourcedUrl = appendQuery(entryUrl, WEB_VIEW_SOURCE_QUERY);
+  if (!authResult || !authResult.token) {
+    return sourcedUrl;
+  }
+
+  return appendHashParams(sourcedUrl, {
+    auth_provider: 'wechat',
+    auth_token: authResult.token,
+    auth_binding_status: authResult.bindingStatus,
+  });
+}
+
+function getClientInstanceId() {
+  const stored = wx.getStorageSync(CLIENT_INSTANCE_STORAGE_KEY);
+  if (stored) {
+    return String(stored);
+  }
+
+  const nextId = `wxmp_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
+  wx.setStorageSync(CLIENT_INSTANCE_STORAGE_KEY, nextId);
+  return nextId;
+}
+
+function resolveClientPlatform() {
+  const info = wx.getSystemInfoSync();
+  const platform = String(info.platform || '').toLowerCase();
+  if (platform === 'ios') {
+    return 'ios';
+  }
+  if (platform === 'android') {
+    return 'android';
+  }
+  return 'unknown';
+}
+
+function wxLogin() {
+  return new Promise((resolve, reject) => {
+    wx.login({
+      success(result) {
+        if (result.code) {
+          resolve(result.code);
+          return;
+        }
+        reject(new Error('微信登录未返回 code'));
+      },
+      fail(error) {
+        reject(new Error(error.errMsg || '微信登录失败'));
+      },
+    });
+  });
+}
+
+function requestMiniProgramLogin(code) {
+  return new Promise((resolve, reject) => {
+    const apiBaseUrl = trimTrailingSlash(API_BASE_URL);
+    if (!isConfiguredApiBaseUrl(apiBaseUrl)) {
+      reject(new Error('请先配置 API_BASE_URL'));
+      return;
+    }
+
+    wx.request({
+      url: `${apiBaseUrl}/api/auth/wechat/miniprogram-login`,
+      method: 'POST',
+      data: { code },
+      header: {
+        'content-type': 'application/json',
+        'x-client-type': MINI_PROGRAM_CLIENT_TYPE,
+        'x-client-runtime': MINI_PROGRAM_CLIENT_RUNTIME,
+        'x-client-platform': resolveClientPlatform(),
+        'x-client-instance-id': getClientInstanceId(),
+        'x-mini-program-app-id': MINI_PROGRAM_APP_ID,
+        'x-mini-program-env': MINI_PROGRAM_ENV,
+      },
+      success(response) {
+        if (response.statusCode >= 200 && response.statusCode < 300) {
+          resolve(response.data);
+          return;
+        }
+        const message =
+          response.data &&
+          response.data.error &&
+          response.data.error.message
+            ? response.data.error.message
+            : `微信登录失败：${response.statusCode}`;
+        reject(new Error(message));
+      },
+      fail(error) {
+        reject(new Error(error.errMsg || '微信登录请求失败'));
+      },
+    });
+  });
+}
+
+async function resolveAuthResult() {
+  const code = await wxLogin();
+  const response = await requestMiniProgramLogin(code);
+  if (!response || !response.token) {
+    throw new Error('服务器未返回登录态');
+  }
+  return {
+    token: response.token,
+    bindingStatus: response.bindingStatus || 'pending_bind_phone',
+  };
 }
 
 Page({
   data: {
+    errorMessage: '',
+    loading: true,
     webViewUrl: '',
   },
 
-  onLoad() {
+  async onLoad() {
     // 中文注释：web-view 只能打开已配置业务域名；未配置时展示本地提示，避免空白页误判。
+    if (!isConfiguredEntryUrl(WEB_VIEW_ENTRY_URL)) {
+      this.setData({
+        errorMessage: '请先在 miniprogram/config.js 填写 WEB_VIEW_ENTRY_URL。',
+        loading: false,
+        webViewUrl: '',
+      });
+      return;
+    }
+
+    if (!isConfiguredApiBaseUrl(API_BASE_URL)) {
+      this.setData({
+        errorMessage: '请先在 miniprogram/config.js 填写 API_BASE_URL。',
+        loading: false,
+        webViewUrl: '',
+      });
+      return;
+    }
+
+    try {
+      const authResult = await resolveAuthResult();
+      this.setData({
+        errorMessage: '',
+        loading: false,
+        webViewUrl: resolveWebViewUrl(authResult),
+      });
+    } catch (error) {
+      this.setData({
+        errorMessage:
+          error && error.message
+            ? error.message
+            : '微信登录失败，请稍后重试。',
+        loading: false,
+        webViewUrl: '',
+      });
+    }
+  },
+
+  handleRetryLogin() {
     this.setData({
-      webViewUrl: resolveWebViewUrl(),
+      errorMessage: '',
+      loading: true,
+      webViewUrl: '',
     });
+    this.onLoad();
   },
 
   handleWebViewLoad(event) {

miniprogram/pages/web-view/index.wxml

@@ -7,9 +7,16 @@
   />
 </block>
 
-<view wx:else class="setup-screen">
+<view wx:elif="{{loading}}" class="setup-screen">
   <view class="setup-card">
-    <view class="setup-title">需要配置 H5 入口</view>
-    <view class="setup-text">请先在 miniprogram/config.js 填写 WEB_VIEW_ENTRY_URL。</view>
+    <view class="setup-title">正在登录</view>
+  </view>
+</view>
+
+<view wx:else class="setup-screen">
+  <view class="setup-card">
+    <view class="setup-title">无法进入</view>
+    <view class="setup-text">{{errorMessage}}</view>
+    <button class="retry-button" bindtap="handleRetryLogin">重试</button>
   </view>
 </view>

miniprogram/pages/web-view/index.wxss

@@ -31,3 +31,13 @@
   line-height: 1.55;
   color: rgba(245, 247, 251, 0.72);
 }
+
+.retry-button {
+  margin-top: 28rpx;
+  width: 100%;
+  border-radius: 8rpx;
+  background: #f5f7fb;
+  color: #0b0f14;
+  font-size: 28rpx;
+  line-height: 2.6;
+}