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

package/src/api/canvas/canvasToTempFilePath.js

@@ -1,49 +0,0 @@
-import { findDOM } from '../utils/index'
-
-/**
- * @typedef {Object} Param
- * @property {Number} [x] 指定的画布区域的左上角横坐标，默认值 0
- * @property {Number} [y] 指定的画布区域的左上角纵坐标，默认值 0
- * @property {Number} [width] 指定的画布区域的宽度，默认值 canvas宽度-x
- * @property {Number} [height] 指定的画布区域的高度，默认值 canvas宽度-y
- * @property {Number} [destWidth] 输出的图片的宽度，默认值 width*屏幕像素密度
- * @property {Number} [destHeight] 输出的图片的高度，默认值 height*屏幕像素密度
- * @property {String} canvasId 画布标识，传入 <canvas> 组件的 canvas-id
- * @property {String} [fileType] 目标文件的类型，默认值 png
- * @property {Number} quality 图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
- * @property {Function} [success] 接口调用成功的回调函数
- * @property {Function} [fail] 接口调用失败的回调函数
- * @property {Function} [complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
-
-/**
- * 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
- * @param {Param} object 参数
- * @todo 暂未支持尺寸相关功能
- */
-const canvasToTempFilePath = ({ canvasId, fileType, quality, success, fail, complete }, inst) => {
-  /** @type {HTMLCanvasElement} */
-  const canvas = findDOM(inst).querySelector(`canvas[canvas-id=${canvasId}]`)
-
-  try {
-    // /** @type {CanvasRenderingContext2D} */
-    const dataURL = canvas.toDataURL(`image/${fileType || 'png'}`, quality)
-    const res = {
-      tempFilePath: dataURL,
-      res: 'canvasToTempFilePath:ok'
-    }
-
-    success && success(res)
-    complete && complete()
-    return Promise.resolve(res)
-  } catch (e) {
-    const res = {
-      errMsg: e.message
-    }
-    fail && fail(res)
-    complete && complete()
-    return Promise.reject(res)
-  }
-}
-
-export default canvasToTempFilePath

package/src/api/canvas/createCanvasContext.js

