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

package/src/api/ui/navigation-bar/index.ts

@@ -1,4 +1,4 @@
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/api'
 
 import { MethodHandler } from '../../utils/handler'
 import { getParameterError, shouldBeObject, temporarilyNotSupport } from '../../utils'
@@ -16,7 +16,7 @@ export function setNavigationBarTitle (options) {
   }
 
   const { title, success, fail, complete } = options
-  const handle = new MethodHandler({ name: 'makePhoneCall', success, fail, complete })
+  const handle = new MethodHandler({ name: 'setNavigationBarTitle', success, fail, complete })
 
   if (!title || typeof title !== 'string') {
     return handle.fail({

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: number
+let timer: NodeJS.Timer
 const FRAME_DURATION = 17
 
 /**
@@ -21,9 +21,9 @@ export const pageScrollTo: typeof Taro.pageScrollTo = ({ scrollTop, selector = '
         }, reject)
       }
 
-      const id = Current.page?.path
+      const id = Current.page?.path?.replace(/([^a-z0-9\u00a0-\uffff_-])/ig, '\\$1')
       const el: HTMLDivElement | null = (id
-        ? document.getElementById(id)
+        ? document.querySelector(`.taro_page#${id}`)
         : document.querySelector('.taro_page') ||
       document.querySelector('.taro_router')) as HTMLDivElement
 

package/src/api/utils/handler.ts

@@ -58,7 +58,7 @@ export class CallbackManager {
    * 添加回调
    * @param {{ callback: function, ctx: any } | function} opt
    */
-  add (opt?: TCallbackManagerListItem) {
+  add = (opt?: TCallbackManagerListItem) => {
     if (opt) this.callbacks.push(opt)
   }
 
@@ -66,7 +66,7 @@ export class CallbackManager {
    * 移除回调
    * @param {{ callback: function, ctx: any } | function} opt
    */
-  remove (opt?: TCallbackManagerListItem) {
+  remove = (opt?: TCallbackManagerListItem) => {
     if (opt) {
       let pos = -1
       this.callbacks.forEach((callback, k) => {
@@ -84,7 +84,7 @@ export class CallbackManager {
    * 获取回调函数数量
    * @return {number}
    */
-  count () {
+  count = () => {
     return this.callbacks.length
   }
 
@@ -92,7 +92,7 @@ export class CallbackManager {
    * 触发回调
    * @param  {...any} args 回调的调用参数
    */
-  trigger (...args: TCallbackManagerList) {
+  trigger = (...args: TCallbackManagerList) => {
     this.callbacks.forEach(opt => {
       if (typeof opt === 'function') {
         opt(...args)

package/src/api/utils/index.ts

@@ -12,7 +12,7 @@ export function shouldBeObject (target: unknown) {
   }
 }
 
-export function findDOM (inst): TaroElement | HTMLElement | undefined {
+export function findDOM (inst?): TaroElement | HTMLElement | undefined {
   const runtimeHooks = container.get<IHooks>(SERVICE_IDENTIFIER.Hooks)
 
   if (inst) {
@@ -88,30 +88,51 @@ export function serializeParams (params) {
 export function temporarilyNotSupport (apiName) {
   return () => {
     const errMsg = `暂时不支持 API ${apiName}`
-    console.error(errMsg)
-    return Promise.reject({
-      errMsg
-    })
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(errMsg)
+      return Promise.reject({
+        errMsg
+      })
+    } else {
+      console.warn(errMsg)
+      return Promise.resolve({
+        errMsg
+      })
+    }
   }
 }
 
 export function weixinCorpSupport (apiName) {
   return () => {
     const errMsg = `h5端仅在微信公众号中支持 API ${apiName}`
-    console.error(errMsg)
-    return Promise.reject({
-      errMsg
-    })
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(errMsg)
+      return Promise.reject({
+        errMsg
+      })
+    } else {
+      console.warn(errMsg)
+      return Promise.resolve({
+        errMsg
+      })
+    }
   }
 }
 
 export function permanentlyNotSupport (apiName) {
   return () => {
     const errMsg = `不支持 API ${apiName}`
-    console.error(errMsg)
-    return Promise.reject({
-      errMsg
-    })
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(errMsg)
+      return Promise.reject({
+        errMsg
+      })
+    } else {
+      console.warn(errMsg)
+      return Promise.resolve({
+        errMsg
+      })
+    }
   }
 }
 

package/src/api/wxml/nodesRef.ts

@@ -1,4 +1,3 @@
-import { temporarilyNotSupport } from '../utils'
 import { SelectorQuery } from './selectorQuery'
 
 export class NodesRef implements Taro.NodesRef {
@@ -14,9 +13,17 @@ export class NodesRef implements Taro.NodesRef {
     this._single = single
   }
 
-  context = temporarilyNotSupport('NodesRef.context') as unknown as Taro.NodesRef['context']
+  context (cb) {
+    const { _selector, _component, _single, _selectorQuery } = this
+    _selectorQuery._push(_selector, _component, _single, { context: !0 }, cb)
+    return _selectorQuery
+  }
 
-  node = temporarilyNotSupport('NodesRef.node') as unknown as Taro.NodesRef['node']
+  node (cb) {
+    const { _selector, _component, _single, _selectorQuery } = this
+    _selectorQuery._push(_selector, _component, _single, { nodeCanvasType: !0, node: !0 }, cb)
+    return _selectorQuery
+  }
 
   boundingClientRect (cb) {
     const { _selector, _component, _single, _selectorQuery } = this

package/src/api/wxml/selectorQuery.ts

@@ -1,4 +1,5 @@
 import Taro from '@tarojs/api'
+import { CanvasContext } from '../canvas/CanvasContext'
 import { findDOM } from '../utils'
 import { NodesRef } from './nodesRef'
 
@@ -16,33 +17,77 @@ type TSelectorQueryQueueCallback = (res: ISelectorQueryQueue) => void
 function filter (fields, dom?: HTMLElement, selector?: string) {
   if (!dom) return null
 
-  const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [] } = fields
-  const { left, right, top, bottom, width, height } = dom.getBoundingClientRect()
-  const isViewport = selector === 'html'
+  const isViewport = selector === '.taro_page'
+  const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [], nodeCanvasType, node, context } = fields
   const res: any = {}
 
-  if (id) res.id = dom.id
-  if (dataset) res.dataset = Object.assign({}, dom.dataset)
-  if (rect) {
-    if (!isViewport) {
-      res.left = left
-      res.right = right
-      res.top = top
-      res.bottom = bottom
+  if (nodeCanvasType && node) {
+    const tagName = dom.tagName
+    res.node = {
+      id: dom.id,
+      $taroElement: dom
+    }
+    if (/^taro-canvas-core/i.test(tagName)) {
+      const type = (dom as any).type! || ''
+      res.nodeCanvasType = type
+      const canvas = dom.getElementsByTagName('canvas')[0]
+      if (/^(2d|webgl)/i.test(type) && canvas) {
+        res.node = canvas
+      } else {
+        res.node = null
+      }
     } else {
-      res.left = 0
-      res.right = 0
-      res.top = 0
-      res.bottom = 0
+      // TODO https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
+      // if (/^taro-scroll-view-core/i.test(tagName))
+      res.nodeCanvasType = ''
+      res.node = dom
     }
+    return res
   }
-  if (size) {
-    if (!isViewport) {
-      res.width = width
-      res.height = height
-    } else {
-      res.width = dom.clientWidth
-      res.height = dom.clientHeight
+  if (context) {
+    const tagName = dom.tagName
+    if (/^taro-video-core/i.test(tagName)) {
+      // TODO HTMLVideoElement to VideoContext
+      return { context: dom as unknown as Taro.VideoContext }
+    } else if (/^taro-canvas-core/i.test(tagName)) {
+      const type = (dom as any).type! || '2d'
+      const canvas = dom?.querySelector('canvas') as HTMLCanvasElement
+      const ctx = canvas?.getContext(type) as CanvasRenderingContext2D
+      return { context: new CanvasContext(canvas, ctx) }
+    } else if (/^taro-live-player-core/i.test(tagName)) {
+      console.error('暂时不支持通过 NodesRef.context 获取 LivePlayerContext')
+    } else if (/^taro-editor-core/i.test(tagName)) {
+      console.error('暂时不支持通过 NodesRef.context 获取 EditorContext')
+    } else if (/^taro-map-core/i.test(tagName)) {
+      console.error('暂时不支持通过 NodesRef.context 获取 MapContext')
+    }
+    return
+  }
+  if (id) res.id = dom.id
+  if (dataset) res.dataset = Object.assign({}, dom.dataset)
+  if (rect || size) {
+    const { left, right, top, bottom, width, height } = dom.getBoundingClientRect()
+    if (rect) {
+      if (!isViewport) {
+        res.left = left
+        res.right = right
+        res.top = top
+        res.bottom = bottom
+      } else {
+        res.left = 0
+        res.right = 0
+        res.top = 0
+        res.bottom = 0
+      }
+    }
+    if (size) {
+      if (!isViewport) {
+        res.width = width
+        res.height = height
+      } else {
+        res.width = dom.clientWidth
+        res.height = dom.clientHeight
+      }
     }
   }
   if (scrollOffset) {
@@ -147,7 +192,7 @@ export class SelectorQuery implements Taro.SelectorQuery {
   }
 
   selectViewport () {
-    return new NodesRef('html', this, true)
+    return new NodesRef('.taro_page', this, true)
   }
 
   exec (cb) {

package/src/index.ts

@@ -1,6 +1,6 @@
-import Taro from './api/taro'
+import taro from './api/taro'
 
 export * from './api/index'
 export * from './api/taro'
 
-export default Taro
+export default taro

package/src/api/base/system/index.ts

@@ -1,2 +0,0 @@
-export * from './info'
-export * from './network'

package/src/api/base/system/info.ts

@@ -1,64 +0,0 @@
-import Taro from '@tarojs/api'
-import MobileDetect from 'mobile-detect'
-
-import { MethodHandler } from '../../utils/handler'
-
-export const getSystemInfoSync: typeof Taro.getSystemInfoSync = () => {
-  const md = new MobileDetect(navigator.userAgent)
-
-  const info: ReturnType<typeof Taro.getSystemInfoSync> = {
-    brand: md.mobile() || '', // 手机品牌
-    model: md.mobile() || '', // 手机型号
-    system: md.os(), // 操作系统版本
-    pixelRatio: window.devicePixelRatio, // 设备像素比
-    screenWidth: window.screen.width, // 屏幕宽度
-    screenHeight: window.screen.height, // 屏幕高度
-    windowWidth: document.documentElement.clientWidth, // 可使用窗口宽度
-    windowHeight: document.documentElement.clientHeight, // 可使用窗口高度
-    version: '', // 微信版本号
-    statusBarHeight: NaN, // 状态栏的高度
-    platform: navigator.platform, // 客户端平台
-    language: navigator.language, // 微信设置的语言
-    fontSizeSetting: NaN, // 用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准，单位：px
-    SDKVersion: '', // 客户端基础库版本
-
-    // TODO
-    albumAuthorized: false,
-    benchmarkLevel: 0,
-    bluetoothEnabled: false,
-    cameraAuthorized: false,
-    enableDebug: false,
-    locationAuthorized: false,
-    locationEnabled: false,
-    microphoneAuthorized: false,
-    notificationAlertAuthorized: false,
-    notificationAuthorized: false,
-    notificationBadgeAuthorized: false,
-    notificationSoundAuthorized: false,
-    safeArea: {
-      bottom: 0,
-      height: 0,
-      left: 0,
-      right: 0,
-      top: 0,
-      width: 0
-    },
-    wifiEnabled: false
-  }
-
-  return info
-}
-
-export const getSystemInfo: typeof Taro.getSystemInfo = async (options = {}) => {
-  const { success, fail, complete } = options
-  const handle = new MethodHandler({ name: 'getSystemInfo', success, fail, complete })
-
-  try {
-    const info = await getSystemInfoSync()
-    return handle.success(info)
-  } catch (error) {
-    return handle.fail({
-      errMsg: error
-    })
-  }
-}