From 313f13540b968a60623be9394d0b40c286c36dc6 Mon Sep 17 00:00:00 2001
From: fxy060608 <fxy060608@gmail.com>
Date: Wed, 7 Apr 2021 11:38:38 +0800
Subject: [PATCH] chore: allowJs

---
 .../src/service/context/createVideoContext.ts |   73 ++
 .../service/ui/createIntersectionObserver.ts  |    4 +-
 packages/uni-core/src/helpers/bridge.ts       |   10 +-
 packages/uni-h5/dist/uni-h5.esm.js            |    8 +-
 packages/uni-h5/src/platform/index.ts         |    3 +-
 .../api/base}/getBaseSystemInfo.ts            |    0
 .../service/api/context/operateVideoPlayer.ts |   19 +
 .../service/api/device/getSystemInfoSync.ts   |    2 +-
 .../uni-h5/src/view/components/ad/index.vue   |  426 +++++++
 .../src/view/components/cover-image/index.vue |   72 ++
 .../src/view/components/cover-view/index.vue  |   79 ++
 .../uni-h5/src/view/components/map/index.vue  |  941 ++++++++++++++
 .../src/view/components/picker/index.vue      |  873 +++++++++++++
 .../src/view/components/video/index.vue       | 1079 +++++++++++++++++
 .../src/view/components/web-view/README.md    |   15 +
 .../src/view/components/web-view/index.vue    |   69 ++
 tsconfig.json                                 |    2 +-
 17 files changed, 3660 insertions(+), 15 deletions(-)
 create mode 100644 packages/uni-api/src/service/context/createVideoContext.ts
 rename packages/uni-h5/src/{platform => service/api/base}/getBaseSystemInfo.ts (100%)
 create mode 100644 packages/uni-h5/src/service/api/context/operateVideoPlayer.ts
 create mode 100644 packages/uni-h5/src/view/components/ad/index.vue
 create mode 100644 packages/uni-h5/src/view/components/cover-image/index.vue
 create mode 100644 packages/uni-h5/src/view/components/cover-view/index.vue
 create mode 100644 packages/uni-h5/src/view/components/map/index.vue
 create mode 100644 packages/uni-h5/src/view/components/picker/index.vue
 create mode 100644 packages/uni-h5/src/view/components/video/index.vue
 create mode 100644 packages/uni-h5/src/view/components/web-view/README.md
 create mode 100644 packages/uni-h5/src/view/components/web-view/index.vue

diff --git a/packages/uni-api/src/service/context/createVideoContext.ts b/packages/uni-api/src/service/context/createVideoContext.ts
new file mode 100644
index 000000000..15e6a874e
--- /dev/null
+++ b/packages/uni-api/src/service/context/createVideoContext.ts
@@ -0,0 +1,73 @@
+import { ComponentPublicInstance } from 'vue'
+import { operateVideoPlayer } from '@dcloudio/uni-platform'
+import { getCurrentPageVm } from '../../helpers/utils'
+
+const RATES = [0.5, 0.8, 1.0, 1.25, 1.5, 2.0]
+
+export class VideoContext {
+  private id: string
+  private vm: ComponentPublicInstance
+  constructor(id: string, vm: ComponentPublicInstance) {
+    this.id = id
+    this.vm = vm
+  }
+
+  play() {
+    operateVideoPlayer(this.id, this.vm, 'play')
+  }
+
+  pause() {
+    operateVideoPlayer(this.id, this.vm, 'pause')
+  }
+
+  stop() {
+    operateVideoPlayer(this.id, this.vm, 'stop')
+  }
+
+  seek(position: number) {
+    operateVideoPlayer(this.id, this.vm, 'seek', {
+      position,
+    })
+  }
+
+  sendDanmu(args: WechatMiniprogram.Danmu) {
+    operateVideoPlayer(this.id, this.vm, 'sendDanmu', args)
+  }
+
+  playbackRate(rate: number) {
+    if (!~RATES.indexOf(rate)) {
+      rate = 1.0
+    }
+    operateVideoPlayer(this.id, this.vm, 'playbackRate', {
+      rate,
+    })
+  }
+
+  requestFullScreen(
+    args: WechatMiniprogram.VideoContextRequestFullScreenOption = {}
+  ) {
+    operateVideoPlayer(this.id, this.vm, 'requestFullScreen', args)
+  }
+
+  exitFullScreen() {
+    operateVideoPlayer(this.id, this.vm, 'exitFullScreen')
+  }
+
+  showStatusBar() {
+    operateVideoPlayer(this.id, this.vm, 'showStatusBar')
+  }
+
+  hideStatusBar() {
+    operateVideoPlayer(this.id, this.vm, 'hideStatusBar')
+  }
+}
+
+export function createVideoContext(
+  id: string,
+  context: ComponentPublicInstance
+) {
+  if (context) {
+    return new VideoContext(id, context)
+  }
+  return new VideoContext(id, getCurrentPageVm())
+}
diff --git a/packages/uni-api/src/service/ui/createIntersectionObserver.ts b/packages/uni-api/src/service/ui/createIntersectionObserver.ts
index 937270910..39c7ae3ff 100644
--- a/packages/uni-api/src/service/ui/createIntersectionObserver.ts
+++ b/packages/uni-api/src/service/ui/createIntersectionObserver.ts
@@ -1,7 +1,5 @@
 import { extend } from '@vue/shared'
 
-import { ServiceJSBridge } from '@dcloudio/uni-core'
-
 import { defineSyncApi } from '../../helpers/api'
 import { getCurrentPageVm } from '../../helpers/utils'
 
@@ -37,7 +35,7 @@ const reqComponentObserverCallbacks: Record<number, ObserveResultCallback> = {}
 
 export const API_CREATE_INTERSECTION_OBSERVER = 'createIntersectionObserver'
 
