@open-wxa/wxa-runner-core 0.2.0 → 0.2.1

package/dist/runtime/host.js

@@ -236,6 +236,14 @@
   };
   function createMiscApis(appid, options) {
     const fs = new MemoryFileSystem();
+    const realLogin = async (api, url) => {
+      try {
+        return await postDevServer(url);
+      } catch (error) {
+        options?.onRealLoginFail?.(api, error.message);
+        throw error;
+      }
+    };
     const guard = (api, action) => {
       try {
         return ok(api, action() || {});
@@ -285,9 +293,9 @@
       operateWXData: (args, { api }) => args.data?.api_name === "webapi_getwxanetwork" ? bizDomainUnavailable(api) : ok(api),
       getAppContact: (args, { api }) => args.keyPath === "WxaAppInfo.Network.BizDomain" ? bizDomainUnavailable(api) : ok(api),
       // 真实登录失败时明确返回 fail，不退回假数据：配置或登录态的问题要让开发者马上发现
-      login: options?.realLogin ? async (_args, { api }) => ok(api, { code: (await postDevServer("/__wxa__/api/login")).code }) : (_args, { api }) => ok(api, { code: `wxa_mock_code_${Date.now().toString(36)}` }),
+      login: options?.realLogin ? async (_args, { api }) => ok(api, { code: (await realLogin(api, "/__wxa__/api/login")).code }) : (_args, { api }) => ok(api, { code: `wxa_mock_code_${Date.now().toString(36)}` }),
       // 基础库只从 JSON.parse(data) 里取手机号的 code
-      getPhoneNumber: options?.realLogin ? async (_args, { api }) => ok(api, await postDevServer("/__wxa__/api/phone-number")) : (_args, { api }) => ok(api, { data: JSON.stringify({ code: `mock_phone_code_${Date.now()}` }), encryptedData: "mock_encrypted", iv: "mock_iv" }),
+      getPhoneNumber: options?.realLogin ? async (_args, { api }) => ok(api, await realLogin(api, "/__wxa__/api/phone-number")) : (_args, { api }) => ok(api, { data: JSON.stringify({ code: `mock_phone_code_${Date.now()}` }), encryptedData: "mock_encrypted", iv: "mock_iv" }),
       checkSession: () => void 0,
       authorize: () => void 0,
       getSetting: (_args, { api }) => ok(api, {
@@ -1404,7 +1412,14 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
 .wxa-toolbar button { border: 0; background: #111214; color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
 .wxa-toolbar .wxa-scale { min-width: 52px; background: #fff; color: #333; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); font-variant-numeric: tabular-nums; }
 .wxa-route { font-family: Menlo, monospace; }
+.wxa-notice { position: fixed; top: 16px; right: 16px; z-index: 100; display: flex; align-items: flex-start; gap: 10px; width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 12px 10px 12px 14px; box-sizing: border-box; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 12px 32px -8px rgba(15,23,42,.28); font-size: 13px; line-height: 20px; color: #555; animation: wxa-notice-in .18s ease-out; }
+.wxa-notice-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #fa5151; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
+.wxa-notice-text { flex: 1; min-width: 0; word-break: break-word; text-wrap: pretty; }
+.wxa-notice-title { font-weight: 600; color: #111214; }
+.wxa-notice-close { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: #999; font-size: 16px; line-height: 20px; cursor: pointer; }
+.wxa-notice-close:hover { background: rgba(0,0,0,.06); color: #111214; }
 @keyframes wxa-spin { to { transform: rotate(360deg); } }
+@keyframes wxa-notice-in { from { opacity: 0; transform: translateY(-8px); } }
 `;
 
   // src/runtime/host/ui/Picker.ts
@@ -1493,6 +1508,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
   // src/runtime/host/ui/PhoneShell.ts
   var SCALE_STORAGE_KEY = "wxa-runner:scale";
   var MIN_SCALE = 0.5;
+  var NOTICE_DURATION = 6e3;
   function loadScaleMode() {
     try {
       const saved = localStorage.getItem(SCALE_STORAGE_KEY);
@@ -1507,6 +1523,8 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       this.scaleMode = loadScaleMode();
       this.toastEl = null;
       this.toastTimer = null;
+      this.noticeEl = null;
+      this.noticeTimer = null;
       this.tabBarConfig = null;
       this.onTabTap = () => void 0;
       this.navigation = { title: "", backgroundColor: "#000", textStyle: "white", showBack: false, custom: false };
@@ -1542,6 +1560,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
           <span class="wxa-route"></span><button class="wxa-scale"></button><button class="wxa-reload">\u5237\u65B0</button>
         </div>
       </div>`;
+      this.stage = root.querySelector(".wxa-stage");
       this.slot = root.querySelector(".wxa-device-slot");
       this.device = root.querySelector(".wxa-device");
       this.toolbar = root.querySelector(".wxa-toolbar");
@@ -1771,6 +1790,30 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     showImagePreview(urls, current) {
       openImagePreview(this.overlay, urls, current);
     }
+    /**
+     * 在手机外面提示 wxa-runner 自身的问题（如真实登录失败），不混进小程序的界面。
+     * 同一时间只显示一条，新的替换旧的：业务代码反复重试时不会堆满屏幕
+     */
+    showNotice(title, message) {
+      this.hideNotice();
+      const notice = element("div", "wxa-notice");
+      notice.setAttribute("role", "alert");
+      const text = element("div", "wxa-notice-text");
+      text.append(element("div", "wxa-notice-title", title), element("div", "wxa-notice-message", message));
+      const close = element("button", "wxa-notice-close", "\xD7");
+      close.setAttribute("aria-label", "\u5173\u95ED");
+      close.addEventListener("click", () => this.hideNotice());
+      notice.append(element("span", "wxa-notice-icon", "!"), text, close);
+      this.stage.appendChild(notice);
+      this.noticeEl = notice;
+      this.noticeTimer = setTimeout(() => this.hideNotice(), NOTICE_DURATION);
+    }
+    hideNotice() {
+      if (this.noticeTimer) clearTimeout(this.noticeTimer);
+      this.noticeTimer = null;
+      this.noticeEl?.remove();
+      this.noticeEl = null;
+    }
     showError(message) {
       this.clearError();
       const el = element("div", "wxa-error", message);
@@ -2154,7 +2197,10 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
           documentOf: (webviewId) => this.pages.get(webviewId)?.win?.document,
           emitToWebview: (webviewId, event, data) => this.emitToWebview(webviewId, event, data)
         }),
-        ...createMiscApis(this.info.appid, { realLogin: this.info.realLogin })
+        ...createMiscApis(this.info.appid, {
+          realLogin: this.info.realLogin,
+          onRealLoginFail: (api, reason2) => this.shell.showNotice(`wx.${api} \u771F\u5B9E\u767B\u5F55\u5931\u8D25`, reason2)
+        })
       });
     }
   };