@tarojs/taro-h5 3.3.17 → 3.4.0-beta.2

package/src/api/storage/index.ts

@@ -2,8 +2,22 @@ import Taro from '@tarojs/api'
 import { shouldBeObject, getParameterError, temporarilyNotSupport } from '../utils'
 import { MethodHandler } from '../utils/handler'
 
+function getItem (key) {
+  let item
+  try {
+    item = JSON.parse(localStorage.getItem(key) || '')
+  } catch (e) {}
+
+  // 只返回使用 Taro.setStorage API 存储的数据
+  if (item && typeof item === 'object' && item.hasOwnProperty('data')) {
+    return { result: true, data: item.data }
+  } else {
+    return { result: false }
+  }
+}
+
 // 数据缓存
-const setStorageSync: typeof Taro.setStorageSync = (key, data = '') => {
+export const setStorageSync: typeof Taro.setStorageSync = (key, data = '') => {
   if (typeof key !== 'string') {
     console.error(getParameterError({
       name: 'setStorage',
@@ -24,7 +38,7 @@ const setStorageSync: typeof Taro.setStorageSync = (key, data = '') => {
   localStorage.setItem(key, JSON.stringify(obj))
 }
 
-const setStorage: typeof Taro.setStorage = (options) => {
+export const setStorage: typeof Taro.setStorage = (options) => {
   // options must be an Object
   const isObject = shouldBeObject(options)
   if (!isObject.flag) {
@@ -50,17 +64,31 @@ const setStorage: typeof Taro.setStorage = (options) => {
   return handle.success()
 }
 
-const getStorage: typeof Taro.getStorage = <T>(options) => {
+export const revokeBufferURL = temporarilyNotSupport('revokeBufferURL')
+
+export const removeStorageSync: typeof Taro.removeStorageSync = (key: string) => {
+  if (typeof key !== 'string') {
+    console.error(getParameterError({
+      name: 'removeStorage',
+      correct: 'String',
+      wrong: key
+    }))
+    return
+  }
+
+  localStorage.removeItem(key)
+}
+
+export const removeStorage: typeof Taro.removeStorage = (options: Taro.removeStorage.Option) => {
   // options must be an Object
   const isObject = shouldBeObject(options)
   if (!isObject.flag) {
-    const res = { errMsg: `getStorage:fail ${isObject.msg}` }
+    const res = { errMsg: `removeStorage:fail ${isObject.msg}` }
     console.error(res.errMsg)
     return Promise.reject(res)
   }
-
   const { key, success, fail, complete } = options
-  const handle = new MethodHandler<Taro.getStorage.SuccessCallbackResult<T>>({ name: 'getStorage', success, fail, complete })
+  const handle = new MethodHandler({ name: 'removeStorage', success, fail, complete })
 
   if (typeof key !== 'string') {
     return handle.fail({
@@ -72,17 +100,11 @@ const getStorage: typeof Taro.getStorage = <T>(options) => {
     })
   }
 
-  const { result, data } = getItem(key)
-  if (result) {
-    return handle.success({ data })
-  } else {
-    return handle.fail({
-      errMsg: 'data not found'
-    })
-  }
+  removeStorageSync(key)
+  return handle.success()
 }
 
-const getStorageSync: typeof Taro.getStorageSync = (key) => {
+export const getStorageSync: typeof Taro.getStorageSync = (key) => {
   if (typeof key !== 'string') {
     console.error(getParameterError({
       name: 'getStorageSync',
@@ -98,21 +120,7 @@ const getStorageSync: typeof Taro.getStorageSync = (key) => {
   return ''
 }
 
-function getItem (key) {
-  let item
-  try {
-    item = JSON.parse(localStorage.getItem(key) || '')
-  } catch (e) {}
-
-  // 只返回使用 Taro.setStorage API 存储的数据
-  if (item && typeof item === 'object' && item.hasOwnProperty('data')) {
-    return { result: true, data: item.data }
-  } else {
-    return { result: false }
-  }
-}
-
-const getStorageInfoSync: typeof Taro.getStorageInfoSync = () => {
+export const getStorageInfoSync: typeof Taro.getStorageInfoSync = () => {
   const res: Taro.getStorageInfoSync.Option = {
     keys: Object.keys(localStorage),
     limitSize: NaN,
@@ -121,34 +129,22 @@ const getStorageInfoSync: typeof Taro.getStorageInfoSync = () => {
   return res
 }
 
-const getStorageInfo: typeof Taro.getStorageInfo = ({ success, fail, complete } = {}) => {
+export const getStorageInfo: typeof Taro.getStorageInfo = ({ success, fail, complete } = {}) => {
   const handle = new MethodHandler<Taro.getStorageInfo.SuccessCallbackOption>({ name: 'getStorageInfo', success, fail, complete })
   return handle.success(getStorageInfoSync())
 }
 
-const removeStorageSync: typeof Taro.removeStorageSync = (key: string) => {
-  if (typeof key !== 'string') {
-    console.error(getParameterError({
-      name: 'removeStorage',
-      correct: 'String',
-      wrong: key
-    }))
-    return
-  }
-
-  localStorage.removeItem(key)
-}
-
-const removeStorage: typeof Taro.removeStorage = (options: Taro.removeStorage.Option) => {
+export const getStorage: typeof Taro.getStorage = <T>(options) => {
   // options must be an Object
   const isObject = shouldBeObject(options)
   if (!isObject.flag) {
-    const res = { errMsg: `removeStorage:fail ${isObject.msg}` }
+    const res = { errMsg: `getStorage:fail ${isObject.msg}` }
     console.error(res.errMsg)
     return Promise.reject(res)
   }
+
   const { key, success, fail, complete } = options
-  const handle = new MethodHandler({ name: 'removeStorage', success, fail, complete })
+  const handle = new MethodHandler<Taro.getStorage.SuccessCallbackResult<T>>({ name: 'getStorage', success, fail, complete })
 
   if (typeof key !== 'string') {
     return handle.fail({
@@ -160,34 +156,26 @@ const removeStorage: typeof Taro.removeStorage = (options: Taro.removeStorage.Op
     })
   }
 
-  removeStorageSync(key)
-  return handle.success()
+  const { result, data } = getItem(key)
+  if (result) {
+    return handle.success({ data })
+  } else {
+    return handle.fail({
+      errMsg: 'data not found'
+    })
+  }
 }
 
-const clearStorage: typeof Taro.clearStorage = ({ success, fail, complete } = {}) => {
-  const handle = new MethodHandler({ name: 'clearStorage', success, fail, complete })
-  localStorage.clear()
-  return handle.success()
-}
+export const createBufferURL = temporarilyNotSupport('createBufferURL')
 
-const clearStorageSync: typeof Taro.clearStorageSync = () => {
-  clearStorage()
+export const clearStorageSync: typeof Taro.clearStorageSync = () => {
+  localStorage.clear()
 }
 
-const revokeBufferURL = temporarilyNotSupport('revokeBufferURL')
-
-export {
-  setStorageSync,
-  setStorage,
-  revokeBufferURL,
-  removeStorageSync,
-  removeStorage,
-  getStorageSync,
-  getStorageInfoSync,
-  getStorageInfo,
-  getStorage,
-  clearStorageSync,
-  clearStorage
+export const clearStorage: typeof Taro.clearStorage = ({ success, fail, complete } = {}) => {
+  const handle = new MethodHandler({ name: 'clearStorage', success, fail, complete })
+  clearStorageSync()
+  return handle.success()
 }
 
 export * from './background-fetch'

package/src/api/taro.ts

@@ -18,22 +18,7 @@ const {
   options,
   eventCenter,
   Events,
-  preload,
-  useDidShow,
-  useDidHide,
-  usePullDownRefresh,
-  useReachBottom,
-  usePageScroll,
-  useResize,
-  useShareAppMessage,
-  useTabItemTap,
-  useTitleClick,
-  useOptionMenuClick,
-  usePullIntercept,
-  useShareTimeline,
-  useAddToFavorites,
-  useReady,
-  useRouter
+  preload
 } = Taro as any
 
 const taro: typeof Taro = {
@@ -57,22 +42,7 @@ const taro: typeof Taro = {
   reLaunch,
   redirectTo,
   getCurrentPages,
-  switchTab,
-  useDidShow,
-  useDidHide,
-  usePullDownRefresh,
-  useReachBottom,
-  usePageScroll,
-  useResize,
-  useShareAppMessage,
-  useTabItemTap,
-  useTitleClick,
-  useOptionMenuClick,
-  usePullIntercept,
-  useShareTimeline,
-  useAddToFavorites,
-  useReady,
-  useRouter
+  switchTab
 }
 
 const initPxTransform = getInitPxTransform(taro)
@@ -84,6 +54,7 @@ const pxTransform = function (size) {
   const { designWidth } = taro.config
   return Math.ceil((((parseInt(size, 10) / 40) * 640) / designWidth) * 10000) / 10000 + 'rem'
 }
+
 const canIUseWebp = function () {
   const canvas = document.createElement('canvas')
   return canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0
@@ -114,20 +85,5 @@ export {
   pxTransform,
   canIUseWebp,
   history,
-  createRouter,
-  useDidShow,
-  useDidHide,
-  usePullDownRefresh,
-  useReachBottom,
-  usePageScroll,
-  useResize,
-  useShareAppMessage,
-  useTabItemTap,
-  useTitleClick,
-  useOptionMenuClick,
-  usePullIntercept,
-  useShareTimeline,
-  useAddToFavorites,
-  useReady,
-  useRouter
+  createRouter
 }

package/src/api/ui/animation/index.ts

@@ -1,3 +1,5 @@
+import Taro from '@tarojs/api'
+
 /**
  * H5 下的 styleSheet 操作
  * @author leeenx
@@ -48,15 +50,15 @@ if ($detect.style['animation-name'] === 'standard') {
   TRANSFORM = 'transform'
 } else if ($detect.style['-webkit-animation-name'] === 'webkit') {
   // webkit 前缀
-  TRANSITION_END = 'webkitTransionEnd'
+  TRANSITION_END = 'webkitTransitionEnd'
   TRANSFORM = '-webkit-transform'
 } else if ($detect.style['-moz-animation-name'] === 'moz') {
-  // webkit 前缀
-  TRANSITION_END = 'mozTransionEnd'
+  // moz 前缀
+  TRANSITION_END = 'mozTransitionEnd'
   TRANSFORM = '-moz-transform'
 } else if ($detect.style['-ms-animation-name'] === 'ms') {
-  // webkit 前缀
-  TRANSITION_END = 'MSTransionEnd'
+  // ms 前缀
+  TRANSITION_END = 'msTransitionEnd'
   TRANSFORM = '-ms-transform'
 }
 
@@ -69,8 +71,7 @@ interface IAnimationAttr {
   transformOrigin: string
 }
 
-// Animation 类
-class Animation {
+class Animation implements Taro.Animation {
   unit: string
   id: number
   DEFAULT: IAnimationAttr
@@ -82,7 +83,7 @@ class Animation {
       timingFunction = 'linear',
       transformOrigin = '50% 50% 0',
       unit = 'px'
-    } = {}
+    }: Taro.createAnimation.Option = {}
   ) {
     // 默认值
     this.setDefault(duration, delay, timingFunction, transformOrigin)
@@ -108,7 +109,7 @@ class Animation {
         const animStepsCount = this.animationMap[`${animName}__${animIndex}`]
         const animStepsMaxIndex = animStepsCount - 1
         if (stepIndex < animStepsMaxIndex) {
-          // 播放下一个关键帧（因为 nevr 和 react 有差异所以 animation & data-animation 都需要写）
+          // 播放下一个关键帧（因为 nerv 和 react 有差异所以 animation & data-animation 都需要写）
           target.setAttribute(animAttr, `${animName}__${animIndex}--${stepIndex + 1}`)
           if (animAttr === 'animation') {
             // Nerv 环境，animation & data-animation 双重保险
@@ -142,23 +143,28 @@ class Animation {
   animationMap = {}
   // animationMap 的长度
   animationMapCount = 0
-  matrix (a, b, c, d, e, f) {
-    this.transform.push(`matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`)
+
+  matrix (a: number, b: number, c: number, d: number, tx: number, ty: number) {
+    this.transform.push(`matrix(${a}, ${b}, ${c}, ${d}, ${tx}, ${ty})`)
     return this
   }
 
-  matrix3d (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) {
+  matrix3d (a1: number, b1: number, c1: number, d1: number, a2: number, b2: number, c2: number, d2: number, a3: number, b3: number, c3: number, d3: number, a4: number, b4: number, c4: number, d4: number) {
     this.transform.push(`matrix3d(${a1}, ${b1}, ${c1}, ${d1}, ${a2}, ${b2}, ${c2}, ${d2}, ${a3}, ${b3}, ${c3}, ${d3}, ${a4}, ${b4}, ${c4}, ${d4})`)
     return this
   }
 
-  rotate (angle) {
+  rotate (angle: number) {
     this.transform.push(`rotate(${angle}deg)`)
     return this
   }
 
-  rotate3d (x, y, z, angle) {
-    this.transform.push(`rotate3d(${x}, ${y}, ${z}, ${angle}deg)`)
+  rotate3d (x: number, y?: number, z?: number, angle?: number) {
+    if (typeof y !== 'number') {
+      this.transform.push(`rotate3d(${x})`)
+    } else {
+      this.transform.push(`rotate3d(${x}, ${y || 0}, ${z || 0}, ${angle || 0}deg)`)
+    }
     return this
   }
 
@@ -318,7 +324,7 @@ class Animation {
     // 清空 rules 和 transform
     this.rules = []
     this.transform = [`${TRANSFORM}:`]
-    return this
+    return this as Taro.Animation
   }
 
   // 创建底层数据
@@ -341,13 +347,11 @@ class Animation {
 
   // 动画数据产出
   export () {
-    return this.createAnimationData()
+    return this.createAnimationData() as unknown as ReturnType<Taro.Animation['export']>
   }
 }
 
 // h5 的 createAnimation
-function createAnimation (...arg) {
-  return new Animation(...arg)
+export const createAnimation: typeof Taro.createAnimation = (option) => {
+  return new Animation(option)
 }
-
-export { createAnimation }

package/src/api/ui/interaction/index.ts

@@ -24,14 +24,15 @@ const toast = new Toast()
 const modal = new Modal()
 const actionSheet = new ActionSheet()
 
-const showToast: typeof Taro.showToast = (options = {
-  title: '',
-  icon: 'success',
-  image: '',
-  duration: 1500,
-  mask: false
-}) => {
+const showToast: typeof Taro.showToast = (options = { title: '' }) => {
   init(document)
+  options = Object.assign({
+    title: '',
+    icon: 'success',
+    image: '',
+    duration: 1500,
+    mask: false
+  }, options)
   const { success, fail, complete } = options
   const handle = new MethodHandler({ name: 'showToast', success, fail, complete })
 
@@ -75,11 +76,12 @@ const hideToast: typeof Taro.hideToast = ({ success, fail, complete } = {}) => {
   return handle.success()
 }
 
-const showLoading: typeof Taro.showLoading = (options = {
-  title: '',
-  mask: false
-}) => {
+const showLoading: typeof Taro.showLoading = (options = { title: '' }) => {
   init(document)
+  options = Object.assign({
+    title: '',
+    mask: false
+  }, options)
   const { success, fail, complete } = options
   const handle = new MethodHandler({ name: 'showLoading', success, fail, complete })
 
@@ -119,16 +121,17 @@ const hideLoading: typeof Taro.hideLoading = ({ success, fail, complete } = {})
   return handle.success()
 }
 
-const showModal: typeof Taro.showModal = async (options = {
-  title: '',
-  content: '',
-  showCancel: true,
-  cancelText: '取消',
-  cancelColor: '#000000',
-  confirmText: '确定',
-  confirmColor: '#3CC51F'
-}) => {
+const showModal: typeof Taro.showModal = async (options = {}) => {
   init(document)
+  options = Object.assign({
+    title: '',
+    content: '',
+    showCancel: true,
+    cancelText: '取消',
+    cancelColor: '#000000',
+    confirmText: '确定',
+    confirmColor: '#3CC51F'
+  }, options)
   const { success, fail, complete } = options
   const handle = new MethodHandler({ name: 'showModal', success, fail, complete })
 
@@ -220,11 +223,12 @@ function hideModal () {
   modal.hide()
 }
 
-const showActionSheet: typeof Taro.showActionSheet = async (options = {
-  itemColor: '#000000',
-  itemList: []
-}) => {
+const showActionSheet: typeof Taro.showActionSheet = async (options = { itemList: [] }) => {
   init(document)
+  options = Object.assign({
+    itemColor: '#000000',
+    itemList: []
+  }, options)
   const { success, fail, complete } = options
   const handle = new MethodHandler<Taro.showActionSheet.SuccessCallbackResult>({ name: 'showActionSheet', success, fail, complete })
 

package/src/api/ui/pull-down-refresh.ts

@@ -3,7 +3,7 @@ import { MethodHandler } from '../utils/handler'
 /**
  * 开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
  */
-const startPullDownRefresh: typeof Taro.startPullDownRefresh = function ({ success, fail, complete } = {}) {
+export const startPullDownRefresh: typeof Taro.startPullDownRefresh = function ({ success, fail, complete } = {}) {
   const handle = new MethodHandler({ name: 'startPullDownRefresh', success, fail, complete })
   return new Promise((resolve, reject) => {
     Taro.eventCenter.trigger('__taroStartPullDownRefresh', {
@@ -16,7 +16,7 @@ const startPullDownRefresh: typeof Taro.startPullDownRefresh = function ({ succe
 /**
  * 停止当前页面下拉刷新。
  */
-const stopPullDownRefresh: typeof Taro.stopPullDownRefresh = function ({ success, fail, complete } = {}) {
+export const stopPullDownRefresh: typeof Taro.stopPullDownRefresh = function ({ success, fail, complete } = {}) {
   const handle = new MethodHandler({ name: 'stopPullDownRefresh', success, fail, complete })
   return new Promise((resolve, reject) => {
     Taro.eventCenter.trigger('__taroStopPullDownRefresh', {
@@ -25,8 +25,3 @@ const stopPullDownRefresh: typeof Taro.stopPullDownRefresh = function ({ success
     })
   })
 }
-
-export {
-  startPullDownRefresh,
-  stopPullDownRefresh
-}

package/src/api/ui/scroll/index.ts

@@ -1,16 +1,17 @@
 import Taro from '@tarojs/api'
+import { Current } from '@tarojs/runtime'
 
 import { MethodHandler } from '../../utils/handler'
 import { getTimingFunc, easeInOut } from '../../utils'
 
-let scrollFunc
-let timer: NodeJS.Timeout
+let timer: number
 const FRAME_DURATION = 17
 
 /**
  * 将页面滚动到目标位置
  */
 export const pageScrollTo: typeof Taro.pageScrollTo = ({ scrollTop, selector = '', duration = 300, success, fail, complete }) => {
+  let scrollFunc
   const handle = new MethodHandler({ name: 'pageScrollTo', success, fail, complete })
   return new Promise((resolve, reject) => {
     try {
@@ -20,17 +21,14 @@ export const pageScrollTo: typeof Taro.pageScrollTo = ({ scrollTop, selector = '
         }, reject)
       }
 
-      let el
-      if (document.querySelector('.taro-tabbar__tabbar') === null) {
-        // 没设置tabbar
-        el = window
-      } else {
-        // 有设置tabbar
-        el = document.querySelector('.taro-tabbar__panel') || window
-      }
+      const id = Current.page?.path
+      const el: HTMLDivElement | null = (id
+        ? document.getElementById(id)
+        : document.querySelector('.taro_page') ||
+      document.querySelector('.taro_router')) as HTMLDivElement
 
       if (!scrollFunc) {
-        if (el === window) {
+        if (!el) {
           scrollFunc = pos => {
             if (pos === undefined) {
               return window.pageYOffset

package/src/api/utils/index.ts

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-promise-reject-errors */
 import { Current, container, SERVICE_IDENTIFIER, IHooks, TaroElement } from '@tarojs/runtime'
 
-function shouldBeObject (target: unknown) {
+export function shouldBeObject (target: unknown) {
   if (target && typeof target === 'object') return { flag: true }
   return {
     flag: false,
@@ -43,7 +43,7 @@ interface IParameterErrorParam {
   correct?: string
   wrong?: unknown
 }
-function getParameterError ({ name = '', para, correct, wrong }: IParameterErrorParam) {
+export function getParameterError ({ name = '', para, correct, wrong }: IParameterErrorParam) {
   const parameter = para ? `parameter.${para}` : 'parameter'
   const errorType = upperCaseFirstLetter(wrong === null ? 'Null' : typeof wrong)
   if (name) {
@@ -59,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;'
@@ -68,16 +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 serializeParams (params) {
+export function serializeParams (params) {
   if (!params) {
     return ''
   }
@@ -89,7 +85,7 @@ function serializeParams (params) {
     .join('&')
 }
 
-function temporarilyNotSupport (apiName) {
+export function temporarilyNotSupport (apiName) {
   return () => {
     const errMsg = `暂时不支持 API ${apiName}`
     console.error(errMsg)
@@ -99,7 +95,7 @@ function temporarilyNotSupport (apiName) {
   }
 }
 
-function weixinCorpSupport (apiName) {
+export function weixinCorpSupport (apiName) {
   return () => {
     const errMsg = `h5端仅在微信公众号中支持 API ${apiName}`
     console.error(errMsg)
@@ -109,7 +105,7 @@ function weixinCorpSupport (apiName) {
   }
 }
 
-function permanentlyNotSupport (apiName) {
+export function permanentlyNotSupport (apiName) {
   return () => {
     const errMsg = `不支持 API ${apiName}`
     console.error(errMsg)
@@ -119,13 +115,17 @@ function permanentlyNotSupport (apiName) {
   }
 }
 
+export function isFunction (obj) {
+  return typeof obj === 'function'
+}
+
 const VALID_COLOR_REG = /^#[0-9a-fA-F]{6}$/
 
-const isValidColor = (color) => {
+export const isValidColor = (color) => {
   return VALID_COLOR_REG.test(color)
 }
 
-function processOpenApi (apiName: string, defaultOptions?: Record<string, unknown>, 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)
@@ -154,11 +154,11 @@ function processOpenApi (apiName: string, defaultOptions?: Record<string, unknow
 
 /**
  * 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)
@@ -167,19 +167,3 @@ const getTimingFunc = (easeFunc, frameCnt) => {
     return easeFunc(t)
   }
 }
-
-export {
-  shouldBeObject,
-  getParameterError,
-  inlineStyle,
-  setTransform,
-  serializeParams,
-  temporarilyNotSupport,
-  weixinCorpSupport,
-  permanentlyNotSupport,
-  isValidColor,
-  isFunction,
-  processOpenApi,
-  easeInOut,
-  getTimingFunc
-}