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

package/src/api/index.ts

@@ -0,0 +1,25 @@
+export * from './ad'
+export * from './ai'
+export * from './base'
+export * from './canvas'
+export * from './cloud'
+export * from './data-analysis'
+export * from './device'
+export * from './ext'
+export * from './files'
+export * from './framework'
+export * from './location'
+export * from './media'
+export * from './navigate'
+export * from './network'
+export * from './open-api'
+export * from './payment'
+export * from './route'
+export * from './share'
+export * from './storage'
+export * from './ui'
+export * from './worker'
+export * from './wxml'
+
+export * from './alipay'
+export * from './swan'

package/src/api/location/chooseLocation.ts

@@ -0,0 +1,106 @@
+import Taro from '@tarojs/api'
+import { MethodHandler } from '../utils/handler'
+import './style.css'
+
+function createLocationChooser (handler, key = LOCATION_APIKEY) {
+  const html = `
+<div class='taro_choose_location'>
+  <div class='taro_choose_location_bar'>
+    <div class='taro_choose_location_back'></div>
+    <p class='taro_choose_location_title'>位置</p>
+    <button class='taro_choose_location_submit'>完成</button>
+  </div>
+  <iframe class='taro_choose_location_frame' frameborder='0' src='https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${key}&referer=myapp'></iframe>
+</div>
+`
+  const container = document.createElement('div')
+  container.innerHTML = html
+  const main: HTMLDivElement = container.querySelector('.taro_choose_location') as HTMLDivElement
+
+  function show () {
+    setTimeout(() => {
+      main.style.top = '0'
+    })
+  }
+
+  function hide () {
+    main.style.top = '100%'
+  }
+
+  function back () {
+    handler({ errMsg: 'cancel' })
+    hide()
+  }
+
+  function submit () {
+    handler()
+    hide()
+  }
+
+  function remove () {
+    container.remove()
+    window.removeEventListener('popstate', back)
+  }
+
+  container.querySelector('.taro_choose_location_back')?.addEventListener('click', back)
+  container.querySelector('.taro_choose_location_submit')?.addEventListener('click', submit)
+
+  window.addEventListener('popstate', back)
+
+  return {
+    show,
+    remove,
+    container
+  }
+}
+
+/**
+ * 打开地图选择位置。
+ */
+export const chooseLocation: typeof Taro.chooseLocation = ({ success, fail, complete } = {}) => {
+  const key = LOCATION_APIKEY
+  const handle = new MethodHandler({ name: 'chooseLocation', success, fail, complete })
+  return new Promise((resolve, reject) => {
+    const chooseLocation: Partial<Taro.chooseLocation.SuccessCallbackResult> = {}
+    if (!key) {
+      console.warn('chooseLocation api 依赖腾讯地图定位api，需要在 defineConstants 中配置 LOCATION_APIKEY')
+      return handle.fail({
+        errMsg: 'LOCATION_APIKEY needed'
+      }, reject)
+    }
+
+    const onMessage = event => {
+      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
+      const loc = event.data
+
+      // 防止其他应用也会向该页面 post 信息，需判断 module 是否为'locationPicker'
+      if (!loc || loc.module !== 'locationPicker') return
+
+      chooseLocation.name = loc.poiname
+      chooseLocation.address = loc.poiaddress
+      chooseLocation.latitude = loc.latlng.lat
+      chooseLocation.longitude = loc.latlng.lng
+    }
+
+    const chooser = createLocationChooser(res => {
+      window.removeEventListener('message', onMessage, false)
+      setTimeout(() => {
+        chooser.remove()
+      }, 300)
+      if (res) {
+        return handle.fail(res, reject)
+      } else {
+        if (chooseLocation.latitude && chooseLocation.longitude) {
+          return handle.success(chooseLocation, resolve)
+        } else {
+          return handle.fail({}, reject)
+        }
+      }
+    }, key)
+
+    document.body.appendChild(chooser.container)
+
+    window.addEventListener('message', onMessage, false)
+    chooser.show()
+  })
+}