-ServiceJSBridge.subscribe(
+UniServiceJSBridge.subscribe(
   'requestComponentObserver',
   ({ reqId, reqEnd, res }: requestComponentObserver) => {
     const callback = reqComponentObserverCallbacks[reqId]
diff --git a/packages/uni-core/src/helpers/bridge.ts b/packages/uni-core/src/helpers/bridge.ts
index a29df6151..d9014656e 100644
--- a/packages/uni-core/src/helpers/bridge.ts
+++ b/packages/uni-core/src/helpers/bridge.ts
@@ -1,18 +1,18 @@
 import { extend } from '@vue/shared'
-// @ts-ignore TODO 等待 vue3 的兼容模式自带emitter
+// TODO 等待 vue3 的兼容模式自带emitter
 import E from './TinyEmitter'
 
 export function initBridge(
   namespace: 'service' | 'view'
-): UniApp.UniServiceJSBridge {
+): Partial<UniApp.UniServiceJSBridge> {
   // TODO vue3 compatibility builds
   const emitter = new E()
   return extend(emitter, {
     subscribe(event: string, callback: Function): void {
-      return emitter.on(`${namespace}.${event}`, callback)
+      emitter.on(`${namespace}.${event}`, callback)
     },
     unsubscribe(event: string, callback: Function): void {
-      return emitter.off(`${namespace}.${event}`, callback)
+      emitter.off(`${namespace}.${event}`, callback)
     },
     subscribeHandler(event: string, args: unknown, pageId: number): void {
       if (__DEV__) {
@@ -22,7 +22,7 @@ export function initBridge(
           )}, ${pageId}`
         )
       }
-      return emitter.emit(`${namespace}.${event}`, args, pageId)
+      emitter.emit(`${namespace}.${event}`, args, pageId)
     },
   })
 }
diff --git a/packages/uni-h5/dist/uni-h5.esm.js b/packages/uni-h5/dist/uni-h5.esm.js
index a0a0e023d..fd49f726f 100644
--- a/packages/uni-h5/dist/uni-h5.esm.js
+++ b/packages/uni-h5/dist/uni-h5.esm.js
@@ -103,16 +103,16 @@ function initBridge(namespace) {
   const emitter2 = new E();
   return extend(emitter2, {
     subscribe(event2, callback) {
-      return emitter2.on(`${namespace}.${event2}`, callback);
+      emitter2.on(`${namespace}.${event2}`, callback);
     },
     unsubscribe(event2, callback) {
-      return emitter2.off(`${namespace}.${event2}`, callback);
+      emitter2.off(`${namespace}.${event2}`, callback);
     },
     subscribeHandler(event2, args, pageId) {
       if (process.env.NODE_ENV !== "production") {
         console.log(`[${namespace}][subscribeHandler][${Date.now()}]:${event2}, ${JSON.stringify(args)}, ${pageId}`);
       }
-      return emitter2.emit(`${namespace}.${event2}`, args, pageId);
+      emitter2.emit(`${namespace}.${event2}`, args, pageId);
     }
   });
 }
@@ -8024,7 +8024,7 @@ const defaultOptions = {
 let reqComponentObserverId = 1;
 const reqComponentObserverCallbacks = {};
 const API_CREATE_INTERSECTION_OBSERVER = "createIntersectionObserver";
-ServiceJSBridge.subscribe("requestComponentObserver", ({reqId, reqEnd, res}) => {
+UniServiceJSBridge.subscribe("requestComponentObserver", ({reqId, reqEnd, res}) => {
   const callback = reqComponentObserverCallbacks[reqId];
   if (callback) {
     if (reqEnd) {
diff --git a/packages/uni-h5/src/platform/index.ts b/packages/uni-h5/src/platform/index.ts
index ed451d79e..b55df6b0e 100644
--- a/packages/uni-h5/src/platform/index.ts
+++ b/packages/uni-h5/src/platform/index.ts
@@ -1,2 +1,3 @@
 export * from './getRealPath'
-export { getBaseSystemInfo } from './getBaseSystemInfo'
+export { getBaseSystemInfo } from '../service/api/base/getBaseSystemInfo'
+export { operateVideoPlayer } from '../service/api/context/operateVideoPlayer'
diff --git a/packages/uni-h5/src/platform/getBaseSystemInfo.ts b/packages/uni-h5/src/service/api/base/getBaseSystemInfo.ts
similarity index 100%
rename from packages/uni-h5/src/platform/getBaseSystemInfo.ts
rename to packages/uni-h5/src/service/api/base/getBaseSystemInfo.ts
diff --git a/packages/uni-h5/src/service/api/context/operateVideoPlayer.ts b/packages/uni-h5/src/service/api/context/operateVideoPlayer.ts
new file mode 100644
index 000000000..7930a7ecb
--- /dev/null
+++ b/packages/uni-h5/src/service/api/context/operateVideoPlayer.ts
@@ -0,0 +1,19 @@
+import { ComponentPublicInstance } from 'vue'
+
+export function operateVideoPlayer(
+  videoId: string,
+  vm: ComponentPublicInstance,
+  type: string,
+  data?: unknown
+) {
+  const pageId = vm.$page.id
+  UniServiceJSBridge.publishHandler(
+    pageId + '-video-' + videoId,
+    {
+      videoId,
+      type,
+      data,
+    },
+    pageId
+  )
+}
diff --git a/packages/uni-h5/src/service/api/device/getSystemInfoSync.ts b/packages/uni-h5/src/service/api/device/getSystemInfoSync.ts
index 5b0bd79f5..fb26d556d 100644
--- a/packages/uni-h5/src/service/api/device/getSystemInfoSync.ts
+++ b/packages/uni-h5/src/service/api/device/getSystemInfoSync.ts
@@ -13,7 +13,7 @@ import {
   getScreenWidth,
   getWindowWidth,
   getScreenHeight,
-} from '../../../platform/getBaseSystemInfo'
+} from '../base/getBaseSystemInfo'
 
 /**
  * 获取系统信息-同步
diff --git a/packages/uni-h5/src/view/components/ad/index.vue b/packages/uni-h5/src/view/components/ad/index.vue
new file mode 100644
index 000000000..7c8e90996
--- /dev/null
+++ b/packages/uni-h5/src/view/components/ad/index.vue
@@ -0,0 +1,426 @@
+<template>
+  <uni-ad
+    v-bind="attrs"
+    v-on="$listeners"
+  >
+    <div
+      ref="container"
+      class="uni-ad-container"
+      @click="_onhandle"
+    />
+  </uni-ad>
+</template>
+<script>
+import {
+  subscriber
+} from 'uni-mixins'
+
+class AdConfig {
+  static get instance () {
+    if (this._instance == null) {
+      this._instance = new AdConfig()
+      this._instance._init()
+    }
+    return this._instance
+  }
+
+  static IC = 0
+  static IS = 0
+
+  constructor () {
+    this._instance = null
+    this._adConfig = null
+    this._isLoading = false
+    this._lastError = null
+    this._callbacks = []
+  }
+
+  get adConfig () {
+    return this._adConfig
+  }
+
+  get isExpired () {
+    if (this._adConfig == null) {
+      return true
+    }
+    return (Math.abs(Date.now() - this._adConfig.last) > this.CACHE_TIME)
+  }
+
+  _init () {
+    var config = this._getConfig()
+    if (config === null || !config.last) {
+      return
+    }
+
+    if (!this.isExpired) {
+      this._adConfig = config.data
+    }
+  }
+
+  get (adpid, success, fail) {
+    AdConfig.IC++
+    if (this._adConfig != null) {
+      this._doCallback(adpid, success, fail)
+      if (this.isExpired) {
+        this._loadAdConfig(adpid)
+      }
+      return
+    }
+
+    this._callbacks.push({
+      adpid: adpid,
+      success: success,
+      fail: fail
+    })
+
+    this._loadAdConfig(adpid)
+  }
+
+  _doCallback (adpid, success, fail) {
+    AdConfig.IS++
+    var data = this._adConfig
+    if (data[adpid]) {
+      success(data[adpid])
+    } else {
+      fail(this.ERROR_INVALID_ADPID)
+    }
+  }
+
+  _loadAdConfig (adpid) {
+    if (this._isLoading === true) {
+      return
+    }
+    this._isLoading = true
+
+    uni.request({
+      url: this.URL,
+      method: 'GET',
+      timeout: 5000,
+      data: {
+        d: location.hostname,
+        a: adpid
+      },
+      dataType: 'json',
+      success: (res) => {
+        const rd = res.data
+        if (rd.ret === 0) {
+          const data = rd.data
+
+          this._adConfig = data
+          this._setConfig(data)
+
+          this._callbacks.forEach(({ adpid, success, fail }) => {
+            this._doCallback(adpid, success, fail)
+          })
+        } else {
+          this._callbacks.forEach((i) => {
+            i.fail({ errCode: rd.ret, errMsg: rd.msg })
+          })
+        }
+        this._callbacks = []
+      },
+      fail: (err) => {
+        this._callbacks.forEach((i) => {
+          i.fail(err)
+        })
+        this._callbacks = []
+      },
+      complete: (c) => {
+        this._isLoading = false
+      }
+    })
+  }
+
+  _getConfig () {
+    if (!navigator.cookieEnabled || !window.localStorage) {
+      return null
+    }
+    var data = localStorage.getItem(this.KEY)
+    return data ? JSON.parse(data) : null
+  }
+
+  _setConfig (data) {
+    if (!navigator.cookieEnabled || !window.localStorage) {
+      return null
+    }
+    localStorage.setItem(this.KEY, JSON.stringify({
+      last: Date.now(),
+      data: data
+    }))
+  }
+}
+Object.assign(AdConfig.prototype, {
+  URL: '//qy5y9ee9ch8r87pg72w5.dcloud.net.cn/hcs',
+  KEY: 'uni_app_ad_config',
+  CACHE_TIME: 1000 * 60 * 10,
+  ERROR_INVALID_ADPID: {
+    '-5002': '无效adpid'
+  }
+})
+
+class AdReport {
+  static get instance () {
+    if (this._instance == null) {
+      this._instance = new AdReport()
+      this._instance._init()
+    }
+    return this._instance
+  }
+
+  constructor () {
+    this._instance = null
+    this._adConfig = null
+    this._guid = null
+  }
+
+  _init () {
+    var config = this._getConfig()
+    if (config !== null && config.guid) {
+      this._guid = config.guid
+      return
+    }
+
+    this._guid = this._newGUID()
+    this._setConfig(this._guid)
+  }
+
+  get (data) {
+    this._process(Object.assign(data, {
+      d: location.hostname,
+      i: this._guid
+    }))
+  }
+
+  _process (data) {
+    uni.request({
+      url: this.URL,
+      method: 'GET',
+      data: data,
+      dataType: 'json',
+      success: () => {
+      }
+    })
+  }
+
+  _newGUID () {
+    let guid = ''
+    const format = 'xxxxxxxx-xxxx-4xxx-xxxx-xxxxxxxxxxxx'
+    for (let i = 0; i < format.length; i++) {
+      if (format[i] === 'x') {
+        guid += (Math.random() * 16 | 0).toString(16)
+      } else {
+        guid += format[i]
+      }
+    }
+    return guid.toUpperCase()
+  }
+
+  _getConfig () {
+    if (!navigator.cookieEnabled || !window.localStorage) {
+      return null
+    }
+    var data = localStorage.getItem(this.KEY)
+    return data ? JSON.parse(data) : null
+  }
+
+  _setConfig (guid) {
+    if (!navigator.cookieEnabled || !window.localStorage) {
+      return null
+    }
+    localStorage.setItem(this.KEY, JSON.stringify({
+      last: Date.now(),
+      guid: guid
+    }))
+  }
+}
+Object.assign(AdReport.prototype, {
+  URL: '//hp66hwpyev7yx2hfughh.dcloud.net.cn/ahl',
+  KEY: 'uni_app_ad_guid'
+})
+
+const adProvider = {
+  hx: 'zswx_hx',
+  ky: 'zswx_ky'
+}
+
+const CHECK_RENDER_DELAY = 1000
+const CHECK_RENDER_RETRY = 3
+
+export default {
+  name: 'Ad',
+  mixins: [subscriber],
+  props: {
+    adpid: {
+      type: [Number, String],
+      default: ''
+    }
+  },
+  watch: {
+    adpid (val) {
+      if (val) {
+        this._loadData(val)
+      }
+    }
+  },
+  mounted () {
+    this._pl = []
+    this._pd = {}
+    this._pi = 0
+    this._checkTimer = null
+    this._checkTimerCount = 0
+    this._loadData()
+    AdReport.instance.get({
+      h: __uniConfig.compilerVersion,
+      a: this.adpid,
+      at: 30,
+      ic: AdConfig.IC,
+      is: AdConfig.IS
+    })
+  },
+  beforeDestroy () {
+    this._clearCheckTimer()
+    this.$refs.container.innerHTML = ''
+  },
+  methods: {
+    _onhandle (e) {
+      this._report(41)
+    },
+    _reset () {
+      this._pl = []
+      this._pd = {}
+      this._pi = 0
+      this._clearCheckTimer()
+      this.$refs.container.innerHTML = ''
+    },
+    _loadData (adpid) {
+      this._reset()
+      AdConfig.instance.get(adpid || this.adpid, (data) => {
+        this._pd = data
+        this._pl = data.psp.split(',')
+        this._renderAd()
+      }, (err) => {
+        this.$trigger('error', {}, err)
+      })
+    },
+    _renderAd () {
+      if (this._pi > this._pl.length - 1) {
+        return
+      }
+
+      var ap = this._pl[this._pi]
+      var data = this._pd[ap]
+      switch (ap) {
+        case adProvider.hx:
+          this._renderHX(data)
+          break
+        case adProvider.ky:
+          this._renderKY(data)
+          break
+      }
+    },
+    _renderNext () {
+      if (this._pi >= this._pl.length - 1) {
+        return
+      }
+
+      this._pi++
+      this._renderAd()
+    },
+    _renderHX (data) {
+      if (document.querySelector('#' + adProvider.hx)) {
+        this._renderNext()
+        return
+      }
+
+      var ad = document.createElement('script')
+      ad.src = data.src || data.url
+
+      var adView = document.createElement('div')
+      adView.setAttribute('id', adProvider.hx)
+      adView.appendChild(ad)
+
+      this.$refs.container.innerHTML = ''
+      this.$refs.container.append(adView)
+
+      this._startCheckTimer()
+    },
+    _renderKY (data) {
+      var randomId = this._randomId()
+      var ad = document.createElement('script')
+      ad.src = (data.src || data.url) + '&_ct=' + randomId
+
+      var adView = document.createElement('div')
+      adView.setAttribute('id', randomId)
+      adView.appendChild(ad)
+
+      this.$refs.container.innerHTML = ''
+      this.$refs.container.append(adView)
+
+      this._startCheckTimer()
+    },
+    _checkRender () {
+      var hasContent = (this.$refs.container.children.length > 0 && this.$refs.container.clientHeight > 40)
+      if (hasContent) {
+        this._report(40)
+      }
+      return hasContent
+    },
+    _startCheckTimer () {
+      this._clearCheckTimer()
+      this._checkTimer = setInterval(() => {
+        this._checkTimerCount++
+        if (this._checkTimerCount >= CHECK_RENDER_RETRY) {
+          this._clearCheckTimer()
+          this._renderNext()
+          return
+        }
+
+        if (this._checkRender()) {
+          this._clearCheckTimer()
+        }
+      }, CHECK_RENDER_DELAY)
+    },
+    _clearCheckTimer () {
+      this._checkTimerCount = 0
+      if (this._checkTimer != null) {
+        window.clearInterval(this._checkTimer)
+        this._checkTimer = null
+      }
+    },
+    _report (type) {
+      var taskId = ''
+      if (this._pl.length > 0 && this._pi < this._pl.length) {
+        var data = this._pd[this._pl[this._pi]]
+        if (data) {
+          taskId = data.task_id
+        }
+      }
+
+      AdReport.instance.get({
+        h: __uniConfig.compilerVersion,
+        a: this.adpid,
+        t: taskId,
+        at: type
+      })
+    },
+    _randomId () {
+      var result = ''
+      for (let i = 0; i < 2; i++) {
+        result += (65536 * (1 + Math.random()) | 0).toString(16).substring(1)
+      }
+      return result
+    }
+  }
+}
+</script>
+
+<style>
+  uni-ad {
+    display: block;
+    overflow: hidden;
+  }
+
+  uni-ad[hidden] {
+    display: none;
+  }
+</style>
diff --git a/packages/uni-h5/src/view/components/cover-image/index.vue b/packages/uni-h5/src/view/components/cover-image/index.vue
new file mode 100644
index 000000000..6c82c992f
--- /dev/null
+++ b/packages/uni-h5/src/view/components/cover-image/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <uni-cover-image
+    :src="src"
+    v-on="$listeners"
+  >
+    <div
+      class="uni-cover-image"
+    >
+      <img
+        v-if="src"
+        :src="$getRealPath(src)"
+        @load="_load"
+        @error="_error"
+      >
+    </div>
+  </uni-cover-image>
+</template>
+<script>
+export default {
+  name: 'CoverImage',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    _load ($event) {
+      this.$trigger('load', $event)
+    },
+    _error ($event) {
+      this.$trigger('error', $event)
+    }
+  }
+}
+</script>
+
+<style>
+uni-cover-image {
+  display: block;
+  line-height: 1.2;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  pointer-events: auto;
+}
+
+uni-cover-image img {
+  width: 100%;
+  height: 100%;
+}
+
+uni-cover-image[hidden] {
+  display: none;
+}
+
+uni-cover-image .uni-cover-image {
+  width: 100%;
+  height: 100%;
+  text-overflow: inherit;
+  overflow: inherit;
+  white-space: nowrap;
+  -webkit-align-items: inherit;
+  align-items: inherit;
+  -webkit-justify-content: inherit;
+  justify-content: inherit;
+  -webkit-flex-direction: inherit;
+  flex-direction: inherit;
+  font-size: 0;
+  display: inherit;
+}
+</style>
diff --git a/packages/uni-h5/src/view/components/cover-view/index.vue b/packages/uni-h5/src/view/components/cover-view/index.vue
new file mode 100644
index 000000000..895b0b571
--- /dev/null
+++ b/packages/uni-h5/src/view/components/cover-view/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <uni-cover-view
+    :scroll-top="scrollTop"
+    v-on="$listeners"
+  >
+    <div
+      ref="content"
+      class="uni-cover-view"
+    >
+      <slot />
+    </div>
+  </uni-cover-view>
+</template>
+<script>
+export default {
+  name: 'CoverView',
+  props: {
+    scrollTop: {
+      type: [String, Number],
+      default: 0
+    }
+  },
+  watch: {
+    scrollTop (val) {
+      this.setScrollTop(val)
+    }
+  },
+  mounted () {
+    this.setScrollTop(this.scrollTop)
+  },
+  methods: {
+    setScrollTop (val) {
+      var content = this.$refs.content
+      if (getComputedStyle(content).overflowY === 'scroll') {
+        content.scrollTop = this._upx2pxNum(val)
+      }
+    },
+    _upx2pxNum (val) {
+      if (/\d+[ur]px$/i.test(val)) {
+        val.replace(/\d+[ur]px$/i, text => {
+          return uni.upx2px(parseFloat(text))
+        })
+      }
+      return parseFloat(val) || 0
+    }
+  }
+}
+</script>
+<style>
+uni-cover-view {
+  display: block;
+  line-height: 1.2;
+  overflow: hidden;
+  white-space: nowrap;
+  pointer-events: auto;
+}
+
+uni-cover-view[hidden] {
+  display: none;
+}
+
+uni-cover-view .uni-cover-view {
+  width: 100%;
+  height: 100%;
+  text-overflow: inherit;
+  overflow: hidden;
+  white-space: inherit;
+  -webkit-align-items: inherit;
+  align-items: inherit;
+  -webkit-justify-content: inherit;
+  justify-content: inherit;
+  -webkit-flex-direction: inherit;
+  flex-direction: inherit;
+  -webkit-flex-wrap: inherit;
+  flex-wrap: inherit;
+  display: inherit;
+  overflow: inherit;
+}
+</style>
diff --git a/packages/uni-h5/src/view/components/map/index.vue b/packages/uni-h5/src/view/components/map/index.vue
new file mode 100644
index 000000000..1f2baeea2
--- /dev/null
+++ b/packages/uni-h5/src/view/components/map/index.vue
@@ -0,0 +1,941 @@
+<template>
+  <uni-map
+    :id="id"
+    v-on="$listeners"
+  >
+    <div
+      ref="map"
+      style="width: 100%; height: 100%; position: relative; overflow: hidden;"
+    />
+    <div style="position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none;">
+      <slot />
+    </div>
+  </uni-map>
+</template>
+
+<script>
+import {
+  subscriber
+} from 'uni-mixins'
+
+import {
+  hasOwn
+} from 'uni-shared'
+
+let maps
+let callbacks
+function loadMap (callback) {
+  if (maps) {
+    callback()
+  } else if (window.qq && window.qq.maps) {
+    maps = window.qq.maps
+    callback()
+  } else if (callbacks) {
+    callbacks.push(callback)
+  } else {
+    callbacks = [callback]
+    const key = __uniConfig.qqMapKey
+    const callbackName = '_callback' + Date.now()
+    window[callbackName] = function () {
+      delete window[callbackName]
+      maps = window.qq.maps
+      var Callout = maps.Callout = function (option = {}) {
+        this.option = option
+        var map = option.map
+        this.position = option.position
+        this.index = 1
+        this.visible = this.alwaysVisible = option.display === 'ALWAYS'
+        this.init()
+        Object.defineProperty(this, 'onclick', {
+          setter (callback) {
+            this.div.onclick = callback
+          },
+          getter () {
+            return this.div.onclick
+          }
+        })
+        if (map) {
+          this.setMap(map)
+        }
+      }
+      Callout.prototype = new maps.Overlay()
+      Callout.prototype.init = function () {
+        var option = this.option
+        var div = this.div = document.createElement('div')
+        var divStyle = div.style
+        divStyle.position = 'absolute'
+        divStyle.whiteSpace = 'nowrap'
+        divStyle.transform = 'translateX(-50%) translateY(-100%)'
+        divStyle.zIndex = 1
+        divStyle.boxShadow = option.boxShadow || 'none'
+        divStyle.display = this.visible ? 'block' : 'none'
+        var triangle = this.triangle = document.createElement('div')
+        triangle.setAttribute('style',
+          'position: absolute;white-space: nowrap;border-width: 4px;border-style: solid;border-color: #fff transparent transparent;border-image: initial;font-size: 12px;padding: 0px;background-color: transparent;width: 0px;height: 0px;transform: translate(-50%, 100%);left: 50%;bottom: 0;'
+        )
+        this.setStyle(option)
+        this.changed = function (key) {
+          divStyle.display = this.visible ? 'block' : 'none'
+        }
+        div.appendChild(triangle)
+      }
+      Callout.prototype.construct = function () {
+        var div = this.div
+        var panes = this.getPanes()
+        panes.floatPane.appendChild(div)
+      }
+      Callout.prototype.draw = function () {
+        var overlayProjection = this.getProjection()
+        if (!this.position || !this.div || !overlayProjection) {
+          return
+        }
+        var pixel = overlayProjection.fromLatLngToDivPixel(this.position)
+        var divStyle = this.div.style
+        divStyle.left = pixel.x + 'px'
+        divStyle.top = pixel.y + 'px'
+      }
+      Callout.prototype.destroy = function () {
+        this.div.parentNode.removeChild(this.div)
+        this.div = null
+        this.triangle = null
+      }
+      Callout.prototype.setOption = function (option) {
+        this.option = option
+        this.setPosition(option.position)
+        if (option.display === 'ALWAYS') {
+          this.alwaysVisible = this.visible = true
+        } else {
+          this.alwaysVisible = false
+        }
+        this.setStyle(option)
+      }
+      Callout.prototype.setStyle = function (option) {
+        var div = this.div
+        var divStyle = div.style
+        div.innerText = option.content
+        divStyle.lineHeight = (option.fontSize || 14) + 'px'
+        divStyle.fontSize = (option.fontSize || 14) + 'px'
+        divStyle.padding = (option.padding || 8) + 'px'
+        divStyle.color = option.color || '#000'
+        divStyle.borderRadius = (option.borderRadius || 0) + 'px'
+        divStyle.backgroundColor = option.bgColor || '#fff'
+        divStyle.marginTop = '-' + (option.top + 5) + 'px'
+        this.triangle.style.borderColor = `${option.bgColor || '#fff'} transparent transparent`
+      }
+      Callout.prototype.setPosition = function (position) {
+        this.position = position
+        this.draw()
+      }
+      callbacks.forEach(callback => callback())
+      callbacks = null
+    }
+    const script = document.createElement('script')
+    script.src = `https://map.qq.com/api/js?v=2.exp&key=${key}&callback=${callbackName}&libraries=geometry`
+    document.body.appendChild(script)
+  }
+}
+
+export default {
+  name: 'Map',
+  mixins: [subscriber],
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    latitude: {
+      type: [String, Number],
+      default: 39.92
+    },
+    longitude: {
+      type: [String, Number],
+      default: 116.46
+    },
+    scale: {
+      type: [String, Number],
+      default: 16
+    },
+    markers: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    covers: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    includePoints: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    polyline: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    circles: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    controls: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    showLocation: {
+      type: [Boolean, String],
+      default: false
+    }
+  },
+  data () {
+    return {
+      center: {
+        latitude: 116.46,
+        longitude: 116.46
+      },
+      isMapReady: false,
+      isBoundsReady: false,
+      markersSync: [],
+      polylineSync: [],
+      circlesSync: [],
+      controlsSync: []
+    }
+  },
+  watch: {
+    latitude () {
+      this.centerChange()
+    },
+    longitude () {
+      this.centerChange()
+    },
+    scale (val) {
+      this.mapReady(() => {
+        this._map.setZoom(Number(val) || 16)
+      })
+    },
+    markers (val, old) {
+      this.mapReady(() => {
+        var add = []
+        var has = []
+        var changed = []
+        var changedOption = []
+        var remove = []
+        val.forEach(option => {
+          if (!('id' in option)) {
+            add.push(option)
+          } else {
+            var isOld = false
+            for (var index = 0; index < old.length; index++) {
+              var element = old[index]
+              if (!('id' in element)) {
+                old.splice(index--, 1)
+                continue
+              }
+              if (element.id !== option.id) {
+                continue
+              }
+              isOld = true
+              has.push(element.id)
+              if (JSON.stringify(element) !== JSON.stringify(option)) {
+                changed.push(element.id)
+                changedOption.push(option)
+              }
+              old.splice(index--, 1)
+            }
+            if (!isOld) {
+              add.push(option)
+            }
+          }
+        })
+        var markers = this.markersSync
+        markers.forEach(marker => {
+          var id = marker.id
+          var index
+          if (has.indexOf(id) >= 0) {
+            if ((index = changed.indexOf(id)) >= 0) {
+              this.changeMarker(marker, changedOption[index])
+            }
+          } else {
+            remove.push(marker)
+          }
+        })
+        this.removeMarkers(remove)
+        this.createMarkers(add)
+      })
+    },
+    polyline (val) {
+      this.mapReady(() => {
+        this.createPolyline()
+      })
+    },
+    circles () {
+      this.mapReady(() => {
+        this.createCircles()
+      })
+    },
+    controls () {
+      this.mapReady(() => {
+        this.createControls()
+      })
+    },
+    includePoints () {
+      this.mapReady(() => {
+        this.fitBounds(this.includePoints)
+      })
+    },
+    showLocation (val) {
+      this.mapReady(() => {
+        this[val ? 'createLocation' : 'removeLocation']()
+      })
+    }
+  },
+  created () {
+    var latitude = this.latitude
+    var longitude = this.longitude
+    if (latitude && longitude) {
+      this.center.latitude = latitude
+      this.center.longitude = longitude
+    }
+  },
+  mounted () {
+    loadMap(() => {
+      this.init()
+    })
+  },
+  beforeDestroy () {
+    this.removeMarkers(this.markersSync)
+    this.removePolyline()
+    this.removeCircles()
+    this.removeControls()
+    this.removeLocation()
+  },
+  methods: {
+    _handleSubscribe ({
+      type,
+      data = {}
+    }) {
+      function callback (res, err) {
+        res = res || {}
+        res.errMsg = `${type}:${err ? 'fail' + err : 'ok'}`
+        var cb = err ? data.fail : data.success
+        if (typeof cb === 'function') {
+          cb(res)
+        }
+        if (typeof data.complete === 'function') {
+          data.complete(res)
+        }
+      }
+
+      switch (type) {
+        case 'getCenterLocation':
+          this.mapReady(() => {
+            var latitude
+            var longitude
+            var center = this._map.getCenter()
+            latitude = center.getLat()
+            longitude = center.getLng()
+
+            callback({
+              latitude: latitude,
+              longitude: longitude
+            })
+          })
+          break
+        case 'moveToLocation':
+          {
+            const { latitude, longitude } = data
+            var locationPosition = (latitude && longitude) ? new maps.LatLng(latitude, longitude) : this._locationPosition
+            if (locationPosition) {
+              this._map.setCenter(locationPosition)
+              callback({})
+            }
+          }
+          break
+        case 'translateMarker':
+          this.mapReady(() => {
+            try {
+              var marker = this.getMarker(data.markerId)
+              var destination = data.destination
+              var duration = data.duration
+              var autoRotate = !!data.autoRotate
+              var rotate = Number(data.rotate) ? data.rotate : 0
+              var rotation = marker.getRotation()
+              var a = marker.getPosition()
+              var b = new maps.LatLng(destination.latitude, destination.longitude)
+              var distance = maps.geometry.spherical.computeDistanceBetween(a, b) / 1000
+              var time = ((typeof duration === 'number') ? duration : 1000) / (1000 * 60 * 60)
+              var speed = distance / time
+              var movingEvent = maps.event.addListener(marker, 'moving', e => {
+                var latLng = e.latLng
+                var label = marker.label
+                if (label) {
+                  label.setPosition(latLng)
+                }
+                var callout = marker.callout
+                if (callout) {
+                  callout.setPosition(latLng)
+                }
+              })
+              var event = maps.event.addListener(marker, 'moveend', e => {
+                event.remove()
+                movingEvent.remove()
+                marker.lastPosition = a
+                marker.setPosition(b)
+                var label = marker.label
+                if (label) {
+                  label.setPosition(b)
+                }
+                var callout = marker.callout
+                if (callout) {
+                  callout.setPosition(b)
+                }
+                var cb = data.animationEnd
+                if (typeof cb === 'function') {
+                  cb()
+                }
+              })
+              var lastRtate = 0
+              if (autoRotate) {
+                if (marker.lastPosition) {
+                  lastRtate = maps.geometry.spherical.computeHeading(marker.lastPosition, a)
+                }
+                rotate = maps.geometry.spherical.computeHeading(a, b) - lastRtate
+              }
+              marker.setRotation(rotation + rotate)
+              marker.moveTo(b, speed)
+            } catch (error) {
+              callback(null, error)
+            }
+          })
+          break
+        case 'includePoints':
+          this.fitBounds(data.points)
+          break
+        case 'getRegion':
+          this.boundsReady(() => {
+            var latLngBounds = this._map.getBounds()
+            var southwest = latLngBounds.getSouthWest()
+            var northeast = latLngBounds.getNorthEast()
+            callback({
+              southwest: {
+                latitude: southwest.getLat(),
+                longitude: southwest.getLng()
+              },
+              northeast: {
+                latitude: northeast.getLat(),
+                longitude: northeast.getLng()
+              }
+            })
+          })
+          break
+        case 'getScale':
+          this.mapReady(() => {
+            callback({
+              scale: this._map.getZoom()
+            })
+          })
+          break
+      }
+    },
+    init () {
+      var center = new maps.LatLng(this.center.latitude, this.center.longitude)
+      var map = this._map = new maps.Map(this.$refs.map, {
+        center,
+        zoom: Number(this.scale),
+        // scrollwheel: false,
+        disableDoubleClickZoom: true,
+        mapTypeControl: false,
+        zoomControl: false,
+        scaleControl: false,
+        panControl: false,
+        minZoom: 5,
+        maxZoom: 18,
+        draggable: true
+      })
+      var boundsChangedEvent = maps.event.addListener(map, 'bounds_changed', e => {
+        boundsChangedEvent.remove()
+        this.isBoundsReady = true
+        this.$emit('boundsready')
+      })
+      maps.event.addListener(map, 'click', () => {
+        // TODO 编译器将 tap 转换为click
+        this.$trigger('click', {}, {})
+      })
+      maps.event.addListener(map, 'dragstart', () => {
+        this.$trigger('regionchange', {}, {
+          type: 'begin',
+          causedBy: 'gesture'
+        })
+      })
+      function getMapInfo () {
+        var center = map.getCenter()
+        return {
+          scale: map.getZoom(),
+          centerLocation: {
+            latitude: center.getLat(),
+            longitude: center.getLng()
+          }
+        }
+      }
+      maps.event.addListener(map, 'dragend', () => {
+        this.$trigger('regionchange', {}, Object.assign({
+          type: 'end',
+          causedBy: 'drag'
+        }, getMapInfo()))
+      })
+      maps.event.addListener(map, 'zoom_changed', () => {
+        this.$emit('update:scale', map.getZoom())
+        this.$trigger('regionchange', {}, Object.assign({
+          type: 'end',
+          causedBy: 'scale'
+        }, getMapInfo()))
+      })
+      maps.event.addListener(map, 'center_changed', () => {
+        var latitude
+        var longitude
+        var center = map.getCenter()
+        latitude = center.getLat()
+        longitude = center.getLng()
+        this.$emit('update:latitude', latitude)
+        this.$emit('update:longitude', longitude)
+      })
+      if (this.markers && Array.isArray(this.markers) && this.markers.length) {
+        this.createMarkers(this.markers)
+      }
+      if (this.polyline && Array.isArray(this.polyline) && this.polyline.length) {
+        this.createPolyline()
+      }
+      if (this.circles && Array.isArray(this.circles) && this.circles.length) {
+        this.createCircles()
+      }
+      if (this.controls && Array.isArray(this.controls) && this.controls.length) {
+        this.createControls()
+      }
+      if (this.showLocation) {
+        this.createLocation()
+      }
+      if (this.includePoints && Array.isArray(this.includePoints) && this.includePoints.length) {
+        this.fitBounds(this.includePoints, () => {
+          map.setCenter(center)
+        })
+      }
+      this.isMapReady = true
+      this.$emit('mapready')
+    },
+    centerChange () {
+      var latitude = Number(this.latitude)
+      var longitude = Number(this.longitude)
+      if (latitude !== this.center.latitude || longitude !== this.center.longitude) {
+        this.center.latitude = latitude
+        this.center.longitude = longitude
+        if (this._map) {
+          this.mapReady(() => {
+            this._map.setCenter(new maps.LatLng(latitude, longitude))
+          })
+        }
+      }
+    },
+    createMarkers (markerOptions) {
+      var map = this._map
+      var markers = this.markersSync
+      markerOptions.forEach(option => {
+        var marker = new maps.Marker({
+          map,
+          flat: true,
+          autoRotation: false
+        })
+        marker.id = option.id
+        this.changeMarker(marker, option)
+        maps.event.addListener(marker, 'click', e => {
+          var callout = marker.callout
+          if (callout) {
+            var div = callout.div
+            var parent = div.parentNode
+            if (!callout.alwaysVisible) {
+              callout.set('visible', !callout.visible)
+            }
+            if (callout.visible) {
+              parent.removeChild(div)
+              parent.appendChild(div)
+            }
+          }
+          hasOwn(option, 'id') && this.$trigger('markertap', {}, {
+            markerId: option.id
+          })
+        })
+        markers.push(marker)
+      })
+    },
+    changeMarker (marker, option) {
+      var self = this
+      var map = this._map
+      var title = option.title || option.name
+      var position = new maps.LatLng(option.latitude, option.longitude)
+      var img = new Image()
+      img.onload = () => {
+        var anchor = option.anchor || {}
+        var icon
+        var w
+        var h
+        var top
+        var x = anchor.x
+        var y = anchor.y
+        if (option.iconPath && (option.width || option.height)) {
+          w = option.width || img.width / img.height * option.height
+          h = option.height || img.height / img.width * option.width
+        } else {
+          w = img.width / 2
+          h = img.height / 2
+        }
+        x = (typeof x === 'number' ? x : 0.5) * w
+        y = (typeof y === 'number' ? y : 1) * h
+        top = h - (h - y)
+        icon = new maps.MarkerImage(img.src, null, null, new maps.Point(x, y), new maps.Size(w, h))
+        marker.setPosition(position)
+        marker.setIcon(icon)
+        marker.setRotation(option.rotate || 0)
+        var labelOpt = option.label || {}
+        if (marker.label) {
+          marker.label.setMap(null)
+          delete (marker.label)
+        }
+        var label
+        if (labelOpt.content) {
+          label = new maps.Label({
+            position,
+            map,
+            clickable: false,
+            content: labelOpt.content,
+            style: {
+              border: 'none',
+              padding: '8px',
+              background: 'none',
+              color: labelOpt.color,
+              fontSize: (labelOpt.fontSize || 14) + 'px',
+              lineHeight: (labelOpt.fontSize || 14) + 'px',
+              marginLeft: labelOpt.x,
+              marginTop: labelOpt.y
+            }
+          })
+          marker.label = label
+        }
+        var calloutOpt = option.callout || {}
+        var callout = marker.callout
+        var calloutStyle
+        if (calloutOpt.content) {
+          calloutStyle = {
+            id: option.id,
+            position,
+            map,
+            top,
+            content: calloutOpt.content,
+            color: calloutOpt.color,
+            fontSize: calloutOpt.fontSize,
+            borderRadius: calloutOpt.borderRadius,
+            bgColor: calloutOpt.bgColor,
+            padding: calloutOpt.padding,
+            boxShadow: calloutOpt.boxShadow,
+            display: calloutOpt.display
+          }
+        } else if (title) {
+          calloutStyle = {
+            id: option.id,
+            position,
+            map,
+            top,
+            content: title,
+            boxShadow: '0px 0px 3px 1px rgba(0,0,0,0.5)'
+          }
+        }
+        if (calloutStyle) {
+          if (callout) {
+            callout.setOption(calloutStyle)
+          } else {
+            callout = marker.callout = new maps.Callout(calloutStyle)
+
+            callout.div.onclick = function ($event) {
+              hasOwn(option, 'id') && self.$trigger('callouttap', $event, {
+                markerId: option.id
+              })
+              $event.stopPropagation()
+              $event.preventDefault()
+            }
+          }
+        } else {
+          if (callout) {
+            callout.setMap(null)
+            delete (marker.callout)
+          }
+        }
+      }
+      img.src = option.iconPath ? this.$getRealPath(option.iconPath)
+        : 'data:image/png;base64,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'
+    },
+    removeMarkers (markers) {
+      for (var index = 0; index < markers.length; index++) {
+        var marker = markers[index]
+        if (marker.label) {
+          marker.label.setMap(null)
+        }
+        if (marker.callout) {
+          marker.callout.setMap(null)
+        }
+        marker.setMap(null)
+        markers.splice(index--, 1)
+      }
+    },
+    createPolyline () {
+      var map = this._map
+      var polyline = this.polylineSync
+      this.removePolyline()
+      this.polyline.forEach(option => {
+        var path = []
+        option.points.forEach(point => {
+          path.push(new maps.LatLng(point.latitude, point.longitude))
+        })
+
+        if (option.borderWidth) {
+          var border = new maps.Polyline({
+            map,
+            clickable: false,
+            path,
+            strokeWeight: option.width + option.borderWidth,
+            strokeColor: option.borderColor,
+            strokeDashStyle: option.dottedLine ? 'dash' : 'solid'
+          })
+          polyline.push(border)
+        }
+        var line = new maps.Polyline({
+          map,
+          clickable: false,
+          path,
+          strokeWeight: option.width,
+          strokeColor: option.color,
+          strokeDashStyle: option.dottedLine ? 'dash' : 'solid'
+        })
+        polyline.push(line)
+      })
+    },
+    removePolyline () {
+      var polyline = this.polylineSync
+      polyline.forEach(line => {
+        line.setMap(null)
+      })
+      polyline.splice(0, polyline.length)
+    },
+    createCircles () {
+      var map = this._map
+      var circles = this.circlesSync
+      this.removeCircles()
+      this.circles.forEach(option => {
+        var center = new maps.LatLng(option.latitude, option.longitude)
+
+        function getColor (color) {
+          var c = color.match(/#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?/)
+          if (c && c.length) {
+            return maps.Color.fromHex(c[0], Number('0x' + c[1] || 255) / 255)
+          } else {
+            return undefined
+          }
+        }
+        var circle = new maps.Circle({
+          map,
+          center,
+          clickable: false,
+          radius: option.radius,
+          strokeWeight: option.strokeWidth,
+          fillColor: getColor(option.fillColor),
+          strokeColor: getColor(option.color),
+          strokeDashStyle: 'solid'
+        })
+        circles.push(circle)
+      })
+    },
+    removeCircles () {
+      var circles = this.circlesSync
+      circles.forEach(circle => {
+        circle.setMap(null)
+      })
+      circles.splice(0, circles.length)
+    },
+    createControls () {
+      var _self = this
+      var map = this._map
+      var controls = this.controlsSync
+      this.removeControls()
+      this.controls.forEach(option => {
+        var position = option.position || {}
+        var control = document.createElement('div')
+        var img = new Image()
+        control.appendChild(img)
+        var style = control.style
+        style.position = 'absolute'
+        style.width = 0
+        style.height = 0
+        img.onload = () => {
+          if (option.position.width) {
+            img.width = option.position.width
+          }
+          if (option.position.height) {
+            img.height = option.position.height
+          }
+          var style = img.style
+          style.position = 'absolute'
+          style.left = (position.left || 0) + 'px'
+          style.top = (position.top || 0) + 'px'
+          style.maxWidth = 'initial'
+        }
+        img.src = this.$getRealPath(option.iconPath)
+        img.onclick = function ($event) {
+          if (option.clickable) {
+            _self.$trigger('controltap', $event, {
+              controlId: option.id
+            })
+          }
+        }
+        map.controls[maps.ControlPosition.TOP_LEFT].push(control)
+        controls.push(control)
+      })
+    },
+    removeControls () {
+      var controls = this.controlsSync
+      controls.forEach(control => {
+        control.remove()
+      })
+      controls.splice(0, controls.length)
+    },
+    createLocation () {
+      var map = this._map
+      var location = this._location
+      if (location) {
+        this.removeLocation()
+      }
+      uni.getLocation({
+        type: 'gcj02',
+        success: (res) => {
+          if (location !== this._location) {
+            return
+          }
+          var position = new maps.LatLng(res.latitude, res.longitude)
+          location = new maps.Marker({
+            position,
+            map,
+            icon: new maps.MarkerImage(
+              'data:image/png;base64,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',
+              null, null, new maps.Point(22, 22), new maps.Size(44, 44)),
+            flat: true,
+            rotation: 0
+          })
+          this._location = location
+          refreshLocation()
+          this.__onCompassChange = function (res) {
+            location.setRotation(res.direction)
+          }
+          uni.onCompassChange(this.__onCompassChange)
+        },
+        fail: e => {
+          console.error(e)
+        }
+      })
+      var self = this
+
+      function refreshLocation () {
+        if (location !== self._location) {
+          return
+        }
+        setTimeout(() => {
+          uni.getLocation({
+            type: 'gcj02',
+            success: (res) => {
+              var locationPosition = self._locationPosition = new maps.LatLng(res.latitude, res.longitude)
+              location.setPosition(locationPosition)
+            },
+            fail: e => {
+              console.error(e)
+            },
+            complete: () => {
+              refreshLocation()
+            }
+          })
+        }, 30000)
+      }
+    },
+    removeLocation () {
+      var location = this._location
+      if (location) {
+        location.setMap(null)
+        this._location = null
+        this._locationPosition = null
+        uni.offCompassChange(this.__onCompassChange)
+      }
+    },
+    fitBounds (points, cb) {
+      this.boundsReady(() => {
+        var map = this._map
+        var bounds = new maps.LatLngBounds()
+
+        points.forEach(point => {
+          var longitude = point.longitude
+          var latitude = point.latitude
+          var latLng = new maps.LatLng(latitude, longitude)
+          bounds.extend(latLng)
+        })
+        map.fitBounds(bounds)
+        if (typeof cb === 'function') {
+          cb()
+        }
+      })
+    },
+    mapReady (cb) {
+      if (this.isMapReady) {
+        cb()
+      } else {
+        this.$once('mapready', () => {
+          cb()
+        })
+      }
+    },
+    boundsReady (cb) {
+      if (this.isBoundsReady) {
+        cb()
+      } else {
+        this.$once('boundsready', () => {
+          cb()
+        })
+      }
+    },
+    getMarker (id) {
+      var markers = this.markersSync
+      for (var index = 0; index < markers.length; index++) {
+        var element = markers[index]
+        if (element.id === id) {
+          return element
+        }
+      }
+      throw new Error('translateMarker: fail cannot find marker with id ' + id)
+    }
+  }
+}
+</script>
+
+<style>
+	uni-map {
+		position: relative;
+		width: 300px;
+		height: 150px;
+		display: block;
+	}
+
+	uni-map[hidden] {
+		display: none;
+	}
+</style>
diff --git a/packages/uni-h5/src/view/components/picker/index.vue b/packages/uni-h5/src/view/components/picker/index.vue
new file mode 100644
index 000000000..87e6d16a3
--- /dev/null
+++ b/packages/uni-h5/src/view/components/picker/index.vue
@@ -0,0 +1,873 @@
+<template>
+  <uni-picker
+    :disabled="disabled"
+    @click="_show"
+    v-on="$listeners"
+  >
+    <div
+      ref="picker"
+      class="uni-picker-container"
+      :class="`uni-${mode}-${selectorTypeComputed}`"
+      @wheel.prevent
+      @touchmove.prevent
+    >
+      <transition name="uni-fade">
+        <div
+          v-show="visible"
+          class="uni-mask uni-picker-mask"
+          @click="_cancel"
+          @mousemove="_fixInputPosition"
+        />
+      </transition>
+      <div
+        v-if="!system"
+        :class="{ 'uni-picker-toggle': visible }"
+        :style="popupStyle.content"
+        class="uni-picker-custom"
+      >
+        <div
+          class="uni-picker-header"
+          @click.stop
+        >
+          <div
+            class="uni-picker-action uni-picker-action-cancel"
+            @click="_cancel"
+          >
+            {{ $$t("uni.picker.cancel") }}
+          </div>
+          <div
+            class="uni-picker-action uni-picker-action-confirm"
+            @click="_change"
+          >
+            {{ $$t("uni.picker.done") }}
+          </div>
+        </div>
+        <v-uni-picker-view
+          v-if="contentVisible"
+          :value="_l10nColumn(valueArray)"
+          class="uni-picker-content"
+          @change="_pickerViewChange"
+        >
+          <v-uni-picker-view-column
+            v-for="(rangeItem, index0) in _l10nColumn(rangeArray)"
+            :key="index0"
+          >
+            <div
+              v-for="(item, index) in rangeItem"
+              :key="index"
+              class="uni-picker-item"
+            >
+              {{
+                typeof item === "object"
+                  ? item[rangeKey] || ""
+                  : _l10nItem(item, index0)
+              }}
+            </div>
+          </v-uni-picker-view-column>
+        </v-uni-picker-view>
+        <div
+          ref="select"
+          class="uni-picker-select"
+          @wheel.stop
+          @touchmove.stop
+        >
+          <div
+            v-for="(item, index) in rangeArray[0]"
+            :key="index"
+            class="uni-picker-item"
+            :class="{ selected: valueArray[0] === index }"
+            @click="
+              valueArray[0] = index;
+              _change();
+            "
+          >
+            {{ typeof item === "object" ? item[rangeKey] || "" : item }}
+          </div>
+        </div>
+        <div :style="popupStyle.triangle" />
+      </div>
+    </div>
+    <div>
+      <slot />
+    </div>
+    <div
+      v-if="system"
+      class="uni-picker-system"
+      @mousemove="_fixInputPosition"
+    >
+      <input
+        ref="input"
+        :value="valueSync"
+        :type="mode"
+        tabindex="-1"
+        :min="start"
+        :max="end"
+        :class="[system, popupStyle.dock]"
+        @change.stop="_input"
+      >
+    </div>
+    <keypress
+      :disable="!visible"
+      @esc="_cancel"
+      @enter="_change"
+    />
+  </uni-picker>
+</template>
+
+<script>
+import { emitter } from 'uni-mixins'
+import { formatDateTime } from 'uni-shared'
+import popup from '../../../components/app/popup/mixins/popup'
+import keypress from '../../../helpers/keypress'
+import {
+  i18nMixin,
+  getLocale
+} from 'uni-core/helpers/i18n'
+
+function getDefaultStartValue () {
+  if (this.mode === mode.TIME) {
+    return '00:00'
+  }
+  if (this.mode === mode.DATE) {
+    const year = new Date().getFullYear() - 100
+    switch (this.fields) {
+      case fields.YEAR:
+        return year.toString()
+      case fields.MONTH:
+        return year + '-01'
+      default:
+        return year + '-01-01'
+    }
+  }
+  return ''
+}
+
+function getDefaultEndValue () {
+  if (this.mode === mode.TIME) {
+    return '23:59'
+  }
+  if (this.mode === mode.DATE) {
+    const year = new Date().getFullYear() + 100
+    switch (this.fields) {
+      case fields.YEAR:
+        return year.toString()
+      case fields.MONTH:
+        return year + '-12'
+      default:
+        return year + '-12-31'
+    }
+  }
+  return ''
+}
+
+const mode = {
+  SELECTOR: 'selector',
+  MULTISELECTOR: 'multiSelector',
+  TIME: 'time',
+  DATE: 'date'
+  // 暂不支持城市选择
+  // REGION: 'region'
+}
+const fields = {
+  YEAR: 'year',
+  MONTH: 'month',
+  DAY: 'day'
+}
+const selectorType = {
+  PICKER: 'picker',
+  SELECT: 'select'
+}
+export default {
+  name: 'Picker',
+  components: { keypress },
+  mixins: [i18nMixin, emitter, popup],
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    range: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    rangeKey: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: [Number, String, Array],
+      default: 0
+    },
+    mode: {
+      type: String,
+      default: mode.SELECTOR,
+      validator (val) {
+        return Object.values(mode).includes(val)
+      }
+    },
+    fields: {
+      type: String,
+      default: ''
+    },
+    start: {
+      type: String,
+      default: getDefaultStartValue
+    },
+    end: {
+      type: String,
+      default: getDefaultEndValue
+    },
+    disabled: {
+      type: [Boolean, String],
+      default: false
+    },
+    selectorType: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      valueSync: null,
+      visible: false,
+      contentVisible: false,
+      popover: null,
+      valueChangeSource: '',
+      timeArray: [],
+      dateArray: [],
+      valueArray: [],
+      oldValueArray: []
+    }
+  },
+  computed: {
+    rangeArray () {
+      var val = this.range
+      switch (this.mode) {
+        case mode.SELECTOR:
+          return [val]
+        case mode.MULTISELECTOR:
+          return val
+        case mode.TIME:
+          return this.timeArray
+        case mode.DATE:
+        {
+          const dateArray = this.dateArray
+          switch (this.fields) {
+            case fields.YEAR:
+              return [dateArray[0]]
+            case fields.MONTH:
+              return [dateArray[0], dateArray[1]]
+            default:
+              return [dateArray[0], dateArray[1], dateArray[2]]
+          }
+        }
+      }
+      return []
+    },
+    startArray () {
+      return this._getDateValueArray(this.start, getDefaultStartValue.bind(this)())
+    },
+    endArray () {
+      return this._getDateValueArray(this.end, getDefaultEndValue.bind(this)())
+    },
+    selectorTypeComputed () {
+      const type = this.selectorType
+      if (Object.values(selectorType).includes(type)) {
+        return type
+      }
+      return String(navigator.vendor).indexOf('Apple') === 0 && navigator.maxTouchPoints > 0 ? selectorType.PICKER : selectorType.SELECT
+    },
+    system () {
+      if (this.mode === mode.DATE && !Object.values(fields).includes(this.fields) && this.isDesktop && /win|mac/i.test(navigator.platform)) {
+        if (navigator.vendor === 'Google Inc.') {
+          return 'chrome'
+        } else if (/Firefox/.test(navigator.userAgent)) {
+          return 'firefox'
+        }
+      }
+      return ''
+    }
+  },
+  watch: {
+    visible (val) {
+      if (val) {
+        clearTimeout(this.__contentVisibleDelay)
+        this.contentVisible = val
+        this._select()
+      } else {
+        this.__contentVisibleDelay = setTimeout(() => {
+          this.contentVisible = val
+        }, 300)
+      }
+    },
+    value () {
+      this._setValueSync()
+    },
+    mode () {
+      this._setValueSync()
+    },
+    range () {
+      this._setValueSync()
+    },
+    valueSync () {
+      this._setValueArray()
+    },
+    valueArray (val) {
+      if (this.mode === mode.TIME || this.mode === mode.DATE) {
+        const getValue =
+          this.mode === mode.TIME ? this._getTimeValue : this._getDateValue
+        const valueArray = this.valueArray
+        const startArray = this.startArray
+        const endArray = this.endArray
+        if (this.mode === mode.DATE) {
+          const dateArray = this.dateArray
+          const max = dateArray[2].length
+          const day = Number(dateArray[2][valueArray[2]]) || 1
+          const realDay = new Date(
+            `${dateArray[0][valueArray[0]]}/${dateArray[1][valueArray[1]]
+            }/${day}`
+          ).getDate()
+          if (realDay < day) {
+            valueArray[2] -= realDay + max - day
+          }
+        }
+        if (getValue(valueArray) < getValue(startArray)) {
+          this._cloneArray(valueArray, startArray)
+        } else if (getValue(valueArray) > getValue(endArray)) {
+          this._cloneArray(valueArray, endArray)
+        }
+      }
+      val.forEach((value, column) => {
+        if (value !== this.oldValueArray[column]) {
+          this.oldValueArray[column] = value
+          if (this.mode === mode.MULTISELECTOR) {
+            this.$trigger('columnchange', {}, {
+              column,
+              value
+            }
+            )
+          }
+        }
+      })
+    }
+  },
+  created () {
+    this.$dispatch('Form', 'uni-form-group-update', {
+      type: 'add',
+      vm: this
+    })
+    this._createTime()
+    this._createDate()
+    this._setValueSync()
+  },
+  beforeDestroy () {
+    this.$refs.picker.remove()
+    this.$dispatch('Form', 'uni-form-group-update', {
+      type: 'remove',
+      vm: this
+    })
+  },
+  methods: {
+    _show (event) {
+      if (this.disabled) {
+        return
+      }
+      this.valueChangeSource = ''
+      var $picker = this.$refs.picker
+      $picker.remove();
+      (document.querySelector('uni-app') || document.body).appendChild($picker)
+      $picker.style.display = 'block'
+      const rect = event.currentTarget.getBoundingClientRect()
+      this.popover = {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height
+      }
+      setTimeout(() => {
+        this.visible = true
+      }, 20)
+    },
+    _getFormData () {
+      return {
+        value: this.valueSync,
+        key: this.name
+      }
+    },
+    _resetFormData () {
+      switch (this.mode) {
+        case mode.SELECTOR:
+          this.valueSync = 0
+          break
+        case mode.MULTISELECTOR:
+          this.valueSync = this.value.map(val => 0)
+          break
+        case mode.DATE:
+        case mode.TIME:
+          this.valueSync = ''
+          break
+        default:
+          break
+      }
+    },
+    _createTime () {
+      var hours = []
+      var minutes = []
+      hours.splice(0, hours.length)
+      for (let i = 0; i < 24; i++) {
+        hours.push((i < 10 ? '0' : '') + i)
+      }
+      minutes.splice(0, minutes.length)
+      for (let i = 0; i < 60; i++) {
+        minutes.push((i < 10 ? '0' : '') + i)
+      }
+      this.timeArray.push(hours, minutes)
+    },
+    _createDate () {
+      var years = []
+      var year = new Date().getFullYear()
+      for (let i = year - 150, end = year + 150; i <= end; i++) {
+        years.push(String(i))
+      }
+      var months = []
+      for (let i = 1; i <= 12; i++) {
+        months.push((i < 10 ? '0' : '') + i)
+      }
+      var days = []
+      for (let i = 1; i <= 31; i++) {
+        days.push((i < 10 ? '0' : '') + i)
+      }
+      this.dateArray.push(years, months, days)
+    },
+    _getTimeValue (val) {
+      return val[0] * 60 + val[1]
+    },
+    _getDateValue (val) {
+      const DAY = 31
+      return val[0] * DAY * 12 + (val[1] || 0) * DAY + (val[2] || 0)
+    },
+    /**
+     * 将右侧数组值同步到左侧（交集部分）
+     */
+    _cloneArray (val1, val2) {
+      for (let i = 0; i < val1.length && i < val2.length; i++) {
+        val1[i] = val2[i]
+      }
+    },
+    _setValueSync () {
+      let val = this.value
+      switch (this.mode) {
+        case mode.MULTISELECTOR:
+          {
+            if (!Array.isArray(val)) {
+              val = []
+            }
+            if (!Array.isArray(this.valueSync)) {
+              this.valueSync = []
+            }
+            const length = this.valueSync.length = Math.max(val.length, this.range.length)
+            for (let index = 0; index < length; index++) {
+              const val0 = Number(val[index])
+              const val1 = Number(this.valueSync[index])
+              const val2 = isNaN(val0) ? (isNaN(val1) ? 0 : val1) : val0
+              const maxVal = this.range[index] ? this.range[index].length - 1 : 0
+              this.valueSync.splice(index, 1, (val2 < 0 || val2 > maxVal) ? 0 : val2)
+            }
+          }
+          break
+        case mode.TIME:
+        case mode.DATE:
+          this.valueSync = String(val)
+          break
+        default: {
+          const valueSync = Number(val)
+          this.valueSync = valueSync < 0 ? 0 : valueSync
+          break
+        }
+      }
+    },
+    _setValueArray () {
+      var val = this.valueSync
+      var valueArray
+      switch (this.mode) {
+        case mode.MULTISELECTOR:
+          valueArray = [...val]
+          break
+        case mode.TIME:
+          valueArray = this._getDateValueArray(val, formatDateTime({
+            mode: mode.TIME
+          }))
+          break
+        case mode.DATE:
+          valueArray = this._getDateValueArray(val, formatDateTime({
+            mode: mode.DATE
+          }))
+          break
+        default:
+          valueArray = [val]
+          break
+      }
+      this.oldValueArray = [...valueArray]
+      this.valueArray = [...valueArray]
+    },
+    _getValue () {
+      var val = this.valueArray
+      switch (this.mode) {
+        case mode.SELECTOR:
+          return val[0]
+        case mode.MULTISELECTOR:
+          return val.map(val => val)
+        case mode.TIME:
+          return this.valueArray
+            .map((val, i) => this.timeArray[i][val])
+            .join(':')
+        case mode.DATE:
+          return this.valueArray
+            .map((val, i) => this.dateArray[i][val])
+            .join('-')
+      }
+    },
+    _getDateValueArray (valueStr, defaultValue) {
+      const splitStr = this.mode === mode.DATE ? '-' : ':'
+      const array = this.mode === mode.DATE ? this.dateArray : this.timeArray
+      let max
+      if (this.mode === mode.TIME) {
+        max = 2
+      } else {
+        switch (this.fields) {
+          case fields.YEAR:
+            max = 1
+            break
+          case fields.MONTH:
+            max = 2
+            break
+          default:
+            max = 3
+            break
+        }
+      }
+      const inputArray = String(valueStr).split(splitStr)
+      let value = []
+      for (let i = 0; i < max; i++) {
+        const val = inputArray[i]
+        value.push(array[i].indexOf(val))
+      }
+      if (value.indexOf(-1) >= 0) {
+        value = defaultValue ? this._getDateValueArray(defaultValue) : value.map(() => 0)
+      }
+      return value
+    },
+    _change () {
+      this._close()
+      this.valueChangeSource = 'click'
+      const value = this._getValue()
+      this.valueSync = Array.isArray(value) ? value.map(val => val) : value
+      this.$trigger('change', {}, {
+        value
+      })
+    },
+    _cancel ($event) {
+      if (this.system === 'firefox') {
+        // Firefox 在 input 同位置区域点击无法隐藏控件
+        const { top, left, width, height } = this.popover
+        const { pageX, pageY } = $event
+        if (pageX > left && pageX < left + width && pageY > top && pageY < top + height) {
+          return
+        }
+      }
+      this._close()
+      this.$trigger('cancel', {}, {})
+    },
+    _close () {
+      this.visible = false
+      setTimeout(() => {
+        var $picker = this.$refs.picker
+        $picker.remove()
+        this.$el.prepend($picker)
+        $picker.style.display = 'none'
+      }, 260)
+    },
+    _select () {
+      if (this.mode === mode.SELECTOR && this.selectorTypeComputed === selectorType.SELECT) {
+        this.$refs.select.scrollTop = this.valueArray[0] * 34
+      }
+    },
+    _input ($event) {
+      this.valueSync = $event.target.value
+      this.$nextTick(() => {
+        this._change()
+      })
+    },
+    _fixInputPosition ($event) {
+      if (this.system === 'chrome') {
+        const rect = this.$el.getBoundingClientRect()
+        const style = this.$refs.input.style
+        const fontSize = 32
+        style.left = `${$event.clientX - rect.left - fontSize * 1.5}px`
+        style.top = `${$event.clientY - rect.top - fontSize * 0.5}px`
+      }
+    },
+    _pickerViewChange (event) {
+      this.valueArray = this._l10nColumn(event.detail.value, true)
+    },
+    _l10nColumn (array, normalize) {
+      if (this.mode === mode.DATE) {
+        const locale = getLocale()
+        if (!locale.startsWith('zh')) {
+          switch (this.fields) {
+            case fields.YEAR:
+              return array
+            case fields.MONTH:
+              return [array[1], array[0]]
+            default:
+              switch (locale) {
+                case 'es':
+                case 'fr':
+                  return [array[2], array[1], array[0]]
+                // case 'en':
+                default:
+                  return normalize ? [array[2], array[0], array[1]] : [array[1], array[2], array[0]]
+              }
+          }
+        }
+      }
+      return array
+    },
+    _l10nItem (item, index) {
+      if (this.mode === mode.DATE) {
+        const locale = getLocale()
+        if (locale.startsWith('zh')) {
+          const array = ['年', '月', '日']
+          return item + array[index]
+        } else if (this.fields !== fields.YEAR && index === (this.fields !== fields.MONTH && (locale === 'es' || locale === 'fr') ? 1 : 0)) {
+          let array
+          switch (locale) {
+            case 'es':
+              array = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', '​​julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre']
+              break
+            case 'fr':
+              array = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
+              break
+            // case 'en':
+            default:
+              array = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+              break
+          }
+          return array[Number(item) - 1]
+        }
+      }
+      return item
+    }
+  }
+}
+</script>
+
+<style>
+uni-picker {
+  position: relative;
+  display: block;
+  cursor: pointer;
+}
+
+uni-picker[hidden] {
+  display: none;
+}
+
+uni-picker[disabled] {
+  cursor: not-allowed;
+}
+
+.uni-picker-container {
+  display: none;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  z-index: 999;
+  font-size: 16px;
+}
+
+.uni-picker-container .uni-picker-custom * {
+  box-sizing: border-box;
+}
+
+.uni-picker-container .uni-picker-custom {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  transform: translate(0, 100%);
+  backface-visibility: hidden;
+  z-index: 999;
+  width: 100%;
+  background-color: #efeff4;
+  visibility: hidden;
+  transition: transform 0.3s, visibility 0.3s;
+}
+
+.uni-picker-container .uni-picker-custom.uni-picker-toggle {
+  visibility: visible;
+  transform: translate(0, 0);
+}
+
+.uni-picker-container .uni-picker-content {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 238px;
+  background-color: white;
+}
+
+.uni-picker-container .uni-picker-item {
+  padding: 0;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
+  color: #000;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.uni-picker-container .uni-picker-header {
+  display: block;
+  position: relative;
+  text-align: center;
+  width: 100%;
+  height: 45px;
+  background-color: #fff;
+}
+
+.uni-picker-container .uni-picker-header:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  clear: both;
+  border-bottom: 1px solid #e5e5e5;
+  color: #e5e5e5;
+  transform-origin: 0 100%;
+  transform: scaleY(0.5);
+}
+
+.uni-picker-container .uni-picker-action {
+  display: block;
+  max-width: 50%;
+  top: 0;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 14px;
+  font-size: 17px;
+  line-height: 45px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.uni-picker-container .uni-picker-action.uni-picker-action-cancel {
+  float: left;
+  color: #888;
+}
+
+.uni-picker-container .uni-picker-action.uni-picker-action-confirm {
+  float: right;
+  color: #007aff;
+}
+
+.uni-picker-container .uni-picker-select {
+  display: none;
+}
+
+.uni-picker-system {
+  position: absolute;
+  display: none;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.uni-picker-system > input {
+  position: absolute;
+  border: none;
+  height: 100%;
+  opacity: 0;
+  /* Chrome 无效 */
+  cursor: pointer;
+}
+
+.uni-picker-system > input.firefox {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.uni-picker-system > input.chrome {
+  /* 日历空白位置宽度 32px */
+  top: 0;
+  left: 0;
+  width: 2em;
+  font-size: 32px;
+  height: 32px;
+}
+
+@media screen and (min-width: 500px) and (min-height: 500px) {
+  .uni-mask.uni-picker-mask {
+    background: none;
+  }
+  .uni-picker-container .uni-picker-custom {
+    width: 300px;
+    left: 50%;
+    right: auto;
+    top: 50%;
+    bottom: auto;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    border-radius: 5px;
+    transition: opacity 0.3s, visibility 0.3s;
+    box-shadow: 0px 0 20px 5px rgba(0, 0, 0, 0.3);
+  }
+  .uni-picker-container .uni-picker-header {
+    border-radius: 5px 5px 0 0;
+  }
+  .uni-picker-container .uni-picker-content {
+    /* transform 用于解决 Safari overflow 失效的问题 */
+    transform: translate(0 0);
+    overflow: hidden;
+    border-radius: 0 0 5px 5px;
+  }
+  .uni-picker-container .uni-picker-custom.uni-picker-toggle {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+  .uni-selector-select .uni-picker-header,
+  .uni-selector-select .uni-picker-content {
+    display: none;
+  }
+  .uni-selector-select .uni-picker-select {
+    display: block;
+    max-height: 300px;
+    overflow: auto;
+    background-color: white;
+    border-radius: 5px;
+    padding: 6px 0;
+  }
+  .uni-selector-select .uni-picker-item {
+    padding: 0 10px;
+    color: #555555;
+  }
+  .uni-selector-select .uni-picker-item:hover {
+    background-color: #f6f6f6;
+  }
+  .uni-selector-select .uni-picker-item.selected {
+    color: #007aff;
+  }
+}
+</style>
diff --git a/packages/uni-h5/src/view/components/video/index.vue b/packages/uni-h5/src/view/components/video/index.vue
new file mode 100644
index 000000000..8fdf78433
--- /dev/null
+++ b/packages/uni-h5/src/view/components/video/index.vue
@@ -0,0 +1,1079 @@
+<template>
+  <uni-video
+    :id="id"
+    v-on="$listeners"
+  >
+    <div
+      ref="container"
+      class="uni-video-container"
+      @touchstart="touchstart"
+      @touchend="touchend"
+      @touchmove="touchmove"
+      @fullscreenchange.stop="onFullscreenChange"
+      @webkitfullscreenchange.stop="onFullscreenChange($event,true)"
+    >
+      <video
+        ref="video"
+        :style="{objectFit:objectFit}"
+        :muted="muted"
+        :loop="loop"
+        :src="srcSync"
+        :poster="poster"
+        :autoplay="autoplay"
+        v-bind="$attrs"
+        class="uni-video-video"
+        webkit-playsinline
+        playsinline
+        @click="triggerControls"
+        @durationchange="onDurationChange"
+        @loadedmetadata="onLoadedMetadata"
+        @progress="onProgress"
+        @waiting="onWaiting"
+        @error="onVideoError"
+        @play="onPlay"
+        @pause="onPause"
+        @ended="onEnded"
+        @timeupdate="onTimeUpdate"
+        @webkitbeginfullscreen="emitFullscreenChange(true)"
+        @x5videoenterfullscreen="emitFullscreenChange(true)"
+        @webkitendfullscreen="emitFullscreenChange(false)"
+        @x5videoexitfullscreen="emitFullscreenChange(false)"
+      />
+      <div
+        v-show="controlsShow"
+        class="uni-video-bar uni-video-bar-full"
+        @click.stop
+      >
+        <div class="uni-video-controls">
+          <div
+            v-show="showPlayBtn"
+            :class="{'uni-video-control-button-play':!playing,'uni-video-control-button-pause':playing}"
+            class="uni-video-control-button"
+            @click.stop="trigger"
+          />
+          <div class="uni-video-current-time">
+            {{ currentTime|time }}
+          </div>
+          <div
+            ref="progress"
+            class="uni-video-progress-container"
+            @click.stop="clickProgress($event)"
+          >
+            <div class="uni-video-progress">
+              <div
+                :style="{width:buffered+'%'}"
+                class="uni-video-progress-buffered"
+              />
+              <div
+                ref="ball"
+                :style="{left:progress+'%'}"
+                class="uni-video-ball"
+              >
+                <div class="uni-video-inner" />
+              </div>
+            </div>
+          </div>
+          <div class="uni-video-duration">
+            {{ (duration||durationTime)|time }}
+          </div>
+        </div>
+        <div
+          v-if="danmuBtn"
+          :class="{'uni-video-danmu-button-active':enableDanmuSync}"
+          class="uni-video-danmu-button"
+          @click.stop="triggerDanmu"
+        >
+          {{ $$t("uni.video.danmu") }}
+        </div>
+        <div
+          v-show="showFullscreenBtn"
+          :class="{'uni-video-type-fullscreen':fullscreen}"
+          class="uni-video-fullscreen"
+          @click.stop="triggerFullscreen(!fullscreen)"
+        />
+      </div>
+      <div
+        v-show="start&&enableDanmuSync"
+        ref="danmu"
+        style="z-index: 0;"
+        class="uni-video-danmu"
+      />
+      <div
+        v-if="centerPlayBtnShow"
+        class="uni-video-cover"
+        @click.stop
+      >
+        <div
+          class="uni-video-cover-play-button"
+          @click.stop="play"
+        />
+        <p class="uni-video-cover-duration">
+          {{ (duration||durationTime)|time }}
+        </p>
+      </div>
+      <div
+        :class="{'uni-video-toast-volume':gestureType==='volume'}"
+        class="uni-video-toast"
+      >
+        <div class="uni-video-toast-title">
+          {{ $$t("uni.video.volume") }}
+        </div>
+        <svg
+          class="uni-video-toast-icon"
+          width="200px"
+          height="200px"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M475.400704 201.19552l0 621.674496q0 14.856192-10.856448 25.71264t-25.71264 10.856448-25.71264-10.856448l-190.273536-190.273536-149.704704 0q-14.856192 0-25.71264-10.856448t-10.856448-25.71264l0-219.414528q0-14.856192 10.856448-25.71264t25.71264-10.856448l149.704704 0 190.273536-190.273536q10.856448-10.856448 25.71264-10.856448t25.71264 10.856448 10.856448 25.71264zm219.414528 310.837248q0 43.425792-24.28416 80.851968t-64.2816 53.425152q-5.71392 2.85696-14.2848 2.85696-14.856192 0-25.71264-10.570752t-10.856448-25.998336q0-11.999232 6.856704-20.284416t16.570368-14.2848 19.427328-13.142016 16.570368-20.284416 6.856704-32.569344-6.856704-32.569344-16.570368-20.284416-19.427328-13.142016-16.570368-14.2848-6.856704-20.284416q0-15.427584 10.856448-25.998336t25.71264-10.570752q8.57088 0 14.2848 2.85696 39.99744 15.427584 64.2816 53.139456t24.28416 81.137664zm146.276352 0q0 87.422976-48.56832 161.41824t-128.5632 107.707392q-7.428096 2.85696-14.2848 2.85696-15.427584 0-26.284032-10.856448t-10.856448-25.71264q0-22.284288 22.284288-33.712128 31.997952-16.570368 43.425792-25.141248 42.283008-30.855168 65.995776-77.423616t23.712768-99.136512-23.712768-99.136512-65.995776-77.423616q-11.42784-8.57088-43.425792-25.141248-22.284288-11.42784-22.284288-33.712128 0-14.856192 10.856448-25.71264t25.71264-10.856448q7.428096 0 14.856192 2.85696 79.99488 33.712128 128.5632 107.707392t48.56832 161.41824zm146.276352 0q0 131.42016-72.566784 241.41312t-193.130496 161.989632q-7.428096 2.85696-14.856192 2.85696-14.856192 0-25.71264-10.856448t-10.856448-25.71264q0-20.570112 22.284288-33.712128 3.999744-2.285568 12.85632-5.999616t12.85632-5.999616q26.284032-14.2848 46.854144-29.140992 70.281216-51.996672 109.707264-129.705984t39.426048-165.132288-39.426048-165.132288-109.707264-129.705984q-20.570112-14.856192-46.854144-29.140992-3.999744-2.285568-12.85632-5.999616t-12.85632-5.999616q-22.284288-13.142016-22.284288-33.712128 0-14.856192 10.856448-25.71264t25.71264-10.856448q7.428096 0 14.856192 2.85696 120.563712 51.996672 193.130496 161.989632t72.566784 241.41312z"
+          />
+        </svg>
+        <div class="uni-video-toast-value">
+          <div
+            :style="{width:volumeNew*100+'%'}"
+            class="uni-video-toast-value-content"
+          >
+            <div class="uni-video-toast-volume-grids">
+              <div
+                v-for="(item,index) in 10"
+                :key="index"
+                class="uni-video-toast-volume-grids-item"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        :class="{'uni-video-toast-progress':gestureType=='progress'}"
+        class="uni-video-toast"
+      >
+        <div class="uni-video-toast-title">
+          {{ currentTimeNew|time }} / {{ durationTime|time }}
+        </div>
+      </div>
+      <div class="uni-video-slots">
+        <slot />
+      </div>
+    </div>
+  </uni-video>
+</template>
+<script>
+import {
+  subscriber,
+  interact
+} from 'uni-mixins'
+import {
+  supportsPassive
+} from 'uni-shared'
+import {
+  i18nMixin
+} from 'uni-core/helpers/i18n'
+
+const passiveOptions = supportsPassive ? {
+  passive: false
+} : false
+
+const GestureType = {
+  NONE: 'none',
+  STOP: 'stop',
+  VOLUME: 'volume',
+  PROGRESS: 'progress'
+}
+
+export default {
+  name: 'Video',
+  filters: {
+    time (val) {
+      val = val > 0 && val < Infinity ? val : 0
+      let h = Math.floor(val / 3600)
+      let m = Math.floor(val % 3600 / 60)
+      let s = Math.floor(val % 3600 % 60)
+      h = (h < 10 ? '0' : '') + h
+      m = (m < 10 ? '0' : '') + m
+      s = (s < 10 ? '0' : '') + s
+      let str = m + ':' + s
+      if (h !== '00') {
+        str = h + ':' + str
+      }
+      return str
+    }
+  },
+  mixins: [i18nMixin, subscriber, interact],
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    src: {
+      type: String,
+      default: ''
+    },
+    duration: {
+      type: [Number, String],
+      default: ''
+    },
+    controls: {
+      type: [Boolean, String],
+      default: true
+    },
+    danmuList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    danmuBtn: {
+      type: [Boolean, String],
+      default: false
+    },
+    enableDanmu: {
+      type: [Boolean, String],
+      default: false
+    },
+    autoplay: {
+      type: [Boolean, String],
+      default: false
+    },
+    loop: {
+      type: [Boolean, String],
+      default: false
+    },
+    muted: {
+      type: [Boolean, String],
+      default: false
+    },
+    objectFit: {
+      type: String,
+      default: 'contain'
+    },
+    poster: {
+      type: String,
+      default: ''
+    },
+    direction: {
+      type: [String, Number],
+      default: ''
+    },
+    showProgress: {
+      type: Boolean,
+      default: true
+    },
+    initialTime: {
+      type: [String, Number],
+      default: 0
+    },
+    showFullscreenBtn: {
+      type: [Boolean, String],
+      default: true
+    },
+    pageGesture: {
+      type: [Boolean, String],
+      default: false
+    },
+    enableProgressGesture: {
+      type: [Boolean, String],
+      default: true
+    },
+    showPlayBtn: {
+      type: [Boolean, String],
+      default: true
+    },
+    showCenterPlayBtn: {
+      type: [Boolean, String],
+      default: true
+    }
+  },
+  data () {
+    return {
+      start: false,
+      playing: false,
+      currentTime: 0,
+      durationTime: 0,
+      progress: 0,
+      touching: false,
+      enableDanmuSync: Boolean(this.enableDanmu),
+      controlsVisible: true,
+      fullscreen: false,
+      controlsTouching: false,
+      touchStartOrigin: {
+        x: 0,
+        y: 0
+      },
+      gestureType: GestureType.NONE,
+      currentTimeOld: 0,
+      currentTimeNew: 0,
+      volumeOld: null,
+      volumeNew: null,
+      buffered: 0,
+      isSafari: /^Apple/.test(navigator.vendor)
+    }
+  },
+  computed: {
+    centerPlayBtnShow () {
+      return this.showCenterPlayBtn && !this.start
+    },
+    controlsShow () {
+      return !this.centerPlayBtnShow && this.controls && this.controlsVisible
+    },
+    autoHideContorls () {
+      return this.controlsShow && this.playing && !this.controlsTouching
+    },
+    srcSync () {
+      return this.$getRealPath(this.src)
+    }
+  },
+  watch: {
+    enableDanmuSync (val) {
+      this.$emit('update:enableDanmu', val)
+    },
+    autoHideContorls (val) {
+      if (val) {
+        this.autoHideStart()
+      } else {
+        this.autoHideEnd()
+      }
+    },
+    srcSync (val) {
+      this.playing = false
+      this.currentTime = 0
+    },
+    currentTime () {
+      this.updateProgress()
+    },
+    duration () {
+      this.updateProgress()
+    },
+    buffered (buffered) {
+      if (buffered !== 0) {
+        this.$trigger('progress', {}, {
+          buffered
+        })
+      }
+    }
+  },
+  created () {
+    this.otherData = {
+      danmuList: [],
+      danmuIndex: {
+        time: 0,
+        index: -1
+      },
+      hideTiming: null
+    }
+    const danmuList = this.otherData.danmuList = JSON.parse(JSON.stringify(this.danmuList || []))
+    danmuList.sort(function (a, b) {
+      return (a.time || 0) - (a.time || 0)
+    })
+  },
+  mounted () {
+    const self = this
+    let originX
+    let originY
+    let moveOnce = true
+    let originProgress
+    const ball = this.$refs.ball
+    ball.addEventListener('touchstart', (event) => {
+      this.controlsTouching = true
+      const toucher = event.targetTouches[0]
+      originX = toucher.pageX
+      originY = toucher.pageY
+      originProgress = this.progress
+      moveOnce = true
+      this.touching = true
+      ball.addEventListener('touchmove', touchmove, passiveOptions)
+    })
+
+    function touchmove (event) {
+      const toucher = event.targetTouches[0]
+      const pageX = toucher.pageX
+      const pageY = toucher.pageY
+      if (moveOnce && Math.abs(pageX - originX) < Math.abs(pageY - originY)) {
+        touchend()
+        return
+      }
+      moveOnce = false
+      const w = self.$refs.progress.offsetWidth
+      let progress = originProgress + (pageX - originX) / w * 100
+      if (progress < 0) {
+        progress = 0
+      } else if (progress > 100) {
+        progress = 100
+      }
+      self.progress = progress
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
+    function touchend (event) {
+      self.controlsTouching = false
+      if (self.touching) {
+        ball.removeEventListener('touchmove', touchmove, passiveOptions)
+        if (!moveOnce) {
+          event.preventDefault()
+          event.stopPropagation()
+          self.seek(self.$refs.video.duration * self.progress / 100)
+        }
+        self.touching = false
+      }
+    }
+    ball.addEventListener('touchend', touchend)
+    ball.addEventListener('touchcancel', touchend)
+  },
+  beforeDestroy () {
+    this.triggerFullscreen(false)
+    clearTimeout(this.otherData.hideTiming)
+  },
+  methods: {
+    _handleSubscribe ({
+      type,
+      data = {}
+    }) {
+      const methods = ['play', 'pause', 'seek', 'sendDanmu', 'playbackRate', 'requestFullScreen', 'exitFullScreen']
+      let options
+      switch (type) {
+        case 'seek':
+          options = data.position
+          break
+        case 'sendDanmu':
+          options = data
+          break
+        case 'playbackRate':
+          options = data.rate
+          break
+      }
+      if (methods.indexOf(type) >= 0) {
+        this[type](options)
+      }
+    },
+    trigger () {
+      if (this.playing) {
+        this.$refs.video.pause()
+      } else {
+        this.$refs.video.play()
+      }
+    },
+    play () {
+      this.start = true
+      this.$refs.video.play()
+    },
+    pause () {
+      this.$refs.video.pause()
+    },
+    seek (position) {
+      position = Number(position)
+      if (typeof position === 'number' && !isNaN(position)) {
+        this.$refs.video.currentTime = position
+      }
+    },
+    clickProgress (event) {
+      const $progress = this.$refs.progress
+      let element = event.target
+      let x = event.offsetX
+      while (element !== $progress) {
+        x += element.offsetLeft
+        element = element.parentNode
+      }
+      const w = $progress.offsetWidth
+      let progress = 0
+      if (x >= 0 && x <= w) {
+        progress = x / w
+        this.seek(this.$refs.video.duration * progress)
+      }
+    },
+    triggerDanmu () {
+      this.enableDanmuSync = !this.enableDanmuSync
+    },
+    playDanmu (danmu) {
+      const p = document.createElement('p')
+      p.className = 'uni-video-danmu-item'
+      p.innerText = danmu.text
+      let style = `bottom: ${Math.random() * 100}%;color: ${danmu.color};`
+      p.setAttribute('style', style)
+      this.$refs.danmu.appendChild(p)
+      setTimeout(function () {
+        style += 'left: 0;-webkit-transform: translateX(-100%);transform: translateX(-100%);'
+        p.setAttribute('style', style)
+        setTimeout(function () {
+          p.remove()
+        }, 4000)
+      }, 17)
+    },
+    sendDanmu (danmu) {
+      const otherData = this.otherData
+      otherData.danmuList.splice(otherData.danmuIndex.index + 1, 0, {
+        text: String(danmu.text),
+        color: danmu.color,
+        time: this.$refs.video.currentTime || 0
+      })
+    },
+    playbackRate (rate) {
+      this.$refs.video.playbackRate = rate
+    },
+    triggerFullscreen (val) {
+      const container = this.$refs.container
+      const video = this.$refs.video
+      let mockFullScreen
+      if (val) {
+        if ((document.fullscreenEnabled || document.webkitFullscreenEnabled) && (!this.isSafari || this.userInteract)) {
+          container[document.fullscreenEnabled ? 'requestFullscreen' : 'webkitRequestFullscreen']()
+        } else if (video.webkitEnterFullScreen) {
+          video.webkitEnterFullScreen()
+        } else {
+          mockFullScreen = true
+          container.remove()
+          container.classList.add('uni-video-type-fullscreen')
+          document.body.appendChild(container)
+        }
+      } else {
+        if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {
+          if (document.fullscreenElement) {
+            document.exitFullscreen()
+          } else if (document.webkitFullscreenElement) {
+            document.webkitExitFullscreen()
+          }
+        } else if (video.webkitExitFullScreen) {
+          video.webkitExitFullScreen()
+        } else {
+          mockFullScreen = true
+          container.remove()
+          container.classList.remove('uni-video-type-fullscreen')
+          this.$el.appendChild(container)
+        }
+      }
+      if (mockFullScreen) {
+        this.emitFullscreenChange(val)
+      }
+    },
+    onFullscreenChange ($event, webkit) {
+      if (webkit && document.fullscreenEnabled) {
+        return
+      }
+      this.emitFullscreenChange(!!(document.fullscreenElement || document.webkitFullscreenElement))
+    },
+    emitFullscreenChange (val) {
+      this.fullscreen = val
+      this.$trigger('fullscreenchange', {}, {
+        fullScreen: val,
+        direction: 'vertical'
+      })
+    },
+    requestFullScreen () {
+      this.triggerFullscreen(true)
+    },
+    exitFullScreen () {
+      this.triggerFullscreen(false)
+    },
+    onDurationChange ({ target }) {
+      this.durationTime = target.duration
+    },
+    onLoadedMetadata ($event) {
+      const initialTime = Number(this.initialTime) || 0
+      const video = $event.target
+      if (initialTime > 0) {
+        video.currentTime = initialTime
+      }
+      this.$trigger('loadedmetadata', $event, {
+        width: video.videoWidth,
+        height: video.videoHeight,
+        duration: video.duration
+      })
+      this.onProgress($event)
+    },
+    onProgress ($event) {
+      const video = $event.target
+      const buffered = video.buffered
+      if (buffered.length) {
+        this.buffered = buffered.end(buffered.length - 1) / video.duration * 100
+      }
+    },
+    onWaiting ($event) {
+      this.$trigger('waiting', $event, {})
+    },
+    onVideoError ($event) {
+      this.playing = false
+      this.$trigger('error', $event, {})
+    },
+    onPlay ($event) {
+      this.start = true
+      this.playing = true
+      this.$trigger('play', $event, {})
+    },
+    onPause ($event) {
+      this.playing = false
+      this.$trigger('pause', $event, {})
+    },
+    onEnded ($event) {
+      this.playing = false
+      this.$trigger('ended', $event, {})
+    },
+    onTimeUpdate ($event) {
+      const video = $event.target
+      const otherData = this.otherData
+      const currentTime = this.currentTime = video.currentTime
+      const oldDanmuIndex = otherData.danmuIndex
+      const danmuIndex = {
+        time: currentTime,
+        index: oldDanmuIndex.index
+      }
+      const danmuList = otherData.danmuList
+      if (currentTime > oldDanmuIndex.time) {
+        for (let index = oldDanmuIndex.index + 1; index < danmuList.length; index++) {
+          const element = danmuList[index]
+          if (currentTime >= (element.time || 0)) {
+            danmuIndex.index = index
+            if (this.playing && this.enableDanmuSync) {
+              this.playDanmu(element)
+            }
+          } else {
+            break
+          }
+        }
+      } else if (currentTime < oldDanmuIndex.time) {
+        for (let index = oldDanmuIndex.index - 1; index > -1; index--) {
+          const element = danmuList[index]
+          if (currentTime <= (element.time || 0)) {
+            danmuIndex.index = index - 1
+          } else {
+            break
+          }
+        }
+      }
+      otherData.danmuIndex = danmuIndex
+      this.$trigger('timeupdate', $event, {
+        currentTime,
+        duration: video.duration
+      })
+    },
+    triggerControls () {
+      this.controlsVisible = !this.controlsVisible
+    },
+    touchstart (event) {
+      const toucher = event.targetTouches[0]
+      this.touchStartOrigin = {
+        x: toucher.pageX,
+        y: toucher.pageY
+      }
+      this.gestureType = GestureType.NONE
+      this.volumeOld = null
+      this.currentTimeOld = this.currentTimeNew = 0
+    },
+    touchmove (event) {
+      function stop () {
+        event.stopPropagation()
+        event.preventDefault()
+      }
+      if (this.fullscreen) {
+        stop()
+      }
+      const gestureType = this.gestureType
+      if (gestureType === GestureType.STOP) {
+        return
+      }
+      const toucher = event.targetTouches[0]
+      const pageX = toucher.pageX
+      const pageY = toucher.pageY
+      const origin = this.touchStartOrigin
+      if (gestureType === GestureType.PROGRESS) {
+        this.changeProgress(pageX - origin.x)
+      } else if (gestureType === GestureType.VOLUME) {
+        this.changeVolume(pageY - origin.y)
+      }
+      if (gestureType !== GestureType.NONE) {
+        return
+      }
+      if (Math.abs(pageX - origin.x) > Math.abs(pageY - origin.y)) {
+        if (!this.enableProgressGesture) {
+          this.gestureType = GestureType.STOP
+          return
+        }
+        this.gestureType = GestureType.PROGRESS
+        this.currentTimeOld = this.currentTimeNew = this.$refs.video.currentTime
+        if (!this.fullscreen) {
+          stop()
+        }
+      } else {
+        if (!this.pageGesture) {
+          this.gestureType = GestureType.STOP
+          return
+        }
+        this.gestureType = GestureType.VOLUME
+        this.volumeOld = this.$refs.video.volume
+        if (!this.fullscreen) {
+          stop()
+        }
+      }
+    },
+    touchend (event) {
+      if (this.gestureType !== GestureType.NONE && this.gestureType !== GestureType.STOP) {
+        event.stopPropagation()
+        event.preventDefault()
+      }
+      if (this.gestureType === GestureType.PROGRESS && this.currentTimeOld !== this.currentTimeNew) {
+        this.$refs.video.currentTime = this.currentTimeNew
+      }
+      this.gestureType = GestureType.NONE
+    },
+    changeProgress (x) {
+      const duration = this.$refs.video.duration
+      let currentTimeNew = x / 600 * duration + this.currentTimeOld
+      if (currentTimeNew < 0) {
+        currentTimeNew = 0
+      } else if (currentTimeNew > duration) {
+        currentTimeNew = duration
+      }
+      this.currentTimeNew = currentTimeNew
+    },
+    changeVolume (y) {
+      const valueOld = this.volumeOld
+      let value
+      if (typeof valueOld === 'number') {
+        value = valueOld - y / 200
+        if (value < 0) {
+          value = 0
+        } else if (value > 1) {
+          value = 1
+        }
+        this.$refs.video.volume = value
+        this.volumeNew = value
+      }
+    },
+    autoHideStart () {
+      this.otherData.hideTiming = setTimeout(() => {
+        this.controlsVisible = false
+      }, 3000)
+    },
+    autoHideEnd () {
+      const otherData = this.otherData
+      if (otherData.hideTiming) {
+        clearTimeout(otherData.hideTiming)
+        otherData.hideTiming = null
+      }
+    },
+    updateProgress () {
+      if (!this.touching) {
+        this.progress = this.currentTime / this.durationTime * 100
+      }
+    }
+  }
+}
+</script>
+
+<style>
+uni-video {
+  width: 300px;
+  height: 225px;
+  display: inline-block;
+  line-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+uni-video[hidden] {
+  display: none;
+}
+
+.uni-video-container {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  object-position: inherit;
+}
+
+.uni-video-container.uni-video-type-fullscreen {
+  position: fixed;
+  z-index: 999;
+}
+
+.uni-video-video {
+  width: 100%;
+  height: 100%;
+  object-position: inherit;
+}
+
+.uni-video-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(1, 1, 1, 0.5);
+  z-index: 1;
+}
+
+.uni-video-slots {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.uni-video-cover-play-button {
+  width: 40px;
+  height: 40px;
+  background-size: 50%;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  cursor: pointer;
+}
+
+.uni-video-cover-duration {
+  color: #fff;
+  font-size: 16px;
+  line-height: 1;
+  margin-top: 10px;
+}
+
+.uni-video-bar {
+  height: 44px;
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  display: flex;
+  align-items: center;
+  align-items: center;
+  padding: 0 10px;
+  z-index: 0;
+  /* 解决全屏后被 video 遮挡的问题 */
+  transform: translate3d(0, 0, 0);
+}
+
+.uni-video-bar.uni-video-bar-full {
+  left: 0;
+}
+
+.uni-video-controls {
+  display: flex;
+  display: flex;
+  flex-grow: 1;
+  flex-grow: 1;
+  margin: 0 8.5px;
+}
+
+.uni-video-control-button {
+  width: 13px;
+  height: 15px;
+  padding: 14.5px 12.5px 14.5px 12.5px;
+  margin-left: -8.5px;
+  box-sizing: content-box;
+  cursor: pointer;
+}
+
+.uni-video-control-button::after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-size: 100%;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+}
+
+.uni-video-control-button.uni-video-control-button-play::after,
+.uni-video-cover-play-button {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAAAXNSR0IArs4c6QAAAWhJREFUSA1j+P///0cgBoHjQGzCQCsAtgJB/AMy5wCxGNXtQ9iBwvoA5BUCMQvVLEQxHpNzDSjkRhXLMM3GKrIeKKpEkYVYjcUu+AMo3ALE3GRZiN1MvKKPgbIRJFuG10j8koeA0gZEW4jfLIKyf4EqpgOxMEELCRpFnIJ3QGU5QMyM00LizCFa1SWgSkeslhFtBGkKVwGVy6FYSJp+klR/A6quB2JOkIWMIK0oNlOf8xBoZDE9LAI7nYn6HsBq4l96WHQEaLUpAyiOaASeAM2NgvuPBpaACt82IEYtfKls0UagecpwXyAzqGTRdaA57sjmYrAptAjUsCkGYlYMg9EFyLQI1IiZB8Ti6Obh5JNh0QmgHlOcBuKSIMGi50C18UDMiMssvOJEWPQLqKYbiHnxGkRIkoBF24DyaoTMIEoeh0W3geI+RBlArCI0iz4D+RVAzEasfqLVAQ19AcSg5LoYiKWI1kiiQgCMBLnEEcfDSgAAAABJRU5ErkJggg==");
+}
+
+.uni-video-control-button.uni-video-control-button-pause::after {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAAAXNSR0IArs4c6QAAAFlJREFUSA3tksEKACAIQ7X//5zq98wOgQayum8QaGweHhMzG/6OujzKAymn+0LMqivu1XznWmX8/echTIyMyAgTwA72iIwwAexgj8gIE8CO3aMRbDPMaEy5BRGaKcZv8YxRAAAAAElFTkSuQmCC");
+}
+
+.uni-video-current-time,
+.uni-video-duration {
+  height: 14.5px;
+  line-height: 14.5px;
+  margin-top: 15px;
+  margin-bottom: 14.5px;
+  font-size: 12px;
+  color: #cbcbcb;
+}
+
+.uni-video-progress-container {
+  flex-grow: 2;
+  flex-grow: 2;
+  position: relative;
+}
+
+.uni-video-progress {
+  height: 2px;
+  margin: 21px 12px;
+  background-color: rgba(255, 255, 255, 0.4);
+  position: relative;
+  cursor: pointer;
+}
+
+.uni-video-progress-buffered {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 100%;
+  transition: width 0.1s;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.uni-video-ball {
+  width: 16px;
+  height: 16px;
+  padding: 14px;
+  position: absolute;
+  top: -21px;
+  box-sizing: content-box;
+  left: 0%;
+  margin-left: -22px;
+}
+
+.uni-video-inner {
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+  border-radius: 50%;
+}
+
+.uni-video-danmu-button {
+  white-space: nowrap;
+  line-height: 1;
+  padding: 2px 10px;
+  border: 1px solid #fff;
+  border-radius: 5px;
+  font-size: 13px;
+  color: #fff;
+  margin: 0 8.5px;
+  cursor: pointer;
+}
+
+.uni-video-danmu-button.uni-video-danmu-button-active {
+  border-color: #48c23d;
+  color: #48c23d;
+}
+
+.uni-video-fullscreen {
+  width: 17px;
+  height: 17px;
+  padding: 8.5px;
+  box-sizing: content-box;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAAXNSR0IArs4c6QAAAQRJREFUWAnt1d0NwiAQB/CmS7hHX5zFxLF0Ah2hE/lg7BT4PyMJUj6Oyt299BIioZT7ARYG59wLpTXmoXOMGO/QecxtwyWW4o42AupGALkFdX1MkHxE3Q7jIbQPqNthQogpJoZkMLRlsn/gFMQEk4OoY0oQVUwNoobhQFQwgMxUKFkt0C8+Zy61d8SeR5iHWCLOwF/MCb8Tp//ex3QFsE1HlCfKFUX2OijNFMnPKD7k76YcBoL402Zh8B77+MjlXrVvwfglXA32b0MrRgxCE2nBiEJaMOIQLkYFwsGoQWoYVUgJow4pYD4Weq4ayBqfwDYQmnUK0301kITujuawu65/l2B5A4z3Qe+Ut7EBAAAAAElFTkSuQmCC");
+  background-size: 50%;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+.uni-video-fullscreen.uni-video-type-fullscreen {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAABBElEQVRYhcXWwQ3CMAwF0O+qOzAKQzAAl0pMxQQwQhmGKwcERxbgc4lEVdHUbm3zJR8qJemTo6YByS3JO8kjyQbGkHQpkOz4zcmK8YQ0BWDCkOxL+UDKombMYKwfZAkmDGLFhEIsmHCIFpMC0WDSIHOYVEgNkw6pYPIhE5j/QCoYF0g7eEkPYGej+cX82x/l6aIAIOb9CcrajrjFE/IAQGP1IgIRcYVsVs32+vx+nC9nWq6dAZDhOaPHBEDGh54O4w0pa9oxEZBFmCjIBGb6Qh4JMWGiIWpMBkSFyYLMYjIhNUw7N9GQi2aQiLxJHspjV+rl1hFrRp25uV2MRGQRBsAewPUD/HhJVOOuCzwAAAAASUVORK5CYII=");
+}
+
+.uni-video-danmu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  margin-top: 14px;
+  margin-bottom: 44px;
+  font-size: 14px;
+  line-height: 14px;
+  overflow: visible;
+}
+
+.uni-video-danmu-item {
+  line-height: 1;
+  position: absolute;
+  color: #ffffff;
+  white-space: nowrap;
+  left: 100%;
+  transform: translatex(0);
+  transition-property: left, transform;
+  transition-duration: 3s;
+  transition-timing-function: linear;
+}
+
+.uni-video-toast {
+  pointer-events: none;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 5px;
+  background-color: rgba(255, 255, 255, 0.8);
+  color: #000000;
+  display: none;
+}
+
+.uni-video-toast.uni-video-toast-volume {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+
+.uni-video-toast-volume .uni-video-toast-title {
+  width: 100%;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center;
+  margin-top: 10px;
+  display: block;
+}
+
+.uni-video-toast-volume .uni-video-toast-icon {
+  fill: #000000;
+  width: 50%;
+  height: 50%;
+  margin-left: 25%;
+  display: block;
+}
+
+.uni-video-toast-volume .uni-video-toast-value {
+  width: 80px;
+  height: 5px;
+  margin-top: 5px;
+  margin-left: 10px;
+}
+
+.uni-video-toast-volume
+  .uni-video-toast-value
+  > .uni-video-toast-value-content {
+  overflow: hidden;
+}
+
+.uni-video-toast-volume-grids {
+  width: 80px;
+  height: 5px;
+}
+
+.uni-video-toast-volume-grids-item {
+  float: left;
+  width: 7.1px;
+  height: 5px;
+  background-color: #000000;
+}
+
+.uni-video-toast-volume-grids-item:not(:first-child) {
+  margin-left: 1px;
+}
+
+.uni-video-toast.uni-video-toast-progress {
+  display: block;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  font-size: 14px;
+  line-height: 18px;
+  padding: 6px;
+}
+</style>
diff --git a/packages/uni-h5/src/view/components/web-view/README.md b/packages/uni-h5/src/view/components/web-view/README.md
new file mode 100644
index 000000000..d4c266175
--- /dev/null
+++ b/packages/uni-h5/src/view/components/web-view/README.md
@@ -0,0 +1,15 @@
+# web-view
+|属性|完成度|
+|:-|:-|
+|src|√|
+|@message|-|
+
+|方法|完成度|
+|:-|:-|
+|navigateTo|√|
+|redirectTo|√|
+|reLaunch|√|
+|switchTab|√|
+|navigateBack|√|
+|getEnv|√|
+|postMessage|-|
diff --git a/packages/uni-h5/src/view/components/web-view/index.vue b/packages/uni-h5/src/view/components/web-view/index.vue
new file mode 100644
index 000000000..7510c3af9
--- /dev/null
+++ b/packages/uni-h5/src/view/components/web-view/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <uni-web-view v-on="$listeners">
+    <v-uni-resize-sensor
+      ref="sensor"
+      @resize="_resize"
+    />
+  </uni-web-view>
+</template>
+<script>
+export default {
+  name: 'WebView',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    }
+  },
+  watch: {
+    src (val, oldVal) {
+      this.iframe && (this.iframe.src = this.$getRealPath(this.src))
+    }
+  },
+  mounted () {
+    this.iframe = document.createElement('iframe')
+    Object.keys(this.$attrs).forEach(key => {
+      this.iframe[key] = this.$attrs[key]
+    })
+    this.iframe.src = this.$getRealPath(this.src)
+    document.body.appendChild(this.iframe)
+    this._resize()
+  },
+  activated () {
+    this.iframe.style.display = 'block'
+  },
+  deactivated () {
+    this.iframe.style.display = 'none'
+  },
+  beforeDestroy () {
+    document.body.removeChild(this.iframe)
+  },
+  methods: {
+    _resize () {
+      const {
+        top,
+        left,
+        width,
+        height
+      } = this.$el.getBoundingClientRect()
+
+      this.iframe.style.position = 'absolute'
+      this.iframe.style.display = 'block'
+      this.iframe.style.border = 0
+      this.iframe.style.top = top + 'px'
+      this.iframe.style.left = left + 'px'
+      this.iframe.style.width = width + 'px'
+      this.iframe.style.height = height + 'px'
+    }
+  }
+}
+</script>
+<style>
+    uni-web-view {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    }
+</style>
diff --git a/tsconfig.json b/tsconfig.json
index bd551ed33..e58b4c568 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
     "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
-    "allowJs": false,
+    "allowJs": true,
     "strict": true,
     "noUnusedLocals": true,
     "experimentalDecorators": true,
-- 
GitLab