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

package/src/api/createSelectorQuery/index.js

@@ -1,193 +0,0 @@
-import { findDOM } from '../utils'
-
-/**
- * WXML节点信息API
- * @return {Object} SelectorQuery 对象实例
- */
-function queryBat (queue, cb) {
-  const res = []
-
-  queue.forEach(item => {
-    const { selector, single, fields, component } = item
-    // selector 的容器节点
-    /* eslint-disable */
-    const container = (
-      component !== null ?
-        (findDOM(component) || document) :
-        document
-    )
-    /* eslint-enable */
-
-    // 特殊处理 ---- 选自己
-    let selectSelf = false
-    if (container !== document) {
-      const $nodeList = container.parentNode.querySelectorAll(selector)
-      for (let i = 0, len = $nodeList.length; i < len; ++i) {
-        if (container === $nodeList[i]) {
-          selectSelf = true
-          break
-        }
-      }
-    }
-
-    if (single) {
-      const el = selectSelf === true ? container : container.querySelector(selector)
-      res.push(filter(fields, el, selector))
-    } else {
-      const $children = container.querySelectorAll(selector)
-      const children = []
-      selectSelf === true && children.push(container)
-      for (let i = 0, len = $children.length; i < len; ++i) {
-        children.push($children[i])
-      }
-      res.push(children.map(dom => filter(fields, dom)))
-    }
-  })
-  cb(res)
-}
-
-function filter (fields, dom, selector) {
-  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 res = {}
-
-  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
-    } 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) {
-    res.scrollLeft = dom.scrollLeft
-    res.scrollTop = dom.scrollTop
-  }
-  if (properties.length) {
-    properties.forEach(prop => {
-      const attr = dom.getAttribute(prop)
-      if (attr) res[prop] = attr
-    })
-  }
-  if (computedStyle.length) {
-    const styles = window.getComputedStyle(dom)
-    computedStyle.forEach(key => {
-      const value = styles.getPropertyValue(key) || styles[key]
-      if (value) res[key] = value
-    })
-  }
-
-  return res
-}
-
-class Query {
-  constructor () {
-    this._defaultWebviewId = null
-    this._webviewId = null
-    this._queue = []
-    this._queueCb = []
-    this._component = null
-  }
-
-  in (component) {
-    this._component = component
-    return this
-  }
-
-  select (selector) {
-    // 小程序里跨自定义组件的后代选择器 '>>>' 在 h5 替换为普通后代选择器 '>'
-    if (typeof selector === 'string') selector = selector.replace('>>>', '>')
-    return new NodesRef(selector, this, true)
-  }
-
-  selectAll (selector) {
-    // 小程序里跨自定义组件的后代选择器 '>>>' 在 h5 替换为普通后代选择器 '>'
-    if (typeof selector === 'string') selector = selector.replace('>>>', '>')
-    return new NodesRef(selector, this, false)
-  }
-
-  selectViewport () {
-    return new NodesRef('html', this, true)
-  }
-
-  exec (cb) {
-    queryBat(this._queue, res => {
-      const _queueCb = this._queueCb
-      res.forEach((item, index) => {
-        typeof _queueCb[index] === 'function' && _queueCb[index].call(this, item)
-      })
-      typeof cb === 'function' && cb.call(this, res)
-    })
-  }
-
-  _push (selector, component, single, fields, callback = null) {
-    this._queue.push({
-      component,
-      selector,
-      single,
-      fields
-    })
-    this._queueCb.push(callback)
-  }
-}
-
-class NodesRef {
-  constructor (selector, querySelectorQuery, single) {
-    this._component = querySelectorQuery._component
-    this._selector = selector
-    this._selectorQuery = querySelectorQuery
-    this._single = single
-  }
-
-  boundingClientRect (cb) {
-    const { _selector, _component, _single, _selectorQuery } = this
-    _selectorQuery._push(_selector, _component, _single, { id: !0, dataset: !0, rect: !0, size: !0 }, cb)
-    return _selectorQuery
-  }
-
-  scrollOffset (cb) {
-    const { _selector, _component, _single, _selectorQuery } = this
-    _selectorQuery._push(_selector, _component, _single, { id: !0, dataset: !0, scrollOffset: !0 }, cb)
-    return _selectorQuery
-  }
-
-  fields (fields, cb) {
-    const { _selector, _component, _single, _selectorQuery } = this
-    const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [] } = fields
-
-    _selectorQuery._push(_selector, _component, _single, {
-      id,
-      dataset,
-      rect,
-      size,
-      scrollOffset,
-      properties,
-      computedStyle
-    }, cb)
-
-    return _selectorQuery
-  }
-}
-
-export function createSelectorQuery () {
-  return new Query()
-}

