@tarojs/taro-h5 3.4.7 → 3.5.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/taro-h5",
-  "version": "3.4.7",
+  "version": "3.5.0-alpha.2",
   "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-cli 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.7",
-    "@tarojs/router": "3.4.7",
-    "@tarojs/runtime": "3.4.7",
-    "@tarojs/taro": "3.4.7",
+    "@tarojs/api": "3.5.0-alpha.2",
+    "@tarojs/router": "3.5.0-alpha.2",
+    "@tarojs/runtime": "3.5.0-alpha.2",
+    "@tarojs/taro": "3.5.0-alpha.2",
     "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": "bb62ad5d4f099940c8c4d6dfcba9b743bc3d2acf"
+  "gitHead": "a7f74344335ee3b4c57a401c1d103e16da99ee7a"
 }

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/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

@@ -136,16 +136,6 @@ export function permanentlyNotSupport (apiName) {
   }
 }
 
-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)
-}
-
 interface IProcessOpenApi<TOptions = Record<string, unknown>, TResult extends TaroGeneral.CallbackResult = any> {
   name: string
   defaultOptions?: TOptions
@@ -189,18 +179,6 @@ export function processOpenApi<TOptions = Record<string, unknown>, TResult exten
   }
 }
 
-/**
- * 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)
-  }
-}
+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)
+}