feat(mp): 新增 getTopBarInfo, submit

src/mp/__snapshots__/getTopBarInfo.test.ts.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getTopBarInfo 表现正常 1`] = `
+Object {
+  "menuButtonHeight": 32,
+  "menuButtonHorizontalMargin": 10,
+  "menuButtonVerticalMargin": 4,
+  "menuButtonWidth": 87,
+  "navigationBarHeight": 40,
+  "statusBarHeight": 20,
+  "topBarHeight": 60,
+}
+`;

src/mp/ensureInMiniProgram.ts

@@ -3,13 +3,13 @@ import { inMiniProgram } from '../utils'
 let $mp: ReturnType<typeof inMiniProgram> | undefined
 
 export function ensureInMiniProgram<T>(
-  cb: (mp: Exclude<typeof $mp, false | undefined>) => Promise<T>,
-): Promise<T> {
+  cb: (mp: Exclude<typeof $mp, false | undefined>) => T,
+): T {
   if ($mp === undefined) {
     $mp = inMiniProgram()
   }
   if ($mp) {
     return cb($mp)
   }
-  return Promise.reject('不在小程序环境中')
+  throw new Error('不在小程序环境中')
 }

src/mp/getTopBarInfo.test.ts

@@ -0,0 +1,53 @@
+describe('getTopBarInfo', () => {
+  const getMenuButtonBoundingClientRect: any = jest
+    .fn()
+    .mockImplementation(() => ({
+      width: 87,
+      height: 32,
+      left: 223,
+      top: 24,
+      right: 310,
+      bottom: 56,
+    }))
+  const getSystemInfoSync: any = jest.fn().mockImplementation(() => ({
+    model: 'iPhone 5',
+    pixelRatio: 2,
+    windowWidth: 320,
+    windowHeight: 520,
+    system: 'iOS 10.0.1',
+    language: 'zh_CN',
+    version: '7.0.4',
+    screenWidth: 320,
+    screenHeight: 568,
+    SDKVersion: '2.8.0',
+    brand: 'devtools',
+    fontSizeSetting: 16,
+    batteryLevel: 100,
+    statusBarHeight: 20,
+    safeArea: {
+      right: 320,
+      bottom: 568,
+      left: 0,
+      top: 20,
+      width: 320,
+      height: 548,
+    },
+    deviceOrientation: 'portrait',
+    platform: 'devtools',
+  }))
+
+  beforeAll(() => {
+    jest.mock('../utils/inMiniProgram', () => ({
+      inMiniProgram: (): Partial<WechatMiniprogram.Wx> => ({
+        getMenuButtonBoundingClientRect: getMenuButtonBoundingClientRect,
+        getSystemInfoSync: getSystemInfoSync,
+      }),
+    }))
+  })
+
+  test('表现正常', async () => {
+    const { getTopBarInfo } = await import('./getTopBarInfo')
+
+    expect(getTopBarInfo()).toMatchSnapshot()
+  })
+})

src/mp/getTopBarInfo.ts

@@ -0,0 +1,76 @@
+import { ensureInMiniProgram } from './ensureInMiniProgram'
+
+export interface GetTopBarInfoResult {
+  /**
+   * 状态栏高度。
+   */
+  statusBarHeight: number
+
+  /**
+   * 菜单按钮宽度。
+   */
+  menuButtonWidth: number
+
+  /**
+   * 菜单按钮高度。
+   */
+  menuButtonHeight: number
+
+  /**
+   * 菜单按钮垂直外边距。
+   */
+  menuButtonVerticalMargin: number
+
+  /**
+   * 菜单按钮水平外边距。
+   *
+   * **注意: QQ 小程序下该项为 0，请自行选取默认值**
+   */
+  menuButtonHorizontalMargin: number
+
+  /**
+   * 导航栏高度。
+   */
+  navigationBarHeight: number
+
+  /**
+   * 顶栏高度。
+   */
+  topBarHeight: number
+}
+
+/**
+ * 获取顶栏信息。
+ *
+ * @returns 返回获取到的顶栏信息
+ */
+export function getTopBarInfo(): GetTopBarInfoResult {
+  return ensureInMiniProgram(mp => {
+    const menuRect = mp.getMenuButtonBoundingClientRect()
+    const sysInfo = mp.getSystemInfoSync()
+
+    // 部分情况下 statusBarHeight 可能不存在或为 0，需手动计算，如：
+    // 苹果手机 iOS 版本 < 13 时下开启热点等
+    if (!sysInfo.statusBarHeight) {
+      sysInfo.statusBarHeight = sysInfo.screenHeight - sysInfo.windowHeight
+    }
+
+    const statusBarHeight = sysInfo.statusBarHeight
+    const menuButtonWidth = menuRect.width
+    const menuButtonHeight = menuRect.height
+    const menuButtonVerticalMargin = menuRect.top - statusBarHeight
+    const menuButtonHorizontalMargin = sysInfo.windowWidth - menuRect.right
+    const navigationBarHeight = menuButtonHeight + menuButtonVerticalMargin * 2
+    const topBarHeight = statusBarHeight + navigationBarHeight
+
+    return {
+      statusBarHeight,
+      menuButtonWidth,
+      menuButtonHeight,
+      menuButtonVerticalMargin,
+      menuButtonHorizontalMargin,
+      navigationBarHeight,
+      topBarHeight,
+    }
+  })
+}

src/mp/index.ts

@@ -8,7 +8,9 @@
 
 // @index(['./**/*.ts', '!./**/*.test.*'], f => `export * from '${f.path}'`)
 export * from './ensureInMiniProgram'
+export * from './getTopBarInfo'
 export * from './miniProgramConfig'
 export * from './navigatePageTo'
 export * from './redirectPageTo'
+export * from './submit'
 // @endindex

src/mp/submit.test.ts

@@ -0,0 +1,38 @@
+describe('submit', () => {
+  const showLoading: any = jest.fn()
+  const hideLoading: any = jest.fn()
+  const showToast: any = jest.fn()
+
+  beforeAll(() => {
+    jest.mock('../utils/inMiniProgram', () => ({
+      inMiniProgram: (): Partial<WechatMiniprogram.Wx> => ({
+        showLoading: showLoading,
+        hideLoading: hideLoading,
+        showToast: showToast,
+      }),
+    }))
+  })
+
+  test('表现正常', async () => {
+    const { submit } = await import('./submit')
+    const { wait } = await import('../utils')
+    const res = await submit(async _ => {
+      await _.start('加载中...')
+      await wait(500)
+      await _.fail('加载失败')
+      await _.success('加载成功')
+      return 1
+    })
+    expect(showLoading)
+      .toBeCalled()
+      .toBeCalledTimes(1)
+      .toBeCalledWith(
+        expect.objectContaining({
+          title: '加载中...',
+        }),
+      )
+    expect(showToast).toBeCalled().toBeCalledTimes(2)
+    expect(hideLoading).toBeCalled().toBeCalledTimes(3)
+    expect(res).toBe(1)
+  })
+})

src/mp/submit.ts

@@ -0,0 +1,38 @@
+import { createSubmit } from '../utils'
+import { ensureInMiniProgram } from './ensureInMiniProgram'
+
+export const submit = createSubmit({
+  start(message) {
+    ensureInMiniProgram(mp => {
+      mp.showLoading({
+        title: message,
+        mask: true,
+      })
+    })
+  },
+  fail(message, duration) {
+    ensureInMiniProgram(mp => {
+      mp.hideLoading()
+      mp.showToast({
+        title: message,
+        icon: 'none',
+        duration: duration,
+      })
+    })
+  },
+  success(message, duration) {
+    ensureInMiniProgram(mp => {
+      mp.hideLoading()
+      mp.showToast({
+        title: message,
+        icon: 'success',
+        duration: duration,
+      })
+    })
+  },
+  complete() {
+    ensureInMiniProgram(mp => {
+      mp.hideLoading()
+    })
+  },
+})