package/src/api/location/index.ts

@@ -0,0 +1,19 @@
+import { processOpenApi, temporarilyNotSupport } from '../utils/index'
+
+// 位置
+export const stopLocationUpdate = temporarilyNotSupport('stopLocationUpdate')
+export const startLocationUpdateBackground = temporarilyNotSupport('startLocationUpdateBackground')
+export const startLocationUpdate = temporarilyNotSupport('startLocationUpdate')
+
+export const openLocation = processOpenApi('openLocation', { 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 const choosePoi = temporarilyNotSupport('choosePoi')
+
+export * from './chooseLocation'

package/src/api/location/style.css

@@ -1,4 +1,4 @@
-.taro_chooselocation {
+.taro_choose_location {
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -10,7 +10,7 @@
   z-index: 1;
 }
 
-.taro_chooselocation_bar {
+.taro_choose_location_bar {
   display: flex;
   flex: 0 95px;
   height: 95px;
@@ -18,7 +18,7 @@
   color: #090909;
 }
 
-.taro_chooselocation_back {
+.taro_choose_location_back {
   flex: 0 45px;
   position: relative;
   width: 33px;
@@ -26,7 +26,7 @@
   margin-top: 30px;
 }
 
-.taro_chooselocation_back::before {
+.taro_choose_location_back::before {
   content: '';
   position: absolute;
   top: 0;
@@ -41,7 +41,7 @@
   border-left-color: transparent;
 }
 
-.taro_chooselocation_back::after {
+.taro_choose_location_back::after {
   content: '';
   position: absolute;
   display: block;
@@ -56,13 +56,13 @@
   border-left-color: transparent;
 }
 
-.taro_chooselocation_title {
+.taro_choose_location_title {
   flex: 1;
   line-height: 95px;
   padding-left: 30px;
 }
 
-.taro_chooselocation_submit {
+.taro_choose_location_submit {
   width: 110px;
   height: 60px;
   color: #fff;
@@ -74,6 +74,6 @@
   margin: 18px 30px 0 0;
 }
 
-.taro_chooselocation_frame {
+.taro_choose_location_frame {
   flex: 1;
 }

package/src/api/media/audio/index.ts

@@ -0,0 +1,105 @@
+import Taro from '@tarojs/api'
+import { temporarilyNotSupport } from '../../utils'
+import { CallbackManager } from '../../utils/handler'
+
+// 音频
+class InnerAudioContext implements Taro.InnerAudioContext {
+  Instance?: HTMLAudioElement
+  errorStack: CallbackManager
+  stopStack: CallbackManager
+
+  constructor () {
+    this.Instance = new Audio()
+    this.errorStack = new CallbackManager()
+    this.stopStack = new CallbackManager()
+
+    Taro.eventCenter.on('__taroRouterChange', () => { this.stop() })
+  }
+
+  set autoplay (e) { this.setProperty('autoplay', e) }
+  get autoplay () { return this.Instance?.autoplay || false }
+  get buffered () { return this.Instance?.buffered.length || 0 }
+  get currentTime () { return this.Instance?.currentTime || 0 }
+  get duration () { return this.Instance?.duration || 0 }
+  set loop (e) { this.setProperty('loop', e) }
+  get loop () { return this.Instance?.loop || false }
+  get paused () { return this.Instance?.paused || true }
+  set src (e) { this.setProperty('src', e) }
+  get src () { return this.Instance?.src || '' }
+  set volume (e) { this.setProperty('volume', e) }
+  get volume () { return this.Instance?.volume || 0 }
+  set playbackRate (e) { this.setProperty('playbackRate', e) }
+  get playbackRate () { return this.Instance?.volume || 0 }
+  get obeyMuteSwitch () { return true }
+  set startTime (e) { this.setProperty('startTime', e) }
+  get startTime () { return this.Instance?.volume || 0 }
+
+  private setProperty (key: string, value: unknown) {
+    if (this.Instance) {
+      this.Instance[key] = value
+    }
+  }
+
+  play = () => this.Instance?.play()
+
+  pause = () => this.Instance?.pause()
+
+  stop = () => {
+    this.pause()
+    this.seek(0)
+    this.stopStack.trigger()
+  }
+
+  seek = (position: number) => {
+    if (this.Instance) {
+      this.Instance.currentTime = position
+    }
+  }
+
+  /**
+   * @TODO destroy得并不干净
+   */
+  destroy = () => {
+    this.stop()
+    if (this.Instance) {
+      document.body.removeChild(this.Instance)
+      this.Instance = undefined
+    }
+  }
+
+  onCanplay = (callback = () => {}) => this.Instance?.addEventListener('oncanplay', callback)
+  onPlay = (callback = () => {}) => this.Instance?.addEventListener('onplay', callback)
+  onPause = (callback = () => {}) => this.Instance?.addEventListener('onpause', callback)
+  onStop = (callback = () => {}) => this.stopStack.add(callback)
+  onEnded = (callback = () => {}) => this.Instance?.addEventListener('onended', callback)
+  onTimeUpdate = (callback = () => {}) => this.Instance?.addEventListener('ontimeUpdate', callback)
+  onError = (callback?: ((res: Taro.InnerAudioContext.onErrorDetail) => void)) => this.errorStack.add(callback)
+  onWaiting = (callback = () => {}) => this.Instance?.addEventListener('onwaiting', callback)
+  onSeeking = (callback = () => {}) => this.Instance?.addEventListener('onseeking', callback)
+  onSeeked = (callback = () => {}) => this.Instance?.addEventListener('onseeked', callback)
+  offCanplay = (callback = () => {}) => this.Instance?.removeEventListener('offcanplay', callback)
+  offPlay = (callback = () => {}) => this.Instance?.removeEventListener('offplay', callback)
+  offPause = (callback = () => {}) => this.Instance?.removeEventListener('offpause', callback)
+  offStop = (callback = () => {}) => this.stopStack.remove(callback)
+  offEnded = (callback = () => {}) => this.Instance?.removeEventListener('offended', callback)
+  offTimeUpdate = (callback = () => {}) => this.Instance?.removeEventListener('offtimeUpdate', callback)
+  offError = (callback = () => {}) => this.errorStack.remove(callback)
+  offWaiting = (callback = () => {}) => this.Instance?.removeEventListener('offwaiting', callback)
+  offSeeking = (callback = () => {}) => this.Instance?.removeEventListener('offseeking', callback)
+  offSeeked = (callback = () => {}) => this.Instance?.removeEventListener('offseeked', callback)
+}
+
+export const stopVoice = temporarilyNotSupport('stopVoice')
+export const setInnerAudioOption = temporarilyNotSupport('setInnerAudioOption')
+export const playVoice = temporarilyNotSupport('playVoice')
+export const pauseVoice = temporarilyNotSupport('pauseVoice')
+export const getAvailableAudioSources = temporarilyNotSupport('getAvailableAudioSources')
+export const createWebAudioContext = temporarilyNotSupport('createWebAudioContext')
+export const createMediaAudioPlayer = temporarilyNotSupport('createMediaAudioPlayer')
+
+/**
+ * 创建内部 audio 上下文 InnerAudioContext 对象。
+ */
+export const createInnerAudioContext: typeof Taro.createInnerAudioContext = () => new InnerAudioContext()
+
+export const createAudioContext = temporarilyNotSupport('createAudioContext')

package/src/api/media/background-audio.ts

@@ -0,0 +1,12 @@
+import { temporarilyNotSupport } from '../utils'
+
+// 背景音频
+export const stopBackgroundAudio = temporarilyNotSupport('stopBackgroundAudio')
+export const seekBackgroundAudio = temporarilyNotSupport('seekBackgroundAudio')
+export const playBackgroundAudio = temporarilyNotSupport('playBackgroundAudio')
+export const pauseBackgroundAudio = temporarilyNotSupport('pauseBackgroundAudio')
+export const onBackgroundAudioStop = temporarilyNotSupport('onBackgroundAudioStop')
+export const onBackgroundAudioPlay = temporarilyNotSupport('onBackgroundAudioPlay')
+export const onBackgroundAudioPause = temporarilyNotSupport('onBackgroundAudioPause')
+export const getBackgroundAudioPlayerState = temporarilyNotSupport('getBackgroundAudioPlayerState')
+export const getBackgroundAudioManager = temporarilyNotSupport('getBackgroundAudioManager')

package/src/api/media/camera.ts

@@ -0,0 +1,4 @@
+import { temporarilyNotSupport } from '../utils'
+
+// 相机
+export const createCameraContext = temporarilyNotSupport('createCameraContext')

package/src/api/media/editor.ts

@@ -0,0 +1,29 @@
+import Taro from '@tarojs/api'
+import { temporarilyNotSupport } from '../utils'
+
+// 富文本
+export class EditorContext implements Taro.EditorContext {
+  blur = temporarilyNotSupport('EditorContext.blur')
+
+  clear = temporarilyNotSupport('EditorContext.clear')
+
+  format = temporarilyNotSupport('EditorContext.format')
+
+  getContents = temporarilyNotSupport('EditorContext.getContents')
+
+  insertDivider = temporarilyNotSupport('EditorContext.insertDivider')
+
+  insertImage = temporarilyNotSupport('EditorContext.insertImage')
+
+  insertText = temporarilyNotSupport('EditorContext.insertText')
+
+  redo = temporarilyNotSupport('EditorContext.redo')
+
+  removeFormat = temporarilyNotSupport('EditorContext.removeFormat')
+
+  scrollIntoView = temporarilyNotSupport('EditorContext.scrollIntoView')
+
+  setContents = temporarilyNotSupport('EditorContext.setContents')
+
+  undo = temporarilyNotSupport('EditorContext.undo')
+}

package/src/api/media/image/chooseImage.ts

@@ -0,0 +1,78 @@
+import Taro from '@tarojs/api'
+
+import { MethodHandler } from '../../utils/handler'
+import { shouldBeObject, getParameterError } from '../../utils'
+
+/**
+ * 从本地相册选择图片或使用相机拍照。
+ */
+export const chooseImage: typeof Taro.chooseImage = function (options) {
+  // options must be an Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `chooseImage:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+
+  const { count = 1, success, fail, complete, imageId = 'taroChooseImage' } = options
+  const handle = new MethodHandler({ name: 'chooseImage', success, fail, complete })
+  const res: Partial<Taro.chooseImage.SuccessCallbackResult> = {
+    tempFilePaths: [],
+    tempFiles: []
+  }
+
+  if (count && typeof count !== 'number') {
+    res.errMsg = getParameterError({
+      para: 'count',
+      correct: 'Number',
+      wrong: count
+    })
+    return handle.fail(res)
+  }
+
+  let el = document.getElementById(imageId)
+  if (!el) {
+    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)
+    el = document.getElementById(imageId)
+  } else {
+    if (count > 1) {
+      el.setAttribute('multiple', 'multiple')
+    } else {
+      el.removeAttribute('multiple')
+    }
+  }
+
+  return new Promise(resolve => {
+    const TaroMouseEvents = document.createEvent('MouseEvents')
+    TaroMouseEvents.initEvent('click', true, true)
+    if (el) {
+      el.dispatchEvent(TaroMouseEvents)
+      el.onchange = function (e) {
+        const target = e.target as HTMLInputElement
+        if (target) {
+          const files = target.files || []
+          const arr = [...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 })
+          })
+          handle.success(res, resolve)
+          target.value = ''
+        }
+      }
+    }
+  })
+}

package/src/api/media/image/getImageInfo.ts

@@ -0,0 +1,35 @@
+import Taro from '@tarojs/api'
+
+import { shouldBeObject } from '../../utils'
+import { MethodHandler } from '../../utils/handler'
+
+/**
+ * 获取图片信息。网络图片需先配置download域名才能生效。
+ */
+export const getImageInfo: typeof Taro.getImageInfo = (options) => {
+  // options must be an Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `getImageInfo:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+
+  const { src, success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'getImageInfo', success, fail, complete })
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.onload = () => {
+      handle.success({
+        width: image.naturalWidth,
+        height: image.naturalHeight
+      }, resolve)
+    }
+    image.onerror = (e: any) => {
+      handle.fail({
+        errMsg: e.message
+      }, reject)
+    }
+    image.src = src
+  })
+}

package/src/api/media/image/index.ts

@@ -0,0 +1,13 @@
+import { temporarilyNotSupport } from '../../utils'
+
+// 图片
+export const saveImageToPhotosAlbum = temporarilyNotSupport('saveImageToPhotosAlbum')
+export const previewMedia = temporarilyNotSupport('previewMedia')
+
+export * from './previewImage'
+export * from './getImageInfo'
+
+export const compressImage = temporarilyNotSupport('compressImage')
+export const chooseMessageFile = temporarilyNotSupport('chooseMessageFile')
+
+export * from './chooseImage'

package/src/api/media/image/previewImage.ts

@@ -0,0 +1,101 @@
+import Taro from '@tarojs/taro'
+
+import { shouldBeObject } from '../../utils'
+import { MethodHandler } from '../../utils/handler'
+
+/**
+ * previewImage api基于开源的React组件[react-wx-images-viewer](https://github.com/react-ld/react-wx-images-viewer)开发，感谢！
+ */
+
+/**
+ * 在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
+ */
+export const previewImage: typeof Taro.previewImage = async (options) => {
+  function loadImage (url: string, loadFail: typeof fail): Promise<Node> {
+    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 loadFail === 'function') {
+        image.addEventListener('error', (err) => {
+          loadFail({ errMsg: err.message })
+        })
+      }
+    })
+  }
+
+  // options must be an Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `previewImage:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+
+  const { urls = [], current = '', success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'previewImage', success, fail, complete })
+  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')
+  // @ts-ignore
+  swiper.full = true
+
+  let children: Node[] = []
+  try {
+    children = await Promise.all(
+      urls.map(e => loadImage(e, fail))
+    )
+  } catch (error) {
+    return handle.fail({
+      errMsg: error
+    })
+  }
+
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i]
+    swiper.appendChild(child)
+  }
+
+  const currentIndex = urls.indexOf(current)
+  // @ts-ignore
+  swiper.current = currentIndex
+
+  container.appendChild(swiper)
+  document.body.appendChild(container)
+
+  return handle.success()
+}