package/src/api/deviceMotion/index.js

@@ -1,105 +0,0 @@
-import { createCallbackManager, successHandler, errorHandler } from '../utils/index'
-
-let deviceMotionListener
-const callbackManager = createCallbackManager()
-
-const INTERVALMAP = {
-  game: {
-    interval: 20,
-    frequency: 50
-  },
-  ui: {
-    interval: 60,
-    frequency: 16.67
-  },
-  normal: {
-    interval: 200,
-    frequency: 5
-  }
-}
-
-/**
- * 停止监听设备方向的变化。
- * @param {Object} object 参数
- * @param {function} [object.success] 接口调用成功的回调函数
- * @param {function} [object.fail] 接口调用失败的回调函数
- * @param {function} [object.complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
-const stopDeviceMotionListening = ({ success, fail, complete }) => {
-  try {
-    window.removeEventListener('deviceorientation', deviceMotionListener, true)
-    return successHandler(success, complete)({
-      errMsg: 'stopDeviceMotionListening:ok'
-    })
-  } catch (e) {
-    return errorHandler(fail, complete)({
-      errMsg: `stopDeviceMotionListening:fail ${e.message}`
-    })
-  }
-}
-
-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)
-  }
-}
-
-/**
- * 开始监听设备方向的变化。
- * @param {Object} object 参数
- * @param {function} [object.success] 接口调用成功的回调函数
- * @param {function} [object.fail] 接口调用失败的回调函数
- * @param {function} [object.complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
-const startDeviceMotionListening = ({ interval = 'normal', success, fail, complete } = {}) => {
-  try {
-    const intervalObj = INTERVALMAP[interval]
-    if (window.DeviceOrientationEvent) {
-      if (deviceMotionListener) {
-        stopDeviceMotionListening()
-      }
-      deviceMotionListener = getDeviceOrientationListener(intervalObj.interval)
-      window.addEventListener('deviceorientation', deviceMotionListener, true)
-    } else {
-      throw new Error('deviceMotion is not supported')
-    }
-    return successHandler(success, complete)({
-      errMsg: 'startDeviceMotionListening:ok'
-    })
-  } catch (e) {
-    return errorHandler(fail, complete)({
-      errMsg: `startDeviceMotionListening:fail ${e.message}`
-    })
-  }
-}
-
-/**
- * @typedef DeviceMotionParam 回调参数
- * @property {number} alpha 当手机坐标 X/Y 和 地球 X/Y 重合时，绕着 Z 轴转动的夹角为 alpha，范围值为 [0, 2*PI)。逆时针转动为正。
- * @property {number} beta 当手机坐标 Y/Z 和地球 Y/Z 重合时，绕着 X 轴转动的夹角为 beta。范围值为 [-1*PI, PI) 。顶部朝着地球表面转动为正。也有可能朝着用户为正。
- * @property {number} gamma 当手机 X/Z 和地球 X/Z 重合时，绕着 Y 轴转动的夹角为 gamma。范围值为 [-1*PI/2, PI/2)。右边朝着地球表面转动为正。
- */
-
-/**
- * 监听设备方向变化事件。频率根据 wx.startDeviceMotionListeningListening() 的 interval 参数。可以使用 wx.stopDeviceMotionListeningListening() 停止监听。
- * @param {(obj: DeviceMotionParam) => void} callback 罗盘数据变化事件的回调函数
- */
-const onDeviceMotionChange = callback => {
-  callbackManager.add(callback)
-}
-
-export {
-  stopDeviceMotionListening,
-  startDeviceMotionListening,
-  onDeviceMotionChange
-}

package/src/api/fileTransfer/index.js

@@ -1,2 +0,0 @@
-export { default as downloadFile } from './downloadFile'
-export { default as uploadFile } from './uploadFile'

package/src/api/image/chooseImage.js

