feat(navigatePageTo): 在页面真正切换后 Promise 才会被 resolve

fjc0k · Sep 17, 2020 · 35a5721 · 35a5721
1 parent f792c9a
commit 35a5721
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 31 deletions.
diff --git a/src/mp/navigatePageTo.test.ts b/src/mp/navigatePageTo.test.ts
@@ -27,6 +27,17 @@ describe('navigatePageTo', () => {
         switchTab: switchTab,
       }),
     }))
+    jest.mock(
+      './miniProgramBus',
+      () =>
+        ({
+          miniProgramBus: {
+            once: (name, cb) => {
+              cb()
+            },
+          },
+        } as typeof import('./miniProgramBus')),
+    )
   })
 
   afterEach(() => {

diff --git a/src/mp/navigatePageTo.ts b/src/mp/navigatePageTo.ts
@@ -2,10 +2,13 @@ import { AnyObject } from '../types'
 import { createUrlQueryString, isUrl } from '../utils'
 import { ensureInMiniProgram } from './ensureInMiniProgram'
 import { getMiniProgramConfig } from './miniProgramConfig'
+import { miniProgramBus } from './miniProgramBus'
 
 /**
  * 跳转至某个页面，跳转失败时会尝试切换到 Tab 页。
  *
+ * **注意：在页面真正切换后 Promise 才会被 resolve，因而此时的页面上下文已经是新页面。**
+ *
  * @param url 要跳转去的页面地址
  * @param query 查询参数
  * @param redirect 是否关闭当前页面后跳转
@@ -15,41 +18,63 @@ export function navigatePageTo(
   query?: AnyObject,
   redirect?: boolean,
 ): Promise<any> {
-  return ensureInMiniProgram(mp => {
-    if (isUrl(url)) {
-      const { webUrlToMiniProgramUrl } = getMiniProgramConfig()
-      if (typeof webUrlToMiniProgramUrl === 'function') {
-        url = webUrlToMiniProgramUrl(url)
-      }
+  let routeChanged: boolean
+  let routeChangeResolve: AnyFunction
+  const offRouteChange = miniProgramBus.once('routeChange', () => {
+    if (routeChangeResolve) {
+      routeChangeResolve()
+    } else {
+      routeChanged = true
     }
-    if (query && typeof query === 'object') {
-      const queryString = createUrlQueryString(query)
-      if (queryString) {
-        url += (url.indexOf('?') > -1 ? '&' : '?') + queryString
+  })
+  return new Promise((resolve, reject) => {
+    ensureInMiniProgram(mp => {
+      if (isUrl(url)) {
+        const { webUrlToMiniProgramUrl } = getMiniProgramConfig()
+        if (typeof webUrlToMiniProgramUrl === 'function') {
+          url = webUrlToMiniProgramUrl(url)
+        }
       }
-    }
-    const switchTab = () =>
-      new Promise((resolve, reject) => {
-        mp.switchTab({
-          url: url,
-          success: resolve,
-          fail: reject,
+      if (query && typeof query === 'object') {
+        const queryString = createUrlQueryString(query)
+        if (queryString) {
+          url += (url.indexOf('?') > -1 ? '&' : '?') + queryString
+        }
+      }
+      const switchTab = () =>
+        new Promise((resolve, reject) => {
+          mp.switchTab({
+            url: url,
+            success: resolve,
+            fail: reject,
+          })
         })
-      })
-    const navigateTo = () =>
-      new Promise((resolve, reject) => {
-        ;(redirect
-          ? ((mp.redirectTo as any) as typeof mp.navigateTo)
-          : mp.navigateTo)({
-          url: url,
-          success: resolve,
-          fail: reject,
+      const navigateTo = () =>
+        new Promise((resolve, reject) => {
+          ;(redirect
+            ? ((mp.redirectTo as any) as typeof mp.navigateTo)
+            : mp.navigateTo)({
+            url: url,
+            success: resolve,
+            fail: reject,
+          })
         })
+      // 支付宝下 navigateTo、redirectTo 也能跳转到 Tab 页并不会报错，只是不会显示 Tab 栏
+      if (mp.$brand === '支付宝') {
+        return switchTab().catch(navigateTo)
+      }
+      return navigateTo().catch(switchTab)
+    })
+      .then(() => {
+        if (routeChanged) {
+          resolve()
+        } else {
+          routeChangeResolve = resolve
+        }
+      })
+      .catch(() => {
+        offRouteChange()
+        reject()
       })
-    // 支付宝下 navigateTo、redirectTo 也能跳转到 Tab 页并不会报错，只是不会显示 Tab 栏
-    if (mp.$brand === '支付宝') {
-      return switchTab().catch(navigateTo)
-    }
-    return navigateTo().catch(switchTab)
   })
 }