@@ -1,340 +0,0 @@
-import { findDOM } from '../utils/index'
-
-/**
- * 创建 canvas 的绘图上下文 CanvasContext 对象
- * @param {string} canvasId 要获取上下文的 <canvas> 组件 canvas-id 属性
- */
-const createCanvasContext = (canvasId, inst) => {
-  /** @type {HTMLCanvasElement} */
-  const canvas = findDOM(inst).querySelector(`canvas[canvas-id="${canvasId}"]`)
-
-  /** @type {CanvasRenderingContext2D} */
-  const ctx = canvas.getContext('2d')
-
-  /**
-   * @typedef {Object} Action
-   * @property {Function} func
-   * @property {any[]} args
-   */
-
-  /**
-   * 操作队列
-   * @type {Action[]}
-   */
-  const actions = []
-  const enqueueActions = (func) => {
-    return (...args) => {
-      actions.push({
-        func,
-        args
-      })
-    }
-  }
-  const emptyActions = () => {
-    actions.length = 0
-  }
-
-  /**
-   * 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
-   * @param {Boolean} [reserve=false] 本次绘制是否接着上一次绘制。
-   * 即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；
-   * 若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，
-   * 默认 false。
-   * @param {Function} [callback] 绘制完成后执行的回调函数
-   * @todo 每次draw都会读取width和height
-   */
-  const draw = async (reserve = false, callback) => {
-    try {
-      if (!reserve) {
-        ctx.clearRect(0, 0, canvas.width, canvas.height)
-      }
-
-      // 部分 action 是异步的
-      for (const { func, args } of actions) {
-        await func.apply(ctx, args)
-      }
-
-      emptyActions()
-      callback && callback()
-    } catch (e) {
-      /* eslint-disable no-throw-literal */
-      throw {
-        errMsg: e.message
-      }
-    }
-  }
-
-  const customProperties = [
-    /**
-     * 设置填充色。
-     * @param {String} color 填充的颜色，默认颜色为 black。
-     */
-    [
-      'setFillStyle',
-      (color) => {
-        ctx.fillStyle = color
-      }
-    ],
-    /**
-     * 设置字体的字号。
-     * @param {Number} fontSize 字体的字号
-     */
-    [
-      'setFontSize',
-      (fontSize) => {
-        ctx.font = fontSize
-      },
-      true
-    ],
-    /**
-     * 设置全局画笔透明度。
-     * @param {Number} alpha 透明度。范围 0-1，0 表示完全透明，1 表示完全不透明。
-     */
-    [
-      'setGlobalAlpha',
-      (alpha) => {
-        ctx.globalAlpha = alpha
-      }
-    ],
-    /**
-     * 设置虚线样式。
-     * @param {Number[]} pattern 一组描述交替绘制线段和间距（坐标空间单位）长度的数字
-     * @param {Number} offset 虚线偏移量
-     */
-    [
-      'setLineDash',
-      (pattern, offset) => {
-        ctx.setLineDash(pattern)
-        ctx.lineDashOffset = offset
-      }
-    ],
-    /**
-     * 设置线条的端点样式ind
-     * @param {String} lineCap 线条的结束端点样式
-     */
-    [
-      'setLineCap',
-      (lineCap) => {
-        ctx.lineCap = lineCap
-      }
-    ],
-    /**
-     * 设置线条的交点样式
-     * @param {String} lineJoin 线条的结束交点样式
-     */
-    [
-      'setLineJoin',
-      (lineJoin) => {
-        ctx.lineJoin = lineJoin
-      }
-    ],
-    /**
-     * 设置线条的宽度
-     * @param {number} lineWidth 线条的宽度，单位px
-     */
-    [
-      'setLineWidth',
-      (lineWidth) => {
-        ctx.lineWidth = lineWidth
-      }
-    ],
-    /**
-     * 设置最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。当 CanvasContext.setLineJoin() 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。
-     * @param {number} miterLimit 最大斜接长度
-     */
-    [
-      'setMiterLimit',
-      (miterLimit) => {
-        ctx.miterLimit = miterLimit
-      }
-    ],
-    /**
-     * 设定阴影样式。
-     * @param {number} offsetX 阴影相对于形状在水平方向的偏移，默认值为 0。
-     * @param {number} offsetY 阴影相对于形状在竖直方向的偏移，默认值为 0。
-     * @param {number} blur 阴影的模糊级别，数值越大越模糊。范围 0- 100。，默认值为 0。
-     * @param {string} color 阴影的颜色。默认值为 black。
-     */
-    [
-      'setShadow',
-      (offsetX, offsetY, blur, color) => {
-        ctx.shadowOffsetX = offsetX
-        ctx.shadowOffsetY = offsetY
-        ctx.shadowColor = blur
-        ctx.shadowBlur = color
-      }
-    ],
-    /**
-     * 设置描边颜色。
-     * @param {String} color 描边的颜色，默认颜色为 black。
-     */
-    [
-      'setStrokeStyle',
-      (color) => {
-        ctx.strokeStyle = color
-      }
-    ],
-    /**
-     * 设置文字的对齐
-     * @param {String} align 文字的对齐方式
-     */
-    [
-      'setTextAlign',
-      (align) => {
-        ctx.textAlign = align
-      },
-      true
-    ],
-    /**
-     * 设置文字的竖直对齐
-     * @param {string} textBaseline 文字的竖直对齐方式
-     */
-    [
-      'setTextBaseline',
-      (textBaseline) => {
-        ctx.textBaseline = textBaseline
-      },
-      true
-    ],
-    [
-      'drawImage',
-      (url, ...extra) => {
-        // 需要转换为 Image
-        if (typeof url === 'string') {
-          const img = new Image()
-          img.src = url
-          return new Promise((resolve, reject) => {
-            img.onload = () => {
-              ctx.drawImage(img, ...extra)
-              resolve()
-            }
-            img.onerror = reject
-          })
-        }
-
-        ctx.drawImage(url, ...extra)
-      }
-    ]
-  ]
-
-  const functionProperties = [
-    ['arc'],
-    ['arcTo'],
-    ['beginPath'],
-    ['bezierCurveTo'],
-    ['clearRect'],
-    ['clip'],
-    ['closePath'],
-    ['createLinearGradient', true],
-    ['createPattern', true],
-    ['fill'],
-    ['fillRect'],
-    ['fillText'],
-    ['lineTo'],
-    ['measureText', true],
-    ['moveTo'],
-    ['quadraticCurveTo'],
-    ['rect'],
-    ['restore'],
-    ['rotate'],
-    ['save'],
-    ['scale'],
-    ['setTransform'],
-    ['stroke'],
-    ['strokeRect'],
-    ['strokeText'],
-    ['transform'],
-    ['translate']
-  ]
-
-  const valueProperties = [
-    ['fillStyle'],
-    ['font', true],
-    ['globalAlpha'],
-    ['lineCap'],
-    ['lineDashOffset'],
-    ['lineJoin'],
-    ['lineWidth'],
-    ['miterLimit'],
-    ['shadowOffsetX'],
-    ['shadowOffsetY'],
-    ['shadowColor'],
-    ['shadowBlur'],
-    ['strokeStyle'],
-    ['textAlign', true],
-    ['textBaseline', true],
-    ['direction', true],
-    ['globalCompositeOperation'],
-    ['imageSmoothingEnabled '],
-    ['imageSmoothingQuality'],
-    ['filter']
-  ]
-
-  const CanvasContext = { __raw__: ctx }
-
-  customProperties.forEach(([funcName, func, setImmediatly]) => {
-    Object.defineProperty(CanvasContext, funcName, {
-      get () {
-        const fn = enqueueActions(func)
-
-        return (...args) => {
-          // 立即触发
-          if (setImmediatly) {
-            func.apply(ctx, args)
-          }
-
-          return fn(...args)
-        }
-      },
-      enumerable: true
-    })
-  })
-
-  functionProperties.forEach(([funcName, isSync]) => {
-    Object.defineProperty(CanvasContext, funcName, {
-      get: isSync
-        ? () => ctx[funcName].bind(ctx)
-        : () => enqueueActions(ctx[funcName]),
-      enumerable: true
-    })
-  })
-
-  valueProperties.forEach(([propertyName, setImmediatly]) => {
-    Object.defineProperty(CanvasContext, propertyName, {
-      get () {
-        return ctx[propertyName]
-      },
-      set (value) {
-        if (setImmediatly) {
-          ctx[propertyName] = value
-        }
-
-        enqueueActions(() => {
-          ctx[propertyName] = value
-        })()
-        return true
-      }
-    })
-  })
-
-  Object.defineProperty(CanvasContext, 'createCircularGradient', {
-    /**
-     * @param {number} x
-     * @param {number} y
-     * @param {number} r
-     */
-    value: (x, y, r) => {
-      const radialGradient = ctx.createRadialGradient(x, y, 0, x, y, r)
-
-      return radialGradient
-    }
-  })
-
-  Object.defineProperty(CanvasContext, 'draw', {
-    value: draw
-  })
-
-  return CanvasContext
-}
-
-export default createCanvasContext

