@tarojs/taro-h5 3.4.5 → 3.5.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/taro-h5",
-  "version": "3.4.5",
+  "version": "3.5.0-alpha.0",
   "description": "Taro h5 framework",
   "main:h5": "dist/index.js",
   "main": "dist/index.cjs.js",
@@ -12,15 +12,14 @@
   ],
   "sideEffects": false,
   "scripts": {
+    "copy:assets": "copy src/**/*.css dist",
+    "build": "rollup -c && npm run copy:assets && tsc",
+    "predev": "npm run copy:assets",
+    "dev": "tsc -w",
     "test": "jest",
     "test:ci": "jest -i --coverage false",
     "test:dev": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "copy:assets": "copy src/**/*.css dist",
-    "build": "rollup -c && tsc",
-    "dev": "tsc -w",
-    "prebuild": "npm run copy:assets",
-    "predev": "npm run copy:assets"
+    "test:coverage": "jest --coverage"
   },
   "repository": {
     "type": "git",
@@ -32,15 +31,15 @@
   "author": "O2Team",
   "license": "MIT",
   "dependencies": {
-    "@tarojs/api": "3.4.5",
-    "@tarojs/router": "3.4.5",
-    "@tarojs/runtime": "3.4.5",
-    "@tarojs/taro": "3.4.5",
+    "@tarojs/api": "3.5.0-alpha.0",
+    "@tarojs/router": "3.5.0-alpha.0",
+    "@tarojs/runtime": "3.5.0-alpha.0",
+    "@tarojs/taro": "3.5.0-alpha.0",
     "base64-js": "^1.3.0",
     "jsonp-retry": "^1.0.3",
     "mobile-detect": "^1.4.2",
     "query-string": "^7.1.1",
     "whatwg-fetch": "^3.4.0"
   },
-  "gitHead": "789e873f7b9477124b44a900cd4f6a2810e4e06a"
+  "gitHead": "8b2acf55c5f98e54bb2788a723a2ef0e0a1b75b6"
 }

package/src/api/device/accelerometer.ts

@@ -1,4 +1,5 @@
 import Taro from '@tarojs/api'
+import { throttle } from '../utils'
 import { CallbackManager, MethodHandler } from '../utils/handler'
 
 const callbackManager = new CallbackManager()
@@ -34,22 +35,6 @@ const INTERVAL_MAP = {
   }
 }
 
-const getDevicemotionListener = interval => {
-  let lock
-  let timer
-  return evt => {
-    if (lock) return
-    lock = true
-    timer && clearTimeout(timer)
-    callbackManager.trigger({
-      x: evt.acceleration.x || 0,
-      y: evt.acceleration.y || 0,
-      z: evt.acceleration.z || 0
-    })
-    timer = setTimeout(() => { lock = false }, interval)
-  }
-}
-
 /**
  * 开始监听加速度数据。
  */