@@ -1,87 +0,0 @@
-import { shouldBeObject, getParameterError } from '../utils'
-
-/**
- * 从本地相册选择图片或使用相机拍照。
- * @param {Object} object 参数
- * @param {string[]} [object.sourceType=['album', 'camera']] 选择图片的来源（h5端未实现）
- * @param {string[]} [object.sizeType=['original', 'compressed']] 所选的图片的尺寸（h5端未实现）
- * @param {number} [object.count=9] 最多可以选择的图片张数
- * @param {function} [object.success] 接口调用成功的回调函数
- * @param {function} [object.fail] 接口调用失败的回调函数
- * @param {function} [object.complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- * @param {string} [object.imageId] 用来上传的input元素ID（仅h5端）
- */
-const chooseImage = function (options) {
-  // options must be an Object
-  const isObject = shouldBeObject(options)
-  if (!isObject.res) {
-    const res = { errMsg: `chooseImage${isObject.msg}` }
-    console.error(res.errMsg)
-    return Promise.reject(res)
-  }
-
-  const { count = 1, success, fail, complete, imageId = 'taroChooseImage' } = options
-  const res = {
-    errMsg: 'chooseImage:ok',
-    tempFilePaths: [],
-    tempFiles: []
-  }
-
-  if (count && typeof count !== 'number') {
-    res.errMsg = getParameterError({
-      name: 'chooseImage',
-      para: 'count',
-      correct: 'Number',
-      wrong: count
-    })
-    console.error(res.errMsg)
-    typeof fail === 'function' && fail(res)
-    typeof complete === 'function' && complete(res)
-    return Promise.reject(res)
-  }
-
-  let taroChooseImageId = document.getElementById(imageId)
-  if (!taroChooseImageId) {
-    const obj = document.createElement('input')
-    obj.setAttribute('type', 'file')
-    obj.setAttribute('id', imageId)
-    if (count > 1) {
-      obj.setAttribute('multiple', 'multiple')
-    }
-    obj.setAttribute('accept', 'image/*')
-    obj.setAttribute('style', 'position: fixed; top: -4000px; left: -3000px; z-index: -300;')
-    document.body.appendChild(obj)
-    taroChooseImageId = document.getElementById(imageId)
-  } else {
-    if (count > 1) {
-      taroChooseImageId.setAttribute('multiple', 'multiple')
-    } else {
-      taroChooseImageId.removeAttribute('multiple')
-    }
-  }
-  let taroChooseImageCallback
-  const taroChooseImagePromise = new Promise(resolve => {
-    taroChooseImageCallback = resolve
-  })
-  const TaroMouseEvents = document.createEvent('MouseEvents')
-  TaroMouseEvents.initEvent('click', true, true)
-  taroChooseImageId.dispatchEvent(TaroMouseEvents)
-  taroChooseImageId.onchange = function (e) {
-    const arr = [...e.target.files]
-    arr && arr.forEach(item => {
-      const blob = new Blob([item], {
-        type: item.type
-      })
-      const url = URL.createObjectURL(blob)
-      res.tempFilePaths.push(url)
-      res.tempFiles.push({ path: url, size: item.size, type: item.type, originalFileObj: item })
-    })
-    typeof success === 'function' && success(res)
-    typeof complete === 'function' && complete(res)
-    taroChooseImageCallback(res)
-    e.target.value = ''
-  }
-  return taroChooseImagePromise
-}
-
-export default chooseImage

package/src/api/image/getImageInfo.js

@@ -1,74 +0,0 @@
-// const ORIENTATION_MAP = {
-//   // up 默认方向（手机横持拍照），对应 Exif 中的 1。或无 orientation 信息。
-//   1: 'up',
-
-//   // up-mirrored 同 up，但镜像翻转，对应 Exif 中的 2
-//   2: 'up-mirrored',
-
-//   // down 旋转180度，对应 Exif 中的 3
-//   3: 'down',
-
-//   // down-mirrored 同 down，但镜像翻转，对应 Exif 中的 4
-//   4: 'down-mirrored',
-
-//   // left-mirrored 同 left，但镜像翻转，对应 Exif 中的 5
-//   5: 'left-mirrored',
-
-//   // right 顺时针旋转90度，对应 Exif 中的 6
-//   6: 'right',
-
-//   // right-mirrored 同 right，但镜像翻转，对应 Exif 中的 7
-//   7: 'right-mirrored',
-
-//   // left 逆时针旋转90度，对应 Exif 中的 8
-//   8: 'left'
-// }
-
-/**
- * @typedef {'up'|'up-mirrored'|'down'|'down-mirrored'|'left-mirrored'|'right'|'right-mirrored'|'left'} Orientation
- * @typedef ImageInfo object.success 回调函数的参数
- * @property {number} width 图片原始宽度，单位px。不考虑旋转。
- * @property {number} height 图片原始高度，单位px。不考虑旋转。
- * @property {string} path 图片的本地路径
- * @property {Orientation} orientation 拍照时设备方向
- * @property {string} type 图片格式
- */
-
-/**
- * 获取图片信息。网络图片需先配置download域名才能生效。
- * @param {Object} object 参数
- * @param {string} object.src 图片的路径，可以是相对路径、临时文件路径、存储文件路径、网络图片路径
- * @param {(res: ImageInfo) => void} [object.success] 接口调用成功的回调函数
- * @param {function} [object.fail] 接口调用失败的回调函数
- * @param {function} [object.complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
-const getImageInfo = ({ src, success, fail, complete } = {}) => {
-  return new Promise((resolve, reject) => {
-    const onSuccess = res => {
-      success && success(res)
-      complete && complete()
-      resolve(res)
-    }
-    const onError = res => {
-      fail && fail(res)
-      complete && complete()
-      reject(res)
-    }
-    const image = new Image()
-    image.onload = () => {
-      onSuccess({
-        errMsg: 'getImageInfo:ok',
-        width: image.naturalWidth,
-        height: image.naturalHeight
-      })
-    }
-    image.onerror = e => {
-      onError({
-        errMsg: `getImageInfo:fail ${e.message}`
-      })
-    }
-    image.src = src
-  })
-}
-
-export default getImageInfo

package/src/api/image/index.js

@@ -1,7 +0,0 @@
-/**
- * previewImage api基于开源的React组件[react-wx-images-viewer](https://github.com/react-ld/react-wx-images-viewer)开发，感谢！
- */
-
-export { default as chooseImage } from './chooseImage'
-export { default as getImageInfo } from './getImageInfo'
-export { previewImage } from './previewImage'