package/src/api/canvas/index.js

@@ -1,4 +0,0 @@
-export { default as canvasGetImageData } from './canvasGetImageData'
-export { default as canvasPutImageData } from './canvasPutImageData'
-export { default as canvasToTempFilePath } from './canvasToTempFilePath'
-export { default as createCanvasContext } from './createCanvasContext'

package/src/api/clipboard/index.js

@@ -1,113 +0,0 @@
-/**
- * 剪贴板部分的api参考了Chameleon项目的实现：
- *
- * setClipboardData: https://github.com/chameleon-team/chameleon-api/tree/master/src/interfaces/setClipBoardData
- * getClipboardData: https://github.com/chameleon-team/chameleon-api/tree/master/src/interfaces/getClipBoardData
- */
-
-import { setStorage, getStorage } from '../storage/index'
-
-const CLIPBOARD_STORAGE_NAME = 'taro_clipboard'
-
-document.addEventListener('copy', () => {
-  setStorage({
-    key: CLIPBOARD_STORAGE_NAME,
-    data: window.getSelection().toString()
-  }).catch(e => {
-    console.error(e)
-  })
-})
-
-/**
- * 成功回调
- * @callback SuccessCallback
- * @param {{ errMsg: string, data: string }}
- */
-
-/**
- * 失败回调
- * @callback FailCallback
- * @param {{ errMsg: string }}
- */
-
-/**
- * 完成回调
- * @callback CompleteCallback
- */
-
-/**
- * 设置系统剪贴板的内容
- * @param {{ data: string, success: SuccessCallback, fail: FailCallback, complete: CompleteCallback }} object 参数
- * @returns {Promise<{ errMsg: string, data: string }>}
- */
-export const setClipboardData = ({ data, success, fail, complete }) => {
-  return new Promise((resolve, reject) => {
-    setStorage({
-      key: CLIPBOARD_STORAGE_NAME,
-      data
-    }).then(() => {
-      /**
-       * 已于 iPhone 6s Plus iOS 13.1.3 上的 Safari 测试通过
-       * iOS < 10 的系统可能无法使用编程方式访问剪贴板，参考：
-       * https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios/34046084
-       */
-      if (typeof document.execCommand === 'function') {
-        const textarea = document.createElement('textarea')
-        textarea.readOnly = true
-        textarea.value = data
-        textarea.style.position = 'absolute'
-        textarea.style.width = '100px'
-        textarea.style.left = '-10000px'
-        document.body.appendChild(textarea)
-        textarea.select()
-        textarea.setSelectionRange(0, textarea.value.length)
-        document.execCommand('copy')
-        document.body.removeChild(textarea)
-      } else {
-        throw new Error('Unsupported Function: \'document.execCommand\'.')
-      }
-      const res = {
-        errMsg: 'setClipboardData:ok',
-        data
-      }
-      success && success(res)
-      complete && complete()
-      resolve(res)
-    }).catch(e => {
-      const res = {
-        errMsg: `setClipboardData:fail ${e.message}`
-      }
-      fail && fail(res)
-      complete && complete()
-      reject(res)
-    })
-  })
-}
-
-/**
- * 获取系统剪贴板的内容
- * @param {{ success: SuccessCallback, fail: FailCallback, complete: CompleteCallback  }} object 参数
- * @returns {Promise<{ errMsg: string, data: string }>}
- */
-export const getClipboardData = ({ success, fail, complete } = {}) => {
-  return new Promise((resolve, reject) => {
-    getStorage({
-      key: CLIPBOARD_STORAGE_NAME
-    }).then(data => {
-      const res = {
-        errMsg: 'getClipboardData:ok',
-        data
-      }
-      success && success(res)
-      complete && complete()
-      resolve(res)
-    }).catch(e => {
-      const res = {
-        errMsg: `getClipboardData:fail ${e.message}`
-      }
-      fail && fail(res)
-      complete && complete()
-      reject(res)
-    })
-  })
-}