package/src/api/media/index.ts

@@ -0,0 +1,13 @@
+export * from './audio'
+export * from './background-audio'
+export * from './camera'
+export * from './editor'
+export * from './image'
+export * from './live'
+export * from './map'
+export * from './media-recorder'
+export * from './recorder'
+export * from './video'
+export * from './video-decoder'
+export * from './video-processing'
+export * from './voip'

package/src/api/media/live.ts

@@ -0,0 +1,5 @@
+import { temporarilyNotSupport } from '../utils'
+
+// 实时音视频
+export const createLivePusherContext = temporarilyNotSupport('createLivePusherContext')
+export const createLivePlayerContext = temporarilyNotSupport('createLivePlayerContext')

package/src/api/media/map.ts

@@ -0,0 +1,4 @@
+import { temporarilyNotSupport } from '../utils'
+
+// 地图
+export const createMapContext = temporarilyNotSupport('createMapContext')

package/src/api/media/media-recorder.ts

@@ -0,0 +1,4 @@
+import { temporarilyNotSupport } from '../utils'
+
+// 画面录制器
+export const createMediaRecorder = temporarilyNotSupport('createMediaRecorder')

package/src/api/media/recorder.ts

@@ -0,0 +1,6 @@
+import { temporarilyNotSupport } from '../utils'
+
+// 录音
+export const stopRecord = temporarilyNotSupport('stopRecord')
+export const startRecord = temporarilyNotSupport('startRecord')
+export const getRecorderManager = temporarilyNotSupport('getRecorderManager')