package/src/api/image/previewImage.js

@@ -1,94 +0,0 @@
-/**
- * 在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
- * @param {Object} options
- * @param {Array.<string>} options.urls 需要预览的图片链接列表。2.2.3 起支持云文件ID。
- * @param {string} [options.current=options.urls[0]]  urls的第一张 当前显示图片的链接
- * @param {function} [options.success] 接口调用成功的回调函数
- * @param {function} [options.fail] 接口调用失败的回调函数
- * @param {function} [options.complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
-export async function previewImage (options) {
-  const container = document.createElement('div')
-  container.classList.add('preview-image')
-  container.style.cssText = `
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1050;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    outline: 0;
-    background-color: #111;
-  `
-  container.addEventListener('click', () => {
-    container.remove()
-  })
-
-  const swiper = document.createElement('taro-swiper-core')
-  swiper.full = true
-
-  const { urls = [], current = '' } = options
-
-  let children = []
-  try {
-    children = await Promise.all(
-      urls.map(e => loadImage(e, options.fail))
-    )
-  } catch (error) {
-    if (options.fail) {
-      options.fail(error)
-    }
-  }
-
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i]
-    swiper.appendChild(child)
-  }
-
-  const currentIndex = urls.indexOf(current)
-  swiper.current = currentIndex
-
-  container.appendChild(swiper)
-  document.body.appendChild(container)
-
-  if (options.success) {
-    options.success()
-  }
-
-  if (options.complete) {
-    options.complete()
-  }
-}
-
-function loadImage (url, fail) {
-  return new Promise((resolve) => {
-    const item = document.createElement('taro-swiper-item-core')
-    item.style.cssText = `
-      display: flex;
-      align-items: start;
-      justify-content: center;
-      overflow-y: scroll;
-    `
-    const image = new Image()
-    image.style.maxWidth = '100%'
-    image.src = url
-    const div = document.createElement('div')
-    div.style.cssText = `
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      max-width: 100%;
-      min-height: 100%;
-    `
-    div.appendChild(image)
-    item.appendChild(div)
-    // Note: 等待图片加载完后返回，会导致轮播被卡住
-    resolve(item)
-    if (typeof fail === 'function') {
-      image.addEventListener('error', (err) => {
-        fail(err)
-      })
-    }
-  })
-}

package/src/api/index.js

@@ -1,29 +0,0 @@
-/* 未支持的api */
-export * from './unsupportedApi'
-
-/* 已实现api */
-export * from './accelerometer'
-export * from './audio'
-export * from './canvas'
-export * from './clipboard'
-export * from './compass'
-export * from './createAnimation'
-export * from './createSelectorQuery'
-export * from './deviceMotion'
-export * from './fileTransfer'
-export * from './image'
-export * from './interactive'
-export * from './location'
-export * from './navigationBar'
-export * from './open'
-export * from './others'
-export * from './pullDownRefresh'
-export * from './request'
-export * from './scroll'
-export * from './storage'
-export * from './system'
-export * from './tabBar'
-export * from './vibrate'
-export * from './video'
-export * from './webSocket'
-export * from './window'