@tarojs/taro-h5 3.4.0-beta.0 → 3.4.0-beta.1

package/src/api/ui/tab-bar.ts

@@ -0,0 +1,326 @@
+import Taro, { AppConfig } from '@tarojs/api'
+import { shouldBeObject, getParameterError, isValidColor } from '../utils'
+import { MethodHandler } from '../utils/handler'
+
+let tabConf
+
+export function initTabBarApis (config: AppConfig = {}) {
+  tabConf = config.tabBar
+}
+
+/**
+ * 显示 tabBar 某一项的右上角的红点
+ */
+export const showTabBarRedDot: typeof Taro.showTabBarRedDot = (options) => {
+  // options must be an Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `showTabBarRedDot:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+
+  const {
+    index,
+    success,
+    fail,
+    complete
+  } = options
+  const handle = new MethodHandler({ name: 'showTabBarRedDot', success, fail, complete })
+
+  if (typeof index !== 'number') {
+    return handle.fail({
+      errMsg: getParameterError({
+        para: 'index',
+        correct: 'Number',
+        wrong: index
+      })
+    })
+  }
+
+  return new Promise((resolve, reject) => {
+    Taro.eventCenter.trigger('__taroShowTabBarRedDotHandler', {
+      index,
+      successHandler: (res = {}) => handle.success(res, resolve as any),
+      errorHandler: (res = {}) => handle.fail(res, reject as any)
+    })
+  })
+}
+
+/**
+ * 显示 tabBar
+ */
+export const showTabBar: typeof Taro.showTabBar = (options = {}) => {
+  // options must be an Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `showTabBar:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+
+  const { animation, success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'showTabBar', success, fail, complete })
+
+  if (options.hasOwnProperty('animation') && typeof animation !== 'boolean') {
+    return handle.fail({
+      errMsg: getParameterError({
+        para: 'animation',
+        correct: 'Boolean',
+        wrong: animation
+      })
+    })
+  }
+
+  return new Promise((resolve, reject) => {
+    Taro.eventCenter.trigger('__taroShowTabBar', {
+      animation,
+      successHandler: (res = {}) => handle.success(res, resolve as any),
+      errorHandler: (res = {}) => handle.fail(res, reject as any)
+    })
+  })
+}
+
+/**
+ * 动态设置 tabBar 的整体样式
+ */
+export const setTabBarStyle: typeof Taro.setTabBarStyle = (options = {}) => {
+  // options must be an Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `setTabBarStyle:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+
+  const { color, selectedColor, backgroundColor, borderStyle, success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'setTabBarStyle', success, fail, complete })
+
+  let errMsg
+  if (color && !isValidColor(color)) {
+    errMsg = 'color'
+  } else if (selectedColor && !isValidColor(selectedColor)) {
+    errMsg = 'selectedColor'
+  } else if (backgroundColor && !isValidColor(backgroundColor)) {
+    errMsg = 'backgroundColor'
+  } else if (borderStyle && !/^(black|white)$/.test(borderStyle)) {
+    errMsg = 'borderStyle'
+  }
+
+  if (errMsg) {
+    return handle.fail({ errMsg: `invalid ${errMsg}` })
+  }
+
+  if (!tabConf) {
+    return handle.fail()
+  }
+
+  const obj: Taro.setTabBarStyle.Option = {}
+  if (color) obj.color = color
+  if (selectedColor) obj.selectedColor = selectedColor
+  if (backgroundColor) obj.backgroundColor = backgroundColor
+  if (borderStyle) obj.borderStyle = borderStyle
+
+  return new Promise((resolve, reject) => {
+    Taro.eventCenter.trigger('__taroSetTabBarStyle', {
+      color,
+      selectedColor,
+      backgroundColor,
+      borderStyle,
+      successHandler: (res = {}) => handle.success(res, resolve as any),
+      errorHandler: (res = {}) => handle.fail(res, reject as any)
+    })
+  })
+}
+
+/**
+ * 动态设置 tabBar 某一项的内容
+ */
+export const setTabBarItem: typeof Taro.setTabBarItem = (options) => {
+  // options must be an Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `setTabBarItem:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+
+  const {
+    index,
+    text,
+    iconPath,
+    selectedIconPath,
+    success,
+    fail,
+    complete
+  } = options
+  const handle = new MethodHandler({ name: 'setTabBarItem', success, fail, complete })
+
+  if (typeof index !== 'number') {
+    return handle.fail({
+      errMsg: getParameterError({
+        para: 'index',
+        correct: 'Number',
+        wrong: index
+      })
+    })
+  }
+
+  return new Promise((resolve, reject) => {
+    Taro.eventCenter.trigger('__taroSetTabBarItem', {
+      index,
+      text,
+      iconPath,
+      selectedIconPath,
+      successHandler: (res = {}) => handle.success(res, resolve as any),
+      errorHandler: (res = {}) => handle.fail(res, reject as any)
+    })
+  })
+}
+
+/**
+ * 为 tabBar 某一项的右上角添加文本
+ */
+export const setTabBarBadge: typeof Taro.setTabBarBadge = (options) => {
+  // options must be an Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `setTabBarBadge:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+
+  const { index, text, success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'setTabBarBadge', success, fail, complete })
+
+  if (typeof index !== 'number') {
+    return handle.fail({
+      errMsg: getParameterError({
+        para: 'index',
+        correct: 'Number',
+        wrong: index
+      })
+    })
+  }
+
+  if (typeof text !== 'string') {
+    return handle.fail({
+      errMsg: getParameterError({
+        para: 'text',
+        correct: 'String',
+        wrong: text
+      })
+    })
+  }
+
+  return new Promise((resolve, reject) => {
+    Taro.eventCenter.trigger('__taroSetTabBarBadge', {
+      index,
+      text,
+      successHandler: (res = {}) => handle.success(res, resolve as any),
+      errorHandler: (res = {}) => handle.fail(res, reject as any)
+    })
+  })
+}
+
+/**
+ * 移除 tabBar 某一项右上角的文本
+ */
+export const removeTabBarBadge: typeof Taro.removeTabBarBadge = (options) => {
+  // options must be an Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `removeTabBarBadge:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+
+  const { index, success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'removeTabBarBadge', success, fail, complete })
+
+  if (typeof index !== 'number') {
+    return handle.fail({
+      errMsg: getParameterError({
+        para: 'index',
+        correct: 'Number',
+        wrong: index
+      })
+    })
+  }
+
+  return new Promise((resolve, reject) => {
+    Taro.eventCenter.trigger('__taroRemoveTabBarBadge', {
+      index,
+      successHandler: (res = {}) => handle.success(res, resolve as any),
+      errorHandler: (res = {}) => handle.fail(res, reject as any)
+    })
+  })
+}
+
+/**
+ * 隐藏 tabBar 某一项的右上角的红点
+ */
+export const hideTabBarRedDot: typeof Taro.hideTabBarRedDot = (options) => {
+  // options must be an Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `hideTabBarRedDot:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+
+  const { index, success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'hideTabBarRedDot', success, fail, complete })
+
+  if (typeof index !== 'number') {
+    return handle.fail({
+      errMsg: getParameterError({
+        para: 'index',
+        correct: 'Number',
+        wrong: index
+      })
+    })
+  }
+
+  return new Promise((resolve, reject) => {
+    Taro.eventCenter.trigger('__taroHideTabBarRedDotHandler', {
+      index,
+      successHandler: (res = {}) => handle.success(res, resolve as any),
+      errorHandler: (res = {}) => handle.fail(res, reject as any)
+    })
+  })
+}
+
+/**
+ * 隐藏 tabBar
+ */
+export const hideTabBar: typeof Taro.hideTabBar = (options = {}) => {
+  // options must be an Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `hideTabBar:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+
+  const { animation, success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'hideTabBar', success, fail, complete })
+
+  if (options.hasOwnProperty('animation') && typeof animation !== 'boolean') {
+    return handle.fail({
+      errMsg: getParameterError({
+        para: 'animation',
+        correct: 'Boolean',
+        wrong: animation
+      })
+    })
+  }
+
+  return new Promise((resolve, reject) => {
+    Taro.eventCenter.trigger('__taroHideTabBar', {
+      animation,
+      successHandler: (res = {}) => handle.success(res, resolve as any),
+      errorHandler: (res = {}) => handle.fail(res, reject as any)
+    })
+  })
+}