@@ -61,7 +46,13 @@ export const startAccelerometer: typeof Taro.startAccelerometer = ({ interval =
       if (devicemotionListener) {
         stopAccelerometer()
       }
-      devicemotionListener = getDevicemotionListener(intervalObj.interval)
+      devicemotionListener = throttle((evt: DeviceMotionEvent) => {
+        callbackManager.trigger({
+          x: evt.acceleration?.x || 0,
+          y: evt.acceleration?.y || 0,
+          z: evt.acceleration?.z || 0
+        })
+      }, intervalObj.interval)
       window.addEventListener('devicemotion', devicemotionListener, true)
     } else {
       throw new Error('accelerometer is not supported')

package/src/api/device/compass.ts

@@ -1,48 +1,64 @@
 import Taro from '@tarojs/api'
+
+import { getDeviceInfo } from '../base/system'
+import { throttle } from '../utils'
 import { CallbackManager, MethodHandler } from '../utils/handler'
 
 const callbackManager = new CallbackManager()
 let compassListener
 
+/**
+ * Note: 按系统类型获取对应绝对 orientation 事件名，因为安卓系统中直接监听 deviceorientation 事件得到的不是绝对 orientation
+ */
+const deviceorientationEventName = ['absolutedeviceorientation', 'deviceorientationabsolute', 'deviceorientation'].find(item => {
+  if ('on' + item in window) {
+    return item
+  }
+}) || ''
+
 /**
  * 停止监听罗盘数据
  */
 export const stopCompass: typeof Taro.stopCompass = ({ success, fail, complete } = {}) => {
   const handle = new MethodHandler({ name: 'stopCompass', success, fail, complete })
   try {
-    window.removeEventListener('deviceorientation', compassListener, true)
+    window.removeEventListener(deviceorientationEventName, compassListener, true)
     return handle.success()
   } catch (e) {
     return handle.fail({ errMsg: e.message })
   }
 }
 
-const getDeviceOrientationListener = interval => {
-  let lock
-  let timer
-  return evt => {
-    if (lock) return
-    lock = true
-    timer && clearTimeout(timer)
-    callbackManager.trigger({
-      direction: 360 - evt.alpha
-    })
-    timer = setTimeout(() => { lock = false }, interval)
-  }
-}
-
+let CompassChangeTrigger = false
 /**
  * 开始监听罗盘数据
  */
 export const startCompass: typeof Taro.startCompass = ({ success, fail, complete } = {}) => {
   const handle = new MethodHandler({ name: 'startCompass', success, fail, complete })
   try {
-    if (window.DeviceOrientationEvent) {
+    if (deviceorientationEventName !== '') {
       if (compassListener) {
         stopCompass()
       }
-      compassListener = getDeviceOrientationListener(200)
-      window.addEventListener('deviceorientation', compassListener, true)
+      compassListener = throttle((evt: DeviceOrientationEvent) => {
+        const isAndroid = getDeviceInfo().system === 'AndroidOS'
+        if (isAndroid && !evt.absolute && !CompassChangeTrigger) {
+          CompassChangeTrigger = true
+          console.warn('Warning: In \'onCompassChange\', your browser is not supported to get the orientation relative to the earth, the orientation data will be related to the initial orientation of the device .')
+        }
+        const alpha = evt.alpha || 0
+        /**
+         * 由于平台差异，accuracy 在 iOS/Android 的值不同。
+         * - iOS：accuracy 是一个 number 类型的值，表示相对于磁北极的偏差。0 表示设备指向磁北，90 表示指向东，180 表示指向南，依此类推。
+         * - Android：accuracy 是一个 string 类型的枚举值。
+         */
+        const accuracy = isAndroid ? evt.absolute ? 'high' : 'medium' : alpha
+        callbackManager.trigger({
+          direction: 360 - alpha,
+          accuracy: accuracy
+        } as unknown as Parameters<typeof Taro.onCompassChange>[number])
+      }, 5000)
+      window.addEventListener(deviceorientationEventName, compassListener, true)
     } else {
       throw new Error('compass is not supported')
     }

package/src/api/device/motion.ts

@@ -1,4 +1,6 @@
 import Taro from '@tarojs/api'
+
+import { throttle } from '../utils'
 import { CallbackManager, MethodHandler } from '../utils/handler'
 
 const callbackManager = new CallbackManager()
@@ -32,22 +34,6 @@ export const stopDeviceMotionListening: typeof Taro.stopDeviceMotionListening =
   }
 }
 
-const getDeviceOrientationListener = interval => {
-  let lock
-  let timer
-  return evt => {
-    if (lock) return
-    lock = true
-    timer && clearTimeout(timer)
-    callbackManager.trigger({
-      alpha: evt.alpha,
-      beta: evt.beta,
-      gamma: evt.gamma
-    })
-    timer = setTimeout(() => { lock = false }, interval)
-  }
-}
-
 /**
  * 开始监听设备方向的变化。
  */
@@ -59,7 +45,13 @@ export const startDeviceMotionListening: typeof Taro.startDeviceMotionListening
       if (deviceMotionListener) {
         stopDeviceMotionListening()
       }
-      deviceMotionListener = getDeviceOrientationListener(intervalObj.interval)
+      deviceMotionListener = throttle((evt: DeviceOrientationEvent) => {
+        callbackManager.trigger({
+          alpha: evt.alpha,
+          beta: evt.beta,
+          gamma: evt.gamma
+        })
+      }, intervalObj.interval)
       window.addEventListener('deviceorientation', deviceMotionListener, true)
     } else {
       throw new Error('deviceMotion is not supported')

package/src/api/device/scan.ts

@@ -1,7 +1,11 @@
 import { processOpenApi } from '../utils'
 
 // 扫码
-export const scanCode = processOpenApi('scanQRCode', { needResult: 1 }, res => ({
-  errMsg: res.errMsg === 'scanQRCode:ok' ? 'scanCode:ok' : res.errMsg,
-  result: res.resultStr
-}))
+export const scanCode = processOpenApi({
+  name: 'scanQRCode',
+  defaultOptions: { needResult: 1 },
+  formatResult: res => ({
+    errMsg: res.errMsg === 'scanQRCode:ok' ? 'scanCode:ok' : res.errMsg,
+    result: res.resultStr
+  })
+})

package/src/api/location/getLocation.ts

@@ -0,0 +1,80 @@
+import Taro from '@tarojs/api'
+import { processOpenApi, shouldBeObject } from '../utils'
+import { MethodHandler } from '../utils/handler'
+
+const getLocationByW3CApi: (options: Taro.getLocation.Option) => Promise<Taro.getLocation.SuccessCallbackResult> = (options: Taro.getLocation.Option): Promise<Taro.getLocation.SuccessCallbackResult> => {
+  // 断言 options 必须是 Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `getLocation:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+
+  // 解构回调函数
+  const { success, fail, complete } = options
+
+  const handle = new MethodHandler({ name: 'getLocation', success, fail, complete })
+
+  // const defaultMaximumAge = 5 * 1000
+
+  const positionOptions: PositionOptions = {
+    enableHighAccuracy: options.isHighAccuracy || (options.altitude != null), // 海拔定位需要高精度
+    // maximumAge: defaultMaximumAge, // 允许取多久以内的缓存位置
+    timeout: options.highAccuracyExpireTime // 高精度定位超时时间
+  }
+
+  // Web端API实现暂时仅支持GPS坐标系
+  if (options.type?.toUpperCase() !== 'WGS84') {
+    return handle.fail({
+      errMsg: 'This coordinate system type is not temporarily supported'
+    })
+  }
+
+  // 判断当前浏览器是否支持位置API
+  const geolocationSupported = navigator.geolocation
+
+  if (!geolocationSupported) {
+    return handle.fail({
+      errMsg: 'The current browser does not support this feature'
+    })
+  }
+
+  // 开始获取位置
+  return new Promise<Taro.getLocation.SuccessCallbackResult>(
+    (resolve, reject) => {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const result: Taro.getLocation.SuccessCallbackResult = {
+            /** 位置的精确度 */
+            accuracy: position.coords.accuracy,
+            /** 高度，单位 m */
+            altitude: position.coords.altitude!,
+            /** 水平精度，单位 m */
+            horizontalAccuracy: position.coords.accuracy,
+            /** 纬度，范围为 -90~90，负数表示南纬 */
+            latitude: position.coords.latitude,
+            /** 经度，范围为 -180~180，负数表示西经 */
+            longitude: position.coords.longitude,
+            /** 速度，单位 m/s */
+            speed: position.coords.speed!,
+            /** 垂直精度，单位 m（Android 无法获取，返回 0） */
+            verticalAccuracy: position.coords.altitudeAccuracy || 0,
+            /** 调用结果,自动补充 */
+            errMsg: ''
+          }
+          handle.success(result, resolve)
+        },
+        (error) => {
+          handle.fail({ errMsg: error.message }, reject)
+        },
+        positionOptions
+      )
+    }
+  )
+}
+
+export const getLocation = processOpenApi({
+  name: 'getLocation',
+  standardMethod: getLocationByW3CApi
+})

package/src/api/location/index.ts

@@ -5,15 +5,18 @@ export const stopLocationUpdate = temporarilyNotSupport('stopLocationUpdate')
 export const startLocationUpdateBackground = temporarilyNotSupport('startLocationUpdateBackground')
 export const startLocationUpdate = temporarilyNotSupport('startLocationUpdate')
 
-export const openLocation = processOpenApi('openLocation', { scale: 18 })
+export const openLocation = processOpenApi({
+  name: 'openLocation',
+  defaultOptions: { scale: 18 }
+})
 
 export const onLocationChangeError = temporarilyNotSupport('onLocationChangeError')
 export const onLocationChange = temporarilyNotSupport('onLocationChange')
 export const offLocationChangeError = temporarilyNotSupport('offLocationChangeError')
 export const offLocationChange = temporarilyNotSupport('offLocationChange')
 
-export const getLocation = processOpenApi('getLocation')
+export { getLocation } from './getLocation'
 
 export const choosePoi = temporarilyNotSupport('choosePoi')
 
-export * from './chooseLocation'
+export { chooseLocation } from './chooseLocation'

package/src/api/taro.ts

@@ -1,9 +1,6 @@
 import Taro from '@tarojs/api'
 
-import {
-  history,
-  createRouter
-} from '@tarojs/router'
+import { history } from '@tarojs/router'
 import { getApp, getCurrentInstance, getCurrentPages, nextTick, navigateBack, navigateTo, reLaunch, redirectTo, switchTab } from '../api'
 import { permanentlyNotSupport } from '../api/utils'
 
@@ -36,7 +33,6 @@ const taro: typeof Taro = {
   Events,
   preload,
   history,
-  createRouter,
   navigateBack,
   navigateTo,
   reLaunch,
@@ -84,6 +80,5 @@ export {
   requirePlugin,
   pxTransform,
   canIUseWebp,
-  history,
-  createRouter
+  history
 }

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

@@ -4,7 +4,7 @@ import { Current } from '@tarojs/runtime'
 import { MethodHandler } from '../../utils/handler'
 import { getTimingFunc, easeInOut } from '../../utils'
 
-let timer: NodeJS.Timer
+let timer: NodeJS.Timeout
 const FRAME_DURATION = 17
 
 /**

package/src/api/utils/animation.ts

@@ -0,0 +1,15 @@
+/**
+ * ease-in-out的函数
+ * @param t 0-1的数字
+ */
+export const easeInOut = (t: number) => (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1)
+
+export const getTimingFunc = (easeFunc, frameCnt) => {
+  return x => {
+    if (frameCnt <= 1) {
+      return easeFunc(1)
+    }
+    const t = x / (frameCnt - 1)
+    return easeFunc(t)
+  }
+}

package/src/api/utils/index.ts

@@ -104,7 +104,7 @@ export function temporarilyNotSupport (apiName) {
 
 export function weixinCorpSupport (apiName) {
   return () => {
-    const errMsg = `h5端仅在微信公众号中支持 API ${apiName}`
+    const errMsg = `h5端当前仅在微信公众号JS-SDK环境下支持此 API ${apiName}`
     if (process.env.NODE_ENV !== 'production') {
       console.error(errMsg)
       return Promise.reject({
@@ -136,55 +136,49 @@ export function permanentlyNotSupport (apiName) {
   }
 }
 
-export function isFunction (obj) {
-  return typeof obj === 'function'
+interface IProcessOpenApi<TOptions = Record<string, unknown>, TResult extends TaroGeneral.CallbackResult = any> {
+  name: string
+  defaultOptions?: TOptions
+  standardMethod?: (opts: TOptions) => Promise<TResult>
+  formatOptions?: (opts: TOptions) => TOptions
+  formatResult?: (res: TResult) => TResult
 }
 
-const VALID_COLOR_REG = /^#[0-9a-fA-F]{6}$/
-
-export const isValidColor = (color) => {
-  return VALID_COLOR_REG.test(color)
-}
-
-export function processOpenApi (apiName: string, defaultOptions?: Record<string, unknown>, formatResult = res => res, formatParams = options => options) {
-  // @ts-ignore
-  if (!window.wx) {
-    return weixinCorpSupport(apiName)
-  }
-  return options => {
-    options = options || {}
-    const obj = Object.assign({}, defaultOptions, options)
-    const p = new Promise((resolve, reject) => {
-      ['fail', 'success', 'complete'].forEach(k => {
-        obj[k] = oriRes => {
-          const res = formatResult(oriRes)
-          options[k] && options[k](res)
-          if (k === 'success') {
-            resolve(res)
-          } else if (k === 'fail') {
-            reject(res)
+export function processOpenApi<TOptions = Record<string, unknown>, TResult extends TaroGeneral.CallbackResult = any> ({
+  name,
+  defaultOptions,
+  standardMethod,
+  formatOptions = options => options,
+  formatResult = res => res
+}: IProcessOpenApi<TOptions, TResult>) {
+  const notSupported = weixinCorpSupport(name)
+  return (options: Partial<TOptions> = {}): Promise<TResult> => {
+    // @ts-ignore
+    const targetApi = window?.wx?.[name]
+    const opts = formatOptions(Object.assign({}, defaultOptions, options))
+    if (typeof targetApi === 'function') {
+      return new Promise<TResult>((resolve, reject) => {
+        ['fail', 'success', 'complete'].forEach(k => {
+          opts[k] = preRef => {
+            const res = formatResult(preRef)
+            options[k] && options[k](res)
+            if (k === 'success') {
+              resolve(res)
+            } else if (k === 'fail') {
+              reject(res)
+            }
           }
-        }
+          return targetApi(opts)
+        })
       })
-      // @ts-ignore
-      wx[apiName](formatParams(obj))
-    })
-    return p
-  }
-}
-
-/**
- * ease-in-out的函数
- * @param t 0-1的数字
- */
-export const easeInOut = (t: number) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
-
-export const getTimingFunc = (easeFunc, frameCnt) => {
-  return x => {
-    if (frameCnt <= 1) {
-      return easeFunc(1)
+    } else if (typeof standardMethod === 'function') {
+      return standardMethod(opts)
+    } else {
+      return notSupported() as Promise<TResult>
     }
-    const t = x / (frameCnt - 1)
-    return easeFunc(t)
   }
 }
+
+export * from './animation'
+export * from './lodash'
+export * from './valid'

package/src/api/utils/lodash.ts

@@ -0,0 +1,30 @@
+export function throttle (fn, threshold = 250, scope?) {
+  let lastTime = 0
+  let deferTimer: NodeJS.Timeout
+  return function (...args) {
+    const context = scope || this
+    const now = Date.now()
+    if (now - lastTime > threshold) {
+      fn.apply(this, args)
+      lastTime = now
+    } else {
+      clearTimeout(deferTimer)
+      deferTimer = setTimeout(() => {
+        lastTime = now
+        fn.apply(context, args)
+      }, threshold)
+    }
+  }
+}
+
+export function debounce (fn, ms = 250, scope?) {
+  let timer: NodeJS.Timeout
+
+  return function (...args) {
+    const context = scope || this
+    clearTimeout(timer)
+    timer = setTimeout(function () {
+      fn.apply(context, args)
+    }, ms)
+  }
+}

package/src/api/utils/valid.ts

@@ -0,0 +1,8 @@
+export function isFunction (obj) {
+  return typeof obj === 'function'
+}
+
+const VALID_COLOR_REG = /^#[0-9a-fA-F]{6}$/
+export const isValidColor = (color) => {
+  return VALID_COLOR_REG.test(color)
+}