package/src/api/compass/index.js

@@ -1,99 +0,0 @@
-import { createCallbackManager, successHandler, errorHandler } from '../utils/index'
-
-let compassListener
-const callbackManager = createCallbackManager()
-
-/**
- * 停止监听罗盘数据
- * @param {Object} object 参数
- * @param {function} [object.success] 接口调用成功的回调函数
- * @param {function} [object.fail] 接口调用失败的回调函数
- * @param {function} [object.complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
-const stopCompass = ({ success, fail, complete } = {}) => {
-  try {
-    window.removeEventListener('deviceorientation', compassListener, true)
-    return successHandler(success, complete)({
-      errMsg: 'stopCompass:ok'
-    })
-  } catch (e) {
-    return errorHandler(fail, complete)({
-      errMsg: `stopCompass:fail ${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)
-  }
-}
-
-/**
- * 开始监听罗盘数据
- * @param {Object} object 参数
- * @param {function} [object.success] 接口调用成功的回调函数
- * @param {function} [object.fail] 接口调用失败的回调函数
- * @param {function} [object.complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
-const startCompass = ({ success, fail, complete } = {}) => {
-  try {
-    if (window.DeviceOrientationEvent) {
-      if (compassListener) {
-        stopCompass()
-      }
-      compassListener = getDeviceOrientationListener(200)
-      window.addEventListener('deviceorientation', compassListener, true)
-    } else {
-      throw new Error('compass is not supported')
-    }
-    return successHandler(success, complete)({
-      errMsg: 'startCompass:ok'
-    })
-  } catch (e) {
-    return errorHandler(fail, complete)({
-      errMsg: `startCompass:fail ${e.message}`
-    })
-  }
-}
-
-/**
- * @typedef CompassParam 回调参数
- * @property {number} direction 面对的方向度数
- * @property {Accuracy} [accuracy] 精度
- */
-
-/**
- * @typedef {'high'|'medium'|'low'|'no-contact'|'unreliable'|'unknow'|number} Accuracy
- * 由于平台差异，accuracy 在 iOS/Android 的值不同。
- * iOS：accuracy 是一个 number 类型的值，表示相对于磁北极的偏差。0 表示设备指向磁北，90 表示指向东，180 表示指向南，依此类推。
- * Android：accuracy 是一个 string 类型的枚举值。
- * high 高精度
- * medium 中等精度
- * low 低精度
- * no-contact 不可信，传感器失去连接
- * unreliable 不可信，原因未知
- * unknow ${value} 未知的精度枚举值，即该 Android 系统此时返回的表示精度的 value 不是一个标准的精度枚举值
- */
-
-/**
- * 监听罗盘数据变化事件。频率：5 次/秒，接口调用后会自动开始监听，可使用 wx.stopCompass 停止监听。
- * @param {(obj: CompassParam) => void} callback 罗盘数据变化事件的回调函数
- */
-const onCompassChange = callback => {
-  callbackManager.add(callback)
-}
-
-export {
-  stopCompass,
-  startCompass,
-  onCompassChange
-}

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