package/src/api/ui/window.ts

@@ -0,0 +1,37 @@
+import Taro from '@tarojs/api'
+import { temporarilyNotSupport } from '../utils'
+import { CallbackManager } from '../utils/handler'
+
+const callbackManager = new CallbackManager()
+
+const resizeListener = () => {
+  callbackManager.trigger({
+    windowWidth: window.screen.width,
+    windowHeight: window.screen.height
+  })
+}
+
+/**
+ * 设置窗口大小，该接口仅适用于 PC 平台，使用细则请参见指南
+ */
+export const setWindowSize = temporarilyNotSupport('setWindowSize')
+
+/**
+ * 监听窗口尺寸变化事件
+ */
+export const onWindowResize: typeof Taro.onWindowResize = callback => {
+  callbackManager.add(callback)
+  if (callbackManager.count() === 1) {
+    window.addEventListener('resize', resizeListener)
+  }
+}
+
+/**
+ * 取消监听窗口尺寸变化事件
+ */
+export const offWindowResize: typeof Taro.offWindowResize = callback => {
+  callbackManager.remove(callback)
+  if (callbackManager.count() === 0) {
+    window.removeEventListener('resize', resizeListener)
+  }
+}

package/src/api/utils/handler.ts

@@ -0,0 +1,105 @@
+type TCallback<T = Partial<TaroGeneral.CallbackResult>> = (res: T) => Promise<void> | void
+interface IMethodParam<T = Partial<TaroGeneral.CallbackResult>> {
+  name: string
+  success?: TCallback<T>
+  fail?: TCallback
+  complete?: TCallback
+}
+
+export class MethodHandler<T = Partial<TaroGeneral.CallbackResult>> {
+  methodName: string
+
+  protected __success?: TCallback<T>
+  protected __fail?: TCallback
+  protected __complete?: TCallback
+
+  constructor ({ name, success, fail, complete }: IMethodParam<T>) {
+    this.methodName = name
+    this.__success = success
+    this.__fail = fail
+    this.__complete = complete
+  }
+
+  success<U = Record<string, unknown>> (res: Partial<T> & Partial<TaroGeneral.CallbackResult> = {}, resolve = Promise.resolve.bind(Promise)): Promise<T & U & TaroGeneral.CallbackResult> {
+    if (!res.errMsg) {
+      res.errMsg = `${this.methodName}:ok`
+    }
+    typeof this.__success === 'function' && this.__success(res as T)
+    typeof this.__complete === 'function' && this.__complete(res)
+    return resolve(res as Required<T & U & TaroGeneral.CallbackResult>)
+  }
+
+  fail<U = Record<string, unknown>> (res: Partial<T> & Partial<TaroGeneral.CallbackResult> = {}, reject = Promise.reject.bind(Promise)): Promise<T & U & TaroGeneral.CallbackResult> {
+    if (!res.errMsg) {
+      res.errMsg = `${this.methodName}:fail`
+    } else {
+      res.errMsg = `${this.methodName}:fail ${res.errMsg}`
+    }
+    console.error(res.errMsg)
+    typeof this.__fail === 'function' && this.__fail(res)
+    typeof this.__complete === 'function' && this.__complete(res)
+    return reject(res)
+  }
+}
+
+type TCallbackManagerParam = (...arr: unknown[]) => void
+interface ICallbackManagerOption {
+  callback?: TCallbackManagerParam
+  ctx?: any
+  [key: string]: unknown
+}
+type TCallbackManagerListItem = (TCallbackManagerParam | ICallbackManagerOption)
+type TCallbackManagerList = TCallbackManagerListItem[]
+
+export class CallbackManager {
+  callbacks: TCallbackManagerList = []
+
+  /**
+   * 添加回调
+   * @param {{ callback: function, ctx: any } | function} opt
+   */
+  add (opt?: TCallbackManagerListItem) {
+    if (opt) this.callbacks.push(opt)
+  }
+
+  /**
+   * 移除回调
+   * @param {{ callback: function, ctx: any } | function} opt
+   */
+  remove (opt?: TCallbackManagerListItem) {
+    if (opt) {
+      let pos = -1
+      this.callbacks.forEach((callback, k) => {
+        if (callback === opt) {
+          pos = k
+        }
+      })
+      if (pos > -1) {
+        this.callbacks.splice(pos, 1)
+      }
+    }
+  }
+
+  /**
+   * 获取回调函数数量
+   * @return {number}
+   */
+  count () {
+    return this.callbacks.length
+  }
+
+  /**
+   * 触发回调
+   * @param  {...any} args 回调的调用参数
+   */
+  trigger (...args: TCallbackManagerList) {
+    this.callbacks.forEach(opt => {
+      if (typeof opt === 'function') {
+        opt(...args)
+      } else {
+        const { callback, ctx } = opt
+        typeof callback === 'function' && callback.call(ctx, ...args)
+      }
+    })
+  }
+}

package/src/api/utils/{index.js → index.ts}

@@ -1,10 +1,10 @@
 /* eslint-disable prefer-promise-reject-errors */
-import { Current, container, SERVICE_IDENTIFIER } from '@tarojs/runtime'
+import { Current, container, SERVICE_IDENTIFIER, IHooks, TaroElement } from '@tarojs/runtime'
 
-function shouldBeObject (target) {
-  if (target && typeof target === 'object') return { res: true }
+export function shouldBeObject (target: unknown) {
+  if (target && typeof target === 'object') return { flag: true }
   return {
-    res: false,
+    flag: false,
     msg: getParameterError({
       correct: 'Object',
       wrong: target
@@ -12,8 +12,8 @@ function shouldBeObject (target) {
   }
 }
 
-export function findDOM (inst) {
-  const runtimeHooks = container.get(SERVICE_IDENTIFIER.Hooks)
+export function findDOM (inst): TaroElement | HTMLElement | undefined {
+  const runtimeHooks = container.get<IHooks>(SERVICE_IDENTIFIER.Hooks)
 
   if (inst) {
     const find = runtimeHooks.getDOMNode
@@ -23,7 +23,7 @@ export function findDOM (inst) {
   }
 
   const page = Current.page
-  const path = page.path
+  const path = page?.path
   const msg = '没有找到已经加载了的页面，请在页面加载完成后时候此 API。'
   if (path == null) {
     throw new Error(msg)
@@ -37,10 +37,20 @@ export function findDOM (inst) {
   return el
 }
 
-function getParameterError ({ name = '', para, correct, wrong }) {
+interface IParameterErrorParam {
+  name?: string
+  para?: string
+  correct?: string
+  wrong?: unknown
+}
+export function getParameterError ({ name = '', para, correct, wrong }: IParameterErrorParam) {
   const parameter = para ? `parameter.${para}` : 'parameter'
   const errorType = upperCaseFirstLetter(wrong === null ? 'Null' : typeof wrong)
-  return `${name}:fail parameter error: ${parameter} should be ${correct} instead of ${errorType}`
+  if (name) {
+    return `${name}:fail parameter error: ${parameter} should be ${correct} instead of ${errorType}`
+  } else {
+    return `parameter error: ${parameter} should be ${correct} instead of ${errorType}`
+  }
 }
 
 function upperCaseFirstLetter (string) {
@@ -49,7 +59,7 @@ function upperCaseFirstLetter (string) {
   return string
 }
 
-function inlineStyle (style) {
+export function inlineStyle (style) {
   let res = ''
   for (const attr in style) res += `${attr}: ${style[attr]};`
   if (res.indexOf('display: flex;') >= 0) res += 'display: -webkit-box;display: -webkit-flex;'
@@ -58,32 +68,12 @@ function inlineStyle (style) {
   return res
 }
 
-function setTransform (el, val) {
+export function setTransform (el, val) {
   el.style.webkitTransform = val
   el.style.transform = val
 }
 
-function isFunction (obj) {
-  return typeof obj === 'function'
-}
-
-function successHandler (success, complete) {
-  return function (res) {
-    isFunction(success) && success(res)
-    isFunction(complete) && complete(res)
-    return Promise.resolve(res)
-  }
-}
-
-function errorHandler (fail, complete) {
-  return function (res) {
-    isFunction(fail) && fail(res)
-    isFunction(complete) && complete(res)
-    return Promise.reject(res)
-  }
-}
-
-function serializeParams (params) {
+export function serializeParams (params) {
   if (!params) {
     return ''
   }
@@ -95,7 +85,7 @@ function serializeParams (params) {
     .join('&')
 }
 
-function temporarilyNotSupport (apiName) {
+export function temporarilyNotSupport (apiName) {
   return () => {
     const errMsg = `暂时不支持 API ${apiName}`
     console.error(errMsg)
@@ -105,7 +95,7 @@ function temporarilyNotSupport (apiName) {
   }
 }
 
-function weixinCorpSupport (apiName) {
+export function weixinCorpSupport (apiName) {
   return () => {
     const errMsg = `h5端仅在微信公众号中支持 API ${apiName}`
     console.error(errMsg)
@@ -115,7 +105,7 @@ function weixinCorpSupport (apiName) {
   }
 }
 
-function permanentlyNotSupport (apiName) {
+export function permanentlyNotSupport (apiName) {
   return () => {
     const errMsg = `不支持 API ${apiName}`
     console.error(errMsg)
@@ -125,69 +115,18 @@ function permanentlyNotSupport (apiName) {
   }
 }
 
-const VALID_COLOR_REG = /^#[0-9a-fA-F]{6}$/
-
-const isValidColor = (color) => {
-  return VALID_COLOR_REG.test(color)
+export function isFunction (obj) {
+  return typeof obj === 'function'
 }
 
-const createCallbackManager = () => {
-  const callbacks = []
-
-  /**
-   * 添加回调
-   * @param {{ callback: function, ctx: any } | function} opt
-   */
-  const add = (opt) => {
-    callbacks.push(opt)
-  }
-
-  /**
-   * 移除回调
-   * @param {{ callback: function, ctx: any } | function} opt
-   */
-  const remove = (opt) => {
-    let pos = -1
-    callbacks.forEach((callback, k) => {
-      if (callback === opt) {
-        pos = k
-      }
-    })
-    if (pos > -1) {
-      callbacks.splice(pos, 1)
-    }
-  }
-
-  /**
-   * 获取回调函数数量
-   * @return {number}
-   */
-  const count = () => callbacks.length
-
-  /**
-   * 触发回调
-   * @param  {...any} args 回调的调用参数
-   */
-  const trigger = (...args) => {
-    callbacks.forEach(opt => {
-      if (typeof opt === 'function') {
-        opt(...args)
-      } else {
-        const { callback, ctx } = opt
-        callback.call(ctx, ...args)
-      }
-    })
-  }
+const VALID_COLOR_REG = /^#[0-9a-fA-F]{6}$/
 
-  return {
-    add,
-    remove,
-    count,
-    trigger
-  }
+export const isValidColor = (color) => {
+  return VALID_COLOR_REG.test(color)
 }
 
-function processOpenapi (apiName, defaultOptions, formatResult = res => res, formatParams = options => options) {
+export function processOpenApi (apiName: string, defaultOptions?: Record<string, unknown>, formatResult = res => res, formatParams = options => options) {
+  // @ts-ignore
   if (!window.wx) {
     return weixinCorpSupport(apiName)
   }
@@ -206,6 +145,7 @@ function processOpenapi (apiName, defaultOptions, formatResult = res => res, for
           }
         }
       })
+      // @ts-ignore
       wx[apiName](formatParams(obj))
     })
     return p
@@ -214,11 +154,11 @@ function processOpenapi (apiName, defaultOptions, formatResult = res => res, for
 
 /**
  * ease-in-out的函数
- * @param {number} t 0-1的数字
+ * @param t 0-1的数字
  */
-const easeInOut = t => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
+export const easeInOut = (t: number) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
 
-const getTimingFunc = (easeFunc, frameCnt) => {
+export const getTimingFunc = (easeFunc, frameCnt) => {
   return x => {
     if (frameCnt <= 1) {
       return easeFunc(1)
@@ -227,22 +167,3 @@ const getTimingFunc = (easeFunc, frameCnt) => {
     return easeFunc(t)
   }
 }
-
-export {
-  shouldBeObject,
-  getParameterError,
-  inlineStyle,
-  setTransform,
-  successHandler,
-  errorHandler,
-  serializeParams,
-  temporarilyNotSupport,
-  weixinCorpSupport,
-  permanentlyNotSupport,
-  isValidColor,
-  isFunction,
-  createCallbackManager,
-  processOpenapi,
-  easeInOut,
-  getTimingFunc
-}