diff --git a/packages/core/src/convertor/convertor.js b/packages/core/src/convertor/convertor.js
index 6139f4a194..0efbac8e0e 100644
--- a/packages/core/src/convertor/convertor.js
+++ b/packages/core/src/convertor/convertor.js
@@ -1,6 +1,6 @@
 import { LIFECYCLE, lifecycleProxyMap, pageMode } from '../platform/patch/lifecycle/index'
 import { mergeLifecycle } from './mergeLifecycle'
-import { error } from '@mpxjs/utils'
+import { error, extend } from '@mpxjs/utils'
 import wxToAliRule from './wxToAli'
 import wxToWebRule from './wxToWeb'
 import wxToSwanRule from './wxToSwan'
@@ -27,17 +27,17 @@ const defaultConvertRule = {
 }
 
 const rulesMap = {
-  local: { ...defaultConvertRule },
+  local: extend({}, defaultConvertRule),
   default: defaultConvertRule,
   wxToWeb: wxToWebRule,
   wxToAli: wxToAliRule,
   wxToSwan: wxToSwanRule,
-  wxToQq: { ...defaultConvertRule, ...wxToQqRule },
-  wxToTt: { ...defaultConvertRule, ...wxToTtRule },
-  wxToDd: { ...defaultConvertRule, ...wxToDdRule },
-  wxToJd: { ...defaultConvertRule, ...wxToJdRule },
-  wxToIos: { ...defaultConvertRule, ...wxToReactRule },
-  wxToAndroid: { ...defaultConvertRule, ...wxToReactRule }
+  wxToQq: extend({}, defaultConvertRule, wxToQqRule),
+  wxToTt: extend({}, defaultConvertRule, wxToTtRule),
+  wxToDd: extend({}, defaultConvertRule, wxToDdRule),
+  wxToJd: extend({}, defaultConvertRule, wxToJdRule),
+  wxToIos: extend({}, defaultConvertRule, wxToReactRule),
+  wxToAndroid: extend({}, defaultConvertRule, wxToReactRule)
 }
 
 export function getConvertRule (convertMode) {
diff --git a/packages/core/src/observer/ref.js b/packages/core/src/observer/ref.js
index 1f1bce28aa..1fa93a5b91 100644
--- a/packages/core/src/observer/ref.js
+++ b/packages/core/src/observer/ref.js
@@ -3,12 +3,13 @@ import { RefKey } from '../helper/const'
 import {
   warn,
   isPlainObject,
-  hasOwn
+  hasOwn,
+  extend
 } from '@mpxjs/utils'
 
 export class RefImpl {
   constructor (options) {
-    Object.defineProperty(this, 'value', { enumerable: true, ...options })
+    Object.defineProperty(this, 'value', extend({ enumerable: true }, options))
   }
 }
 
diff --git a/packages/core/src/observer/watch.js b/packages/core/src/observer/watch.js
index 7a8cbd4ef2..0c6095a083 100644
--- a/packages/core/src/observer/watch.js
+++ b/packages/core/src/observer/watch.js
@@ -12,7 +12,8 @@ import {
   isArray,
   remove,
   callWithErrorHandling,
-  hasChanged
+  hasChanged,
+  extend
 } from '@mpxjs/utils'
 
 export function watchEffect (effect, options) {
@@ -20,11 +21,11 @@ export function watchEffect (effect, options) {
 }
 
 export function watchPostEffect (effect, options) {
-  return watch(effect, null, { ...options, flush: 'post' })
+  return watch(effect, null, extend({}, options, { flush: 'post' }))
 }
 
 export function watchSyncEffect (effect, options) {
-  return watch(effect, null, { ...options, flush: 'sync' })
+  return watch(effect, null, extend({}, options, { flush: 'sync' }))
 }
 
 const warnInvalidSource = (s) => {
@@ -34,7 +35,7 @@ const warnInvalidSource = (s) => {
 const shouldTrigger = (value, oldValue) => hasChanged(value, oldValue) || isObject(value)
 
 const processWatchOptionsCompat = (options) => {
-  const newOptions = { ...options }
+  const newOptions = extend({}, options)
   if (options.sync) {
     newOptions.flush = 'sync'
   }
diff --git a/packages/core/src/platform/createApp.ios.js b/packages/core/src/platform/createApp.ios.js
index 2d7c939e7a..5cd4dc9aee 100644
--- a/packages/core/src/platform/createApp.ios.js
+++ b/packages/core/src/platform/createApp.ios.js
@@ -1,6 +1,6 @@
 import transferOptions from '../core/transferOptions'
 import builtInKeysMap from './patch/builtInKeysMap'
-import { makeMap, spreadProp, parseUrlQuery, getFocusedNavigation, hasOwn } from '@mpxjs/utils'
+import { makeMap, spreadProp, parseUrlQuery, getFocusedNavigation, hasOwn, extend } from '@mpxjs/utils'
 import { mergeLifecycle } from '../convertor/mergeLifecycle'
 import { LIFECYCLE } from '../platform/patch/lifecycle/index'
 import Mpx from '../index'
@@ -30,11 +30,7 @@ function filterOptions (options, appData) {
 }
 
 function createAppInstance (appData) {
-  const instance = {
-    ...Mpx.prototype,
-    ...appData
-  }
-  return instance
+  return extend({}, Mpx.prototype, appData)
 }
 
 export default function createApp (option, config = {}) {
diff --git a/packages/fetch/src/index.js b/packages/fetch/src/index.js
index 132f752348..2d56ceaed7 100644
--- a/packages/fetch/src/index.js
+++ b/packages/fetch/src/index.js
@@ -1,5 +1,6 @@
 import XFetch from './xfetch'
 import CancelToken from './cancelToken'
+import { extend } from '@mpxjs/utils'
 
 let installed = false
 
@@ -15,7 +16,7 @@ function install (proxyMpx, options, Mpx) {
   if (installed) return
   // add request queue when mode is qq
   const isqq = __mpx_mode__ === 'qq'
-  xfetch = new XFetch(isqq ? { useQueue: defaultRequestQueueOptions, ...options } : options, Mpx)
+  xfetch = new XFetch(isqq ? extend({ useQueue: defaultRequestQueueOptions }, options) : options, Mpx)
   installed = true
   proxyMpx.xfetch = xfetch
   Object.defineProperty(proxyMpx.prototype, '$xfetch', {
diff --git a/packages/fetch/src/util.js b/packages/fetch/src/util.js
index e3ff45c87f..df086cc83b 100644
--- a/packages/fetch/src/util.js
+++ b/packages/fetch/src/util.js
@@ -1,7 +1,5 @@
 import { match } from 'path-to-regexp'
-
-import { type, isFunction, isArray, isString, forEach, isNumber } from '@mpxjs/utils/src/base'
-import { serialize, buildUrl, parseUrl } from '@mpxjs/utils/src/url'
+import { type, isFunction, isArray, isString, forEach, isNumber, serialize, buildUrl, parseUrl, extend } from '@mpxjs/utils'
 
 const toString = Object.prototype.toString
 const hasOwnProperty = Object.prototype.hasOwnProperty
@@ -212,7 +210,7 @@ function checkCacheConfig (thisConfig, cacheData) {
     paramsEquals = thisConfig.usePre.equals(thisConfig, cacheData)
   } else {
     paramsEquals = compareParams(thisConfig.params, cacheData.params, thisConfig.usePre.ignorePreParamKeys) &&
-        compareParams(thisConfig.data, cacheData.data, thisConfig.usePre.ignorePreParamKeys)
+      compareParams(thisConfig.data, cacheData.data, thisConfig.usePre.ignorePreParamKeys)
   }
   return paramsEquals && thisConfig.method === cacheData.method
 }
@@ -263,6 +261,7 @@ export {
   isThenable,
   isFunction,
   isNumber,
+  extend,
   parseUrl,
   deepMerge,
   doTest,
diff --git a/packages/fetch/src/xfetch.js b/packages/fetch/src/xfetch.js
index 0eb7b1de12..88a842fad2 100644
--- a/packages/fetch/src/xfetch.js
+++ b/packages/fetch/src/xfetch.js
@@ -4,7 +4,7 @@ import InterceptorManager from './interceptorManager'
 import RequestQueue from './queue'
 import { requestProxy } from './proxy'
 import { Validator } from './validator'
-import { isNotEmptyArray, isNotEmptyObject, transformReq, isObject, formatCacheKey, checkCacheConfig, isArray, isString } from './util'
+import { isNotEmptyArray, isNotEmptyObject, transformReq, isObject, formatCacheKey, checkCacheConfig, isArray, isString, extend } from './util'
 
 export default class XFetch {
   constructor (options, MPX) {
@@ -13,10 +13,9 @@ export default class XFetch {
     // this.requestAdapter = (config) => requestAdapter(config, MPX)
     // 当存在 useQueue 配置时，才使用 this.queue 变量
     if (options && options.useQueue && typeof options.useQueue === 'object') {
-      this.queue = new RequestQueue({
-        adapter: (config) => requestAdapter(config, MPX),
-        ...options.useQueue
-      })
+      this.queue = new RequestQueue(extend({
+        adapter: (config) => requestAdapter(config, MPX)
+      }, options.useQueue))
     } else {
       this.requestAdapter = (config) => requestAdapter(config, MPX)
     }
@@ -177,7 +176,7 @@ export default class XFetch {
       if (isNotExpired && checkCacheConfig(config, cacheRequestData) && cacheRequestData.responsePromise) {
         return cacheRequestData.responsePromise.then(response => {
           // 添加 isCache 标识该请求来源于缓存
-          return { ...response, isCache: true }
+          return extend(response, { isCache: true })
         })
       } else {
         delete this.cacheRequestData[cacheKey]
diff --git a/packages/utils/src/object.js b/packages/utils/src/object.js
index bd05a66459..9ac08cb1f3 100644
--- a/packages/utils/src/object.js
+++ b/packages/utils/src/object.js
@@ -2,6 +2,8 @@ import { type, noop, isObject } from './base'
 
 const hasOwnProperty = Object.prototype.hasOwnProperty
 
+const extend = Object.assign
+
 function hasOwn (obj, key) {
   return isObject(obj) && hasOwnProperty.call(obj, key)
 }
@@ -189,6 +191,7 @@ function processUndefined (obj) {
 
 export {
   hasOwn,
+  extend,
   isPlainObject,
   diffAndCloneA,
   proxy,
diff --git a/packages/webpack-plugin/lib/runtime/components/web/getInnerListeners.js b/packages/webpack-plugin/lib/runtime/components/web/getInnerListeners.js
index 2facddbb94..dfaedfa8c9 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/getInnerListeners.js
+++ b/packages/webpack-plugin/lib/runtime/components/web/getInnerListeners.js
@@ -1,3 +1,4 @@
+import { extend } from '../../utils'
 function processModel (listeners, context) {
   // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值
   // 该函数必须在产生merge前执行
@@ -53,7 +54,7 @@ export function extendEvent (e, extendObj = {}) {
 }
 
 export function inheritEvent (type, oe, detail = {}) {
-  detail = Object.assign({}, oe.detail, detail)
+  detail = extend({}, oe.detail, detail)
   const ne = getCustomEvent(type, detail)
   extendEvent(ne, {
     timeStamp: oe.timeStamp,
@@ -68,12 +69,11 @@ export function inheritEvent (type, oe, detail = {}) {
 export function getCustomEvent (type, detail = {}, target = null) {
   const targetEl = (target && target.$el) || null
   const targetInfo = targetEl ? { target: targetEl, currentTarget: targetEl } : {}
-  return {
+  return extend({
     type,
     detail,
-    timeStamp: new Date().valueOf(),
-    ...targetInfo
-  }
+    timeStamp: new Date().valueOf()
+  }, targetInfo)
 }
 
 function noop () {
@@ -82,7 +82,7 @@ function noop () {
 
 export default function getInnerListeners (context, options = {}) {
   let { mergeBefore = {}, mergeAfter = {}, defaultListeners = [], ignoredListeners = [] } = options
-  const listeners = Object.assign({}, context.$listeners)
+  const listeners = extend({}, context.$listeners)
   defaultListeners.forEach((key) => {
     if (!listeners[key]) listeners[key] = noop
   })
diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-movable-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-movable-view.vue
index 620c4e1413..167fc531c1 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-movable-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-movable-view.vue
@@ -7,379 +7,369 @@
 </template>
 
 <script type="text/ecmascript-6">
-  import {getCustomEvent, extendEvent} from './getInnerListeners'
-  import BScroll from '@better-scroll/core'
-  import Movable from '@better-scroll/movable'
-  import ObserveDOM from '@better-scroll/observe-dom'
-  import Zoom from '@better-scroll/zoom'
+import { getCustomEvent, extendEvent } from './getInnerListeners'
+import { extend } from '../../utils'
+import BScroll from '@better-scroll/core'
+import Movable from '@better-scroll/movable'
+import ObserveDOM from '@better-scroll/observe-dom'
+import Zoom from '@better-scroll/zoom'
 
-  BScroll.use(Movable)
-  BScroll.use(Zoom)
-  BScroll.use(ObserveDOM)
+BScroll.use(Movable)
+BScroll.use(Zoom)
+BScroll.use(ObserveDOM)
 
-  export default {
-    data () {
-      return {
-        directions: ['none', 'all', 'vertical', 'horizontal'],
-        minScrollX: 0,
-        maxScrollX: 0,
-        minScrollY: 0,
-        maxScrollY: 0,
-        currentX: this.x,
-        currentY: this.y,
-        lastestX: 0,
-        lastestY: 0,
-        lastestScale: 1,
-        bsOptions: {},
-        isZooming: false,
-        isFirstTouch: true,
-        source: '',
-        touchEvent: '',
-        isInited: false,
-        deactivatedX: 0,
-        deactivatedY: 0
+export default {
+  data () {
+    return {
+      directions: ['none', 'all', 'vertical', 'horizontal'],
+      minScrollX: 0,
+      maxScrollX: 0,
+      minScrollY: 0,
+      maxScrollY: 0,
+      currentX: this.x,
+      currentY: this.y,
+      lastestX: 0,
+      lastestY: 0,
+      lastestScale: 1,
+      bsOptions: {},
+      isZooming: false,
+      isFirstTouch: true,
+      source: '',
+      touchEvent: '',
+      isInited: false,
+      deactivatedX: 0,
+      deactivatedY: 0
+    }
+  },
+  props: {
+    direction: {
+      type: String,
+      default: 'none'
+    },
+    inertia: {
+      type: Boolean,
+      default: false
+    },
+    outOfBounds: {
+      type: Boolean,
+      default: false
+    },
+    x: {
+      type: Number,
+      default: 0
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    damping: {
+      type: Number,
+      default: 20
+    },
+    friction: {
+      type: Number,
+      default: 2
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    scale: {
+      type: Boolean,
+      default: false
+    },
+    scaleMin: {
+      type: Number,
+      default: 0.5
+    },
+    scaleMax: {
+      type: Number,
+      default: 10
+    },
+    scaleValue: {
+      type: Number,
+      default: 1
+    },
+    animation: {
+      type: Boolean,
+      default: true
+    },
+    speed: {
+      type: Number,
+      default: 500
+    },
+    scrollOptions: {
+      type: Object,
+      default: () => {
+        return {}
       }
     },
-    props: {
-      direction: {
-        type: String,
-        default: 'none'
-      },
-      inertia: {
-        type: Boolean,
-        default: false
-      },
-      outOfBounds: {
-        type: Boolean,
-        default: false
-      },
-      x: {
-        type: Number,
-        default: 0
-      },
-      y: {
-        type: Number,
-        default: 0
-      },
-      damping: {
-        type: Number,
-        default: 20
-      },
-      friction: {
-        type: Number,
-        default: 2
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      scale: {
-        type: Boolean,
-        default: false
-      },
-      scaleMin: {
-        type: Number,
-        default: 0.5
-      },
-      scaleMax: {
-        type: Number,
-        default: 10
-      },
-      scaleValue: {
-        type: Number,
-        default: 1
-      },
-      animation: {
-        type: Boolean,
-        default: true
-      },
-      speed: {
-        type: Number,
-        default: 500
-      },
-      scrollOptions: {
-        type: Object,
-        default: () => {
-          return {}
-        }
-      },
+  },
+  watch: {
+    x (newVal) {
+      this.source = ''
+      if (newVal > this.bs.minScrollX) {
+        newVal = this.bs.minScrollX
+      }
+      if (newVal < this.bs.maxScrollX) {
+        newVal = this.bs.maxScrollX
+      }
+      this.currentX = newVal
+      this.bs.scrollTo(newVal, this.bs.y, this.speed)
     },
-    watch: {
-      x (newVal) {
-        this.source = ''
-        if (newVal > this.bs.minScrollX) {
-          newVal = this.bs.minScrollX
-        }
-        if (newVal < this.bs.maxScrollX) {
-          newVal = this.bs.maxScrollX
-        }
-        this.currentX = newVal
-        this.bs.scrollTo(newVal, this.bs.y, this.speed)
-      },
-      y (newVal) {
-        this.source = ''
-        if (newVal > this.bs.minScrollY) {
-          newVal = this.bs.minScrollY
-        }
-        if (newVal < this.bs.maxScrollY) {
-          newVal = this.bs.maxScrollY
-        }
-        this.currentY = newVal
-        this.bs.scrollTo(this.bs.x, newVal, this.speed)
-      },
-      scaleValue (newVal) {
-        this.isZooming = true
-        if (newVal > 10) {
-          newVal = 10
-        }
-        if (newVal < 0.5) {
-          newVal = 0.5
-        }
-        this.bs.zoomTo(newVal, 'center', 'center')
-      },
-      disabled () {
-        this.init()
+    y (newVal) {
+      this.source = ''
+      if (newVal > this.bs.minScrollY) {
+        newVal = this.bs.minScrollY
+      }
+      if (newVal < this.bs.maxScrollY) {
+        newVal = this.bs.maxScrollY
       }
+      this.currentY = newVal
+      this.bs.scrollTo(this.bs.x, newVal, this.speed)
     },
-    mounted () {
-      if (!this.scrollOptions.closeResizeObserver) {
-        this.createResizeObserver()
+    scaleValue (newVal) {
+      this.isZooming = true
+      if (newVal > 10) {
+        newVal = 10
       }
-      this.init()
+      if (newVal < 0.5) {
+        newVal = 0.5
+      }
+      this.bs.zoomTo(newVal, 'center', 'center')
     },
-    activated () {
-      if (this.deactivatedX || this.deactivatedY) {
-        this.refresh()
-        this.bs.putAt(this.deactivatedX, this.deactivatedY, 0)
+    disabled () {
+      this.init()
+    }
+  },
+  mounted () {
+    if (!this.scrollOptions.closeResizeObserver) {
+      this.createResizeObserver()
+    }
+    this.init()
+  },
+  activated () {
+    if (this.deactivatedX || this.deactivatedY) {
+      this.refresh()
+      this.bs.putAt(this.deactivatedX, this.deactivatedY, 0)
+    }
+  },
+  deactivated () {
+    // when the hook is triggered
+    // bs will recalculate the boundary of movable to 0
+    // so record the position of the movable
+    this.deactivatedX = this.bs.x
+    this.deactivatedY = this.bs.y
+  },
+  beforeDestroy () {
+    this.destroyBs()
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+  },
+  methods: {
+    createResizeObserver () {
+      if (typeof ResizeObserver !== 'undefined') {
+        this.resizeObserver = new ResizeObserver(entries => {
+          if (!this.isInited) {
+            this.isInited = true
+            return
+          }
+          this.refresh()
+        })
+        const elementToObserve = document.querySelector('.mpx-movable-scroll-content')
+        elementToObserve && this.resizeObserver.observe(elementToObserve)
       }
     },
-    deactivated () {
-      // when the hook is triggered
-      // bs will recalculate the boundary of movable to 0
-      // so record the position of the movable
-      this.deactivatedX = this.bs.x
-      this.deactivatedY = this.bs.y
+    refresh () {
+      this.bs && this.bs.refresh()
+    },
+    destroyBs () {
+      if (!this.bs) return
+      this.bs.destroy()
+      delete this.bs
     },
-    beforeDestroy () {
+    init () {
       this.destroyBs()
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect()
-        this.resizeObserver = null
+      if (!this.$refs.scrollContent.parentNode || (this.$refs.scrollContent.parentNode && this.$refs.scrollContent.parentNode.className !== 'mpx-movable-scroll-wrapper')) {
+        return
       }
-    },
-    methods: {
-      createResizeObserver () {
-        if (typeof ResizeObserver !== 'undefined') {
-          this.resizeObserver = new ResizeObserver(entries => {
-            if (!this.isInited) {
-              this.isInited = true
-              return
-            }
-            this.refresh()
-          })
-          const elementToObserve = document.querySelector('.mpx-movable-scroll-content')
-          elementToObserve && this.resizeObserver.observe(elementToObserve)
-        }
-      },
-      refresh () {
-        this.bs && this.bs.refresh()
-      },
-      destroyBs () {
-        if (!this.bs) return
-        this.bs.destroy()
-        delete this.bs
-      },
-      init () {
-        this.destroyBs()
-        if (!this.$refs.scrollContent.parentNode || (this.$refs.scrollContent.parentNode && this.$refs.scrollContent.parentNode.className !== 'mpx-movable-scroll-wrapper')) {
-          return
+      this.initOptions()
+      const el = this.$refs.scrollContent
+      this.bs = new BScroll(this.$parent.$refs.scroll, extend({
+        specifiedIndexAsContent: [].indexOf.call(el.parentElement.children, el) || 0,
+        bindToTarget: true,
+        freeScroll: false,
+        scrollX: false,
+        scrollY: false,
+        movable: true,
+        startX: this.currentX,
+        startY: this.currentY,
+        bounce: this.outOfBounds,
+        bounceTime: 800 / (this.damping / 20),
+        probeType: 3
+      }, this.bsOptions))
+      const BehaviorHooks = this.bs.scroller.scrollBehaviorY.hooks
+      const actionsHandlerHooks = this.bs.scroller.actionsHandler.hooks
+      const scrollerHooks = this.bs.scroller.hooks
+      this.bs.putAt(this.currentX, this.currentY, 0)
+      this.lastestX = this.roundFun(this.x)
+      this.lastestY = this.roundFun(this.y)
+      this.lastestScale = this.roundFun(this.scaleValue)
+      this.minScrollX = this.bs.minScrollX
+      this.maxScrollX = this.bs.maxScrollX
+      this.minScrollY = this.bs.minScrollY
+      this.maxScrollY = this.bs.maxScrollY
+      scrollerHooks.on('beforeScrollStart', (position) => {
+        this.source = 'touch'
+      })
+      scrollerHooks.on('scroll', (position) => {
+        if (position.x > this.minScrollX && this.bs.movingDirectionX === -1 ||
+          (position.x < this.maxScrollX && this.bs.movingDirectionX === 1) ||
+          (position.y > this.minScrollY && this.bs.movingDirectionY === -1) ||
+          (position.y < this.maxScrollY && this.bs.movingDirectionY === 1)) {
+          this.source = 'touch-out-of-bounds'
         }
-        this.initOptions()
-        const el = this.$refs.scrollContent
-        this.bs = new BScroll(this.$parent.$refs.scroll, {
-          specifiedIndexAsContent: [].indexOf.call(el.parentElement.children, el) || 0,
-          bindToTarget: true,
-          freeScroll: false,
-          scrollX: false,
-          scrollY: false,
-          movable: true,
-          startX: this.currentX,
-          startY: this.currentY,
-          bounce: this.outOfBounds,
-          bounceTime: 800 / (this.damping / 20),
-          probeType: 3,
-          ...this.bsOptions
-        })
-        const BehaviorHooks = this.bs.scroller.scrollBehaviorY.hooks
-        const actionsHandlerHooks = this.bs.scroller.actionsHandler.hooks
-        const scrollerHooks = this.bs.scroller.hooks
-        this.bs.putAt(this.currentX, this.currentY, 0)
-        this.lastestX = this.roundFun(this.x)
-        this.lastestY = this.roundFun(this.y)
-        this.lastestScale = this.roundFun(this.scaleValue)
-        this.minScrollX = this.bs.minScrollX
-        this.maxScrollX = this.bs.maxScrollX
-        this.minScrollY = this.bs.minScrollY
-        this.maxScrollY = this.bs.maxScrollY
-        scrollerHooks.on('beforeScrollStart', (position) => {
-          this.source = 'touch'
-        })
-        scrollerHooks.on('scroll', (position) => {
-          if (position.x > this.minScrollX && this.bs.movingDirectionX === -1 ||
-            (position.x < this.maxScrollX && this.bs.movingDirectionX === 1) ||
-            (position.y > this.minScrollY && this.bs.movingDirectionY === -1) ||
-            (position.y < this.maxScrollY && this.bs.movingDirectionY === 1)) {
-            this.source = 'touch-out-of-bounds'
-          }
-          if (this.direction !== 'none' && (this.directions.indexOf(this.direction) >= 0)) {
-            if (this.isZooming || (this.roundFun(position.x) === this.lastestX && this.roundFun(position.y) === this.lastestY)) {
-              return
-            }
-            this.$emit('change', getCustomEvent('change', {
-              x: this.roundFun(position.x) ? this.roundFun(position.x) : 0,
-              y: this.roundFun(position.y) ? this.roundFun(position.y) : 0,
-              source: this.source
-            }, this))
-          }
-          this.lastestX = this.roundFun(position.x)
-          this.lastestY = this.roundFun(position.y)
-        })
-        scrollerHooks.on('scrollEnd', (position) =>{
-          this.currentX = this.bs.x
-          this.currentY = this.bs.y
-        })
-        scrollerHooks.on('touchEnd', (position) => {
-          this.isFirstTouch = true
-          if (position.x > this.minScrollX || position.x < this.maxScrollX ||
-            position.y > this.minScrollY || position.y < this.maxScrollY
-          ) {
-            this.source = 'out-of-bounds'
-          }
-          if (position.x > this.minScrollX) {
-            this.bs.movingDirectionX = 1
-          }
-          if (position.x < this.maxScrollX) {
-            this.bs.movingDirectionX = -1
-          }
-          if (position.y > this.minScrollY) {
-            this.bs.movingDirectionY = 1
-          }
-          if (position.y < this.maxScrollY) {
-            this.bs.movingDirectionY = -1
-          }
-        })
-        actionsHandlerHooks.on('start', (e) => {
-          extendEvent(e, { detail: Object.assign({}, e.detail) })
-          this.$emit('touchstart', e)
-        })
-        actionsHandlerHooks.on('end', (e) => {
-          extendEvent(e, { detail: Object.assign({}, e.detail) })
-          this.$emit('touchend', e)
-        })
-        actionsHandlerHooks.on('move', ({ deltaX, deltaY, e }) => {
-          if (this.isZooming) {
+        if (this.direction !== 'none' && (this.directions.indexOf(this.direction) >= 0)) {
+          if (this.isZooming || (this.roundFun(position.x) === this.lastestX && this.roundFun(position.y) === this.lastestY)) {
             return
           }
-          if (this.isFirstTouch) {
-            if (Math.abs(deltaX) -  Math.abs(deltaY) > 0) {
-              this.touchEvent = 'htouchmove'
-            } else {
-              this.touchEvent = 'vtouchmove'
-            }
-          }
-          extendEvent(e, { detail: Object.assign({}, e.detail), currentTarget: e.target })
-          this.$emit(this.touchEvent, e)
-          this.$emit('touchmove', e)
-          this.isFirstTouch = false
-        })
-        if (this.inertia) { // movable-view是否带有惯性
-          BehaviorHooks.on('momentum', (momentumData, distance) => {
-            this.source = 'friction'
-          })
+          this.$emit('change', getCustomEvent('change', {
+            x: this.roundFun(position.x) ? this.roundFun(position.x) : 0,
+            y: this.roundFun(position.y) ? this.roundFun(position.y) : 0,
+            source: this.source
+          }, this))
         }
-        if (this.scale) { // 支持双指缩放
-          this.bs.on('zooming', ({scale}) => {
-            if (this.lastestScale === this.roundFun(scale)) {
-              return
-            }
-            this.isZooming = true
-            this.$emit('scale', getCustomEvent('change', {
-              x: this.roundFun(this.bs.x),
-              y: this.roundFun(this.bs.y),
-              scale: this.roundFun(scale)
-            }, this))
-            this.lastestScale = this.roundFun(scale)
-          })
-          this.bs.on('zoomEnd', ({ scale }) => {
-            this.isZooming = false
-          })
+        this.lastestX = this.roundFun(position.x)
+        this.lastestY = this.roundFun(position.y)
+      })
+      scrollerHooks.on('scrollEnd', (position) => {
+        this.currentX = this.bs.x
+        this.currentY = this.bs.y
+      })
+      scrollerHooks.on('touchEnd', (position) => {
+        this.isFirstTouch = true
+        if (position.x > this.minScrollX || position.x < this.maxScrollX ||
+          position.y > this.minScrollY || position.y < this.maxScrollY
+        ) {
+          this.source = 'out-of-bounds'
         }
-      },
-      initOptions () {
-        if (!this.friction || this.friction < 0) {
-          this.friction = 2
+        if (position.x > this.minScrollX) {
+          this.bs.movingDirectionX = 1
         }
-        if (this.$parent.$attrs && this.$parent.$attrs['scale-area'] === "true") {
-          this.bsOptions = {
-            ...this.bsOptions,
-            bindToTarget: !this.scale
-          }
+        if (position.x < this.maxScrollX) {
+          this.bs.movingDirectionX = -1
         }
-        if (this.scale) {
-          this.bsOptions = {
-            ...this.bsOptions,
-            zoom:  { // for zoom plugin
-              start: this.scaleValue,
-              min: this.scaleMin < 0.5 ? 0.5 : this.scaleMin,
-              max: this.scaleMax > 10 ? 10 : this.scaleMax
-            }
-          }
+        if (position.y > this.minScrollY) {
+          this.bs.movingDirectionY = 1
         }
-        if (this.inertia) {
-          this.bsOptions = {
-            ...this.bsOptions,
-            momentum: true,
-            momentumLimitDistance: 30,
-            deceleration: this.friction / 2 * 0.05,
-            swipeTime: 50
-          }
+        if (position.y < this.maxScrollY) {
+          this.bs.movingDirectionY = -1
         }
-        if (this.disabled) {
-          this.bsOptions = {
-            ...this.bsOptions,
-            freeScroll: false,
-            scrollY: false,
-            scrollX: false
-          }
-        } else if (this.direction === 'vertical') {
-          this.bsOptions = {
-            ...this.bsOptions,
-            scrollY: true
+      })
+      actionsHandlerHooks.on('start', (e) => {
+        extendEvent(e, { detail: Object.assign({}, e.detail) })
+        this.$emit('touchstart', e)
+      })
+      actionsHandlerHooks.on('end', (e) => {
+        extendEvent(e, { detail: Object.assign({}, e.detail) })
+        this.$emit('touchend', e)
+      })
+      actionsHandlerHooks.on('move', ({ deltaX, deltaY, e }) => {
+        if (this.isZooming) {
+          return
+        }
+        if (this.isFirstTouch) {
+          if (Math.abs(deltaX) - Math.abs(deltaY) > 0) {
+            this.touchEvent = 'htouchmove'
+          } else {
+            this.touchEvent = 'vtouchmove'
           }
-        } else if (this.direction === 'horizontal') {
-          this.bsOptions = {
-            ...this.bsOptions,
-            scrollX: true
+        }
+        extendEvent(e, { detail: Object.assign({}, e.detail), currentTarget: e.target })
+        this.$emit(this.touchEvent, e)
+        this.$emit('touchmove', e)
+        this.isFirstTouch = false
+      })
+      if (this.inertia) { // movable-view是否带有惯性
+        BehaviorHooks.on('momentum', (momentumData, distance) => {
+          this.source = 'friction'
+        })
+      }
+      if (this.scale) { // 支持双指缩放
+        this.bs.on('zooming', ({ scale }) => {
+          if (this.lastestScale === this.roundFun(scale)) {
+            return
           }
-        } else if (this.direction === 'all') {
-          this.bsOptions = {
-            ...this.bsOptions,
-            freeScroll: true,
-            scrollX: true,
-            scrollY: true
+          this.isZooming = true
+          this.$emit('scale', getCustomEvent('change', {
+            x: this.roundFun(this.bs.x),
+            y: this.roundFun(this.bs.y),
+            scale: this.roundFun(scale)
+          }, this))
+          this.lastestScale = this.roundFun(scale)
+        })
+        this.bs.on('zoomEnd', ({ scale }) => {
+          this.isZooming = false
+        })
+      }
+    },
+    initOptions () {
+      if (!this.friction || this.friction < 0) {
+        this.friction = 2
+      }
+      if (this.$parent.$attrs && this.$parent.$attrs['scale-area'] === "true") {
+        extend(this.bsOptions, {
+          bindToTarget: !this.scale
+        })
+      }
+      if (this.scale) {
+        extend(this.bsOptions, {
+          zoom: { // for zoom plugin
+            start: this.scaleValue,
+            min: this.scaleMin < 0.5 ? 0.5 : this.scaleMin,
+            max: this.scaleMax > 10 ? 10 : this.scaleMax
           }
-        }
-        this.bsOptions = {
-          ...this.bsOptions,
-          ...this.scrollOptions
-        }
-      },
-      // 处理小数点，四舍五入，默认保留一位小数
-      roundFun(value, n = 1) {
-        return Math.round(value * Math.pow(10, n)) / Math.pow(10, n)
+        })
       }
+      if (this.inertia) {
+        extend(this.bsOptions, {
+          momentum: true,
+          momentumLimitDistance: 30,
+          deceleration: this.friction / 2 * 0.05,
+          swipeTime: 50
+        })
+      }
+      if (this.disabled) {
+        extend(this.bsOptions, {
+          freeScroll: false,
+          scrollY: false,
+          scrollX: false
+        })
+      } else if (this.direction === 'vertical') {
+        extend(this.bsOptions, {
+          scrollY: true
+        })
+      } else if (this.direction === 'horizontal') {
+        extend(this.bsOptions, {
+          scrollX: true
+        })
+      } else if (this.direction === 'all') {
+        extend(this.bsOptions, {
+          freeScroll: true,
+          scrollX: true,
+          scrollY: true
+        })
+      }
+      extend(this.bsOptions, this.scrollOptions)
+    },
+    // 处理小数点，四舍五入，默认保留一位小数
+    roundFun (value, n = 1) {
+      return Math.round(value * Math.pow(10, n)) / Math.pow(10, n)
     }
   }
+}
 </script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
   .mpx-movable-scroll-content
diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-picker-view-column.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-picker-view-column.vue
index beb5601216..effe1317f0 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-picker-view-column.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-picker-view-column.vue
@@ -7,90 +7,90 @@
 </template>
 
 <script type="text/ecmascript-6">
-  import BScroll from '@better-scroll/core'
-  import Wheel from '@better-scroll/wheel'
+import BScroll from '@better-scroll/core'
+import Wheel from '@better-scroll/wheel'
+import { extend } from '../../utils'
 
-  BScroll.use(Wheel)
+BScroll.use(Wheel)
 
-  export default {
-    name: 'mpx-picker-view-column',
-    props: {
-      value: Array,
-      scrollOptions: {
-        type: Object,
-        default: () => {
-          return {}
-        }
+export default {
+  name: 'mpx-picker-view-column',
+  props: {
+    value: Array,
+    scrollOptions: {
+      type: Object,
+      default: () => {
+        return {}
       }
-    },
-    data() {
-      return {
-        wheels: [],
-        selectedIndex: [0]
+    }
+  },
+  data () {
+    return {
+      wheels: [],
+      selectedIndex: [0]
+    }
+  },
+  computed: {},
+  watch: {
+    selectedIndex (newVal) {
+      if (this.wheels[0]) {
+        this.$nextTick(() => {
+          // make sure the dom rendering is complete
+          this.wheels[0].refresh()
+          this.wheels[0].wheelTo(newVal[0])
+        })
       }
-    },
-    computed: {},
-    watch: {
-      selectedIndex(newVal) {
+    }
+  },
+  mounted () {
+    this.wheels = []
+    this.refresh()
+    for (let i = 0; i < this.$refs.wheelScroll.children.length; i++) {
+      this.$refs.wheelScroll.children[i].style.height = `${this.$parent.$refs.indicatorMask.offsetHeight}px`
+    }
+  },
+  beforeDestroy () {
+    this.wheels.forEach((wheel) => {
+      wheel.destroy()
+    })
+    this.wheels = []
+  },
+  methods: {
+    refresh () {
+      if (this.refreshing) return
+      this.refreshing = true
+      this.$nextTick(() => {
+        const wheelWrapper = this.$refs.wheelWrapper
         if (this.wheels[0]) {
-          this.$nextTick(() => {
-            // make sure the dom rendering is complete
-            this.wheels[0].refresh()
-            this.wheels[0].wheelTo(newVal[0])
-          })
+          this.wheels[0].refresh()
+          return
         }
-      }
-    },
-    mounted() {
-      this.wheels = []
-      this.refresh()
-      for (let i = 0; i < this.$refs.wheelScroll.children.length; i++) {
-        this.$refs.wheelScroll.children[i].style.height = `${this.$parent.$refs.indicatorMask.offsetHeight}px`
-      }
-    },
-    beforeDestroy() {
-      this.wheels.forEach((wheel) => {
-        wheel.destroy()
-      })
-      this.wheels = []
-    },
-    methods: {
-      refresh() {
-        if (this.refreshing) return
-        this.refreshing = true
-        this.$nextTick(() => {
-          const wheelWrapper = this.$refs.wheelWrapper
-          if (this.wheels[0]) {
-            this.wheels[0].refresh()
-            return
+        this.wheels[0] = new BScroll(wheelWrapper, extend({
+          wheel: {
+            selectedIndex: this.selectedIndex[0],
+            rotate: -5,
+            wheelWrapperClass: 'wheel-scroll'
+          },
+          probeType: 3,
+          bindToWrapper: true
+        }, this.scrollOptions))
+        this.wheels[0].on('scrollStart', function () {
+          if (this.pickerView) {
+            this.pickerView.notifyPickstart()
           }
-          this.wheels[0] = new BScroll(wheelWrapper, {
-            wheel: {
-              selectedIndex: this.selectedIndex[0],
-              rotate: -5,
-              wheelWrapperClass: 'wheel-scroll'
-            },
-            probeType: 3,
-            bindToWrapper: true,
-            ...this.scrollOptions
-          })
-          this.wheels[0].on('scrollStart', function () {
-            if (this.pickerView) {
-              this.pickerView.notifyPickstart()
-            }
-          }.bind(this))
-          this.wheels[0].on('scrollEnd', function () {
-            if (this.refreshing) return
-            if (this.pickerView) {
-              this.pickerView.notifyChange()
-              this.pickerView.notifyPickend()
-            }
-          }.bind(this))
-          this.refreshing = false
-        })
-      }
+        }.bind(this))
+        this.wheels[0].on('scrollEnd', function () {
+          if (this.refreshing) return
+          if (this.pickerView) {
+            this.pickerView.notifyChange()
+            this.pickerView.notifyPickend()
+          }
+        }.bind(this))
+        this.refreshing = false
+      })
     }
   }
+}
 </script>
 
 <style scoped lang="stylus" rel="stylesheet/stylus">
diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-picker.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-picker.vue
index 6724028df0..bf5e5c17bc 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-picker.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-picker.vue
@@ -17,9 +17,7 @@
               <div class="wheel-wrapper" ref="wheelWrapper">
                 <div class="wheel" v-for="(data, index) in pickerData" :key="index">
                   <ul class="wheel-scroll">
-                    <li
-                      v-for="item in data" :key="item"
-                      class="wheel-item">{{item}}
+                    <li v-for="item in data" :key="item" class="wheel-item">{{ item }}
                     </li>
                   </ul>
                 </div>
@@ -34,453 +32,451 @@
 
 
 <script type="text/ecmascript-6">
-  import BScroll from '@better-scroll/core'
-  import Wheel from '@better-scroll/wheel'
-  import { type } from '../../utils'
-  import { getCustomEvent } from './getInnerListeners'
-
-  const startYear = 1900
-  const modeOptions = {
-    time: [23, 59],
-    date: [200, 11, 30]
+import BScroll from '@better-scroll/core'
+import Wheel from '@better-scroll/wheel'
+import { type, extend } from '../../utils'
+import { getCustomEvent } from './getInnerListeners'
+
+const startYear = 1900
+const modeOptions = {
+  time: [23, 59],
+  date: [200, 11, 30]
+}
+
+BScroll.use(Wheel)
+
+function getPickerData (range, rangeKey) {
+  if (range) {
+    return range.map((item) => {
+      if (rangeKey && type(item) === 'Object') {
+        return item[rangeKey]
+      }
+      return item
+    })
+  }
+  return range
+}
+
+function getTimePickerData () {
+  let list = []
+  for (let i = 0; i < 60; i++) {
+    let temp = i < 10 ? `0${i}` : i
+    list.push(temp)
   }
+  return [list.slice(0, 24), list]
+}
 
-  BScroll.use(Wheel)
+function getDatePickerData (fields) {
+  let years = []
+  let months = []
+  let days = []
 
-  function getPickerData (range, rangeKey) {
-    if (range) {
-      return range.map((item) => {
-        if (rangeKey && type(item) === 'Object') {
-          return item[rangeKey]
-        }
-        return item
-      })
-    }
-    return range
+  for (let i = 0; i <= 200; i++) {
+    years.push(`${startYear + i}年`)
   }
-
-  function getTimePickerData () {
-    let list = []
-    for (let i = 0; i < 60; i++) {
-      let temp = i < 10 ? `0${i}` : i
-      list.push(temp)
-    }
-    return [list.slice(0, 24), list]
+  if (fields === 'year') {
+    return [years]
   }
 
-  function getDatePickerData (fields) {
-    let years = []
-    let months = []
-    let days = []
-
-    for (let i = 0; i <= 200; i++) {
-      years.push(`${startYear + i}年`)
-    }
-    if (fields === 'year') {
-      return [years]
-    }
-
-    for (let i = 1; i <= 12; i++) {
-      let temp = i < 10 ? `0${i}` : i
-      months.push(`${temp}月`)
-    }
-    if (fields === 'month') {
-      return [years, months]
-    }
-
-    for (let i = 1; i <= 31; i++) {
-      let temp = i < 10 ? `0${i}` : i
-      days.push(`${temp}日`)
-    }
-    return [years, months, days]
+  for (let i = 1; i <= 12; i++) {
+    let temp = i < 10 ? `0${i}` : i
+    months.push(`${temp}月`)
+  }
+  if (fields === 'month') {
+    return [years, months]
   }
 
-  export default {
-    name: 'mpx-picker',
-    props: {
-      mode: {
-        type: String,
-        default: 'selector'
-      },
-      disabled: Boolean,
-      range: {
-        type: Array,
-        default () {
-          return []
-        }
-      },
-      rangeKey: String,
-      value: {
-        type: [Number, String, Array],
-        default () {
-          switch (this.mode) {
-            case 'selector':
-              return 0
-            case 'multiSelector':
-              return []
-            case 'time':
-              return ''
-            case 'date':
-              return ''
-            default:
-              return ''
-          }
-        }
-      },
-      start: {
-        type: String,
-        default: '1970-01-01'
-      },
-      end: {
-        type: String,
-        default: '2100-01-01'
-      },
-      fields: {
-        type: String,
-        default: 'day'
-      },
-      scrollOptions: {
-        type: Object,
-        default: () => {
-          return {}
-        }
-      }
+  for (let i = 1; i <= 31; i++) {
+    let temp = i < 10 ? `0${i}` : i
+    days.push(`${temp}日`)
+  }
+  return [years, months, days]
+}
+
+export default {
+  name: 'mpx-picker',
+  props: {
+    mode: {
+      type: String,
+      default: 'selector'
     },
-    data () {
-      return {
-        isShow: false,
-        startIndex: [0, 0, 0],
-        endIndex: [0, 0, 0],
-        itemHeight: 0
+    disabled: Boolean,
+    range: {
+      type: Array,
+      default () {
+        return []
       }
     },
-    computed: {
-      pickerData () {
+    rangeKey: String,
+    value: {
+      type: [Number, String, Array],
+      default () {
         switch (this.mode) {
           case 'selector':
-            return [getPickerData(this.range, this.rangeKey)]
+            return 0
           case 'multiSelector':
-            return this.range.map((item) => {
-              return getPickerData(item, this.rangeKey)
-            })
+            return []
           case 'time':
-            return getTimePickerData()
+            return ''
           case 'date':
-            return getDatePickerData(this.fields)
+            return ''
           default:
-            return []
+            return ''
         }
       }
     },
-    watch: {
-      pickerData () {
-        this.refresh()
-      },
-      value: {
-        handler () {
-          let valueTemp = []
-          switch (this.mode) {
-            case 'selector':
-              this.selectedIndex = [this.value]
-              break
-            case 'multiSelector':
-              this.selectedIndex = []
-              for (let i = 0; i < this.range.length; i++) {
-                this.selectedIndex[i] = this.value[i] || 0
-              }
-              break
-            case 'time':
-              this.selectedIndex = []
-              if (!this.value)  {
-                valueTemp = [new Date().getHours(), new Date().getMinutes()]
-              } else {
-                valueTemp = this.value && this.value.split(':')
-              }
-              for (let i = 0; i < valueTemp.length; i++) {
-                this.selectedIndex[i] = valueTemp[i] || 0
-              }
-              break
-            case 'date':
-              this.selectedIndex = []
-              if (!this.value)  {
-                valueTemp = [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]
-              } else {
-                valueTemp = this.value && this.value.split('-')
-              }
-              let result = Object.keys(this.pickerData[0]).filter(item => startYear + Number(item) === Number(valueTemp[0]))
-              this.selectedIndex[0] = Number(result[0])
-              for (let i = 1; i < valueTemp.length; i++) {
-                this.selectedIndex[i] = valueTemp[i] - 1
-              }
-              break
-            default:
-              this.selectedIndex = [0]
-          }
-          this.refresh()
-        },
-        immediate: true
-      }
+    start: {
+      type: String,
+      default: '1970-01-01'
     },
-    mounted () {
-      this.wheels = []
-      this.refresh()
-      this.initRangeIndex()
+    end: {
+      type: String,
+      default: '2100-01-01'
     },
-    beforeDestroy () {
-      this.wheels.forEach((wheel) => {
-        wheel.destroy()
-      })
-      this.wheels = []
+    fields: {
+      type: String,
+      default: 'day'
     },
-    methods: {
-      _confirm () {
-        if (this._isMoving()) {
-          return
-        }
-        this.hide()
-        let value = ''
+    scrollOptions: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      isShow: false,
+      startIndex: [0, 0, 0],
+      endIndex: [0, 0, 0],
+      itemHeight: 0
+    }
+  },
+  computed: {
+    pickerData () {
+      switch (this.mode) {
+        case 'selector':
+          return [getPickerData(this.range, this.rangeKey)]
+        case 'multiSelector':
+          return this.range.map((item) => {
+            return getPickerData(item, this.rangeKey)
+          })
+        case 'time':
+          return getTimePickerData()
+        case 'date':
+          return getDatePickerData(this.fields)
+        default:
+          return []
+      }
+    }
+  },
+  watch: {
+    pickerData () {
+      this.refresh()
+    },
+    value: {
+      handler () {
         let valueTemp = []
         switch (this.mode) {
           case 'selector':
-            value = this.selectedIndex[0]
+            this.selectedIndex = [this.value]
             break
           case 'multiSelector':
-            value = this.selectedIndex.slice()
+            this.selectedIndex = []
+            for (let i = 0; i < this.range.length; i++) {
+              this.selectedIndex[i] = this.value[i] || 0
+            }
             break
           case 'time':
-            for (let i = 0; i < this.selectedIndex.length; i++) {
-              valueTemp[i] = this.selectedIndex[i] < 10 ? `0${Number(this.selectedIndex[i])}` : `${this.selectedIndex[i]}`
+            this.selectedIndex = []
+            if (!this.value) {
+              valueTemp = [new Date().getHours(), new Date().getMinutes()]
+            } else {
+              valueTemp = this.value && this.value.split(':')
+            }
+            for (let i = 0; i < valueTemp.length; i++) {
+              this.selectedIndex[i] = valueTemp[i] || 0
             }
-            value = `${valueTemp[0]}:${valueTemp[1]}`
             break
           case 'date':
-            let year = this.pickerData[0][this.selectedIndex[0]].replace('年', '')
-            if (this.fields === 'year') {
-              value = `${year}`
-              break
+            this.selectedIndex = []
+            if (!this.value) {
+              valueTemp = [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]
+            } else {
+              valueTemp = this.value && this.value.split('-')
             }
-
-            let month = this.selectedIndex[1] < 9 ? `0${this.selectedIndex[1] + 1}` : this.selectedIndex[1] + 1
-            if (this.fields === 'month') {
-              value = `${year}-${month}`
-              break
+            let result = Object.keys(this.pickerData[0]).filter(item => startYear + Number(item) === Number(valueTemp[0]))
+            this.selectedIndex[0] = Number(result[0])
+            for (let i = 1; i < valueTemp.length; i++) {
+              this.selectedIndex[i] = valueTemp[i] - 1
             }
-
-            let day = this.selectedIndex[2] < 9 ? `0${this.selectedIndex[2] + 1}` : this.selectedIndex[2] + 1
-            value = `${year}-${month}-${day}`
             break
           default:
-            value = this.selectedIndex[0]
+            this.selectedIndex = [0]
         }
-        this.$emit('change', getCustomEvent('change', {value}, this))
-      },
-      _cancel () {
-        this.hide()
-        this.$emit('cancel', getCustomEvent('cancel', {}, this))
-      },
-      _isMoving () {
-        return this.wheels.some((wheel) => {
-          return wheel.pending
-        })
-      },
-      show () {
-        this.isShow = true
-        if (this.needRefresh) {
-          this.needRefresh = false
-          this.refresh()
-        }
-      },
-      hide () {
-        this.isShow = false
+        this.refresh()
       },
-      refresh () {
-        if (this.isShow) {
-          if (this.refreshing) return
-          this.refreshing = true
-          this.$nextTick(() => {
-            let i = 0
-            const wheelWrapper = this.$refs.wheelWrapper
-            for (; i < this.pickerData.length; i++) {
-              this.selectedIndex[i] = +this.selectedIndex[i] || 0
-              if (this.selectedIndex[i] >= this.pickerData[i].length) {
-                this.selectedIndex[i] = 0
+      immediate: true
+    }
+  },
+  mounted () {
+    this.wheels = []
+    this.refresh()
+    this.initRangeIndex()
+  },
+  beforeDestroy () {
+    this.wheels.forEach((wheel) => {
+      wheel.destroy()
+    })
+    this.wheels = []
+  },
+  methods: {
+    _confirm () {
+      if (this._isMoving()) {
+        return
+      }
+      this.hide()
+      let value = ''
+      let valueTemp = []
+      switch (this.mode) {
+        case 'selector':
+          value = this.selectedIndex[0]
+          break
+        case 'multiSelector':
+          value = this.selectedIndex.slice()
+          break
+        case 'time':
+          for (let i = 0; i < this.selectedIndex.length; i++) {
+            valueTemp[i] = this.selectedIndex[i] < 10 ? `0${Number(this.selectedIndex[i])}` : `${this.selectedIndex[i]}`
+          }
+          value = `${valueTemp[0]}:${valueTemp[1]}`
+          break
+        case 'date':
+          let year = this.pickerData[0][this.selectedIndex[0]].replace('年', '')
+          if (this.fields === 'year') {
+            value = `${year}`
+            break
+          }
+
+          let month = this.selectedIndex[1] < 9 ? `0${this.selectedIndex[1] + 1}` : this.selectedIndex[1] + 1
+          if (this.fields === 'month') {
+            value = `${year}-${month}`
+            break
+          }
+
+          let day = this.selectedIndex[2] < 9 ? `0${this.selectedIndex[2] + 1}` : this.selectedIndex[2] + 1
+          value = `${year}-${month}-${day}`
+          break
+        default:
+          value = this.selectedIndex[0]
+      }
+      this.$emit('change', getCustomEvent('change', { value }, this))
+    },
+    _cancel () {
+      this.hide()
+      this.$emit('cancel', getCustomEvent('cancel', {}, this))
+    },
+    _isMoving () {
+      return this.wheels.some((wheel) => {
+        return wheel.pending
+      })
+    },
+    show () {
+      this.isShow = true
+      if (this.needRefresh) {
+        this.needRefresh = false
+        this.refresh()
+      }
+    },
+    hide () {
+      this.isShow = false
+    },
+    refresh () {
+      if (this.isShow) {
+        if (this.refreshing) return
+        this.refreshing = true
+        this.$nextTick(() => {
+          let i = 0
+          const wheelWrapper = this.$refs.wheelWrapper
+          for (; i < this.pickerData.length; i++) {
+            this.selectedIndex[i] = +this.selectedIndex[i] || 0
+            if (this.selectedIndex[i] >= this.pickerData[i].length) {
+              this.selectedIndex[i] = 0
+            }
+            if (this.wheels[i]) {
+              this.wheels[i].refresh()
+              if (this.wheels[i].getSelectedIndex() !== this.selectedIndex[i]) {
+                this.wheels[i].wheelTo(this.selectedIndex[i])
+              }
+            } else {
+              this.wheels[i] = new BScroll(wheelWrapper.children[i], extend({
+                wheel: {
+                  selectedIndex: this.selectedIndex[i],
+                  wheelWrapperClass: 'wheel-scroll',
+                  wheelItemClass: 'wheel-item'
+                },
+                probeType: 3,
+                bindToWrapper: true
+              }, this.scrollOptions))
+              if (this.mode === 'time' || this.mode === 'date') {
+                this.wheels[i].on('scrollStart', function (i) {
+                  this.handleScrollStart()
+                }.bind(this, i))
               }
-              if (this.wheels[i]) {
-                this.wheels[i].refresh()
-                if (this.wheels[i].getSelectedIndex() !== this.selectedIndex[i]) {
-                  this.wheels[i].wheelTo(this.selectedIndex[i])
+              this.wheels[i].on('scrollEnd', function (i) {
+                if (this.refreshing) return
+                const currentIndex = this.wheels[i].getSelectedIndex()
+                if (this.selectedIndex[i] !== currentIndex) {
+                  this.selectedIndex[i] = currentIndex
+                  if (this.mode === 'multiSelector') {
+                    this.$emit('columnchange', getCustomEvent('columnchange', {
+                      column: i,
+                      value: currentIndex
+                    }, this))
+                  }
                 }
-              } else {
-                this.wheels[i] = new BScroll(wheelWrapper.children[i], {
-                  wheel: {
-                    selectedIndex: this.selectedIndex[i],
-                    wheelWrapperClass: 'wheel-scroll',
-                    wheelItemClass: 'wheel-item'
-                  },
-                  probeType: 3,
-                  bindToWrapper: true,
-                  ...this.scrollOptions
-                })
                 if (this.mode === 'time' || this.mode === 'date') {
-                  this.wheels[i].on('scrollStart', function (i) {
-                    this.handleScrollStart()
-                  }.bind(this, i))
+                  this.handleScrollEnd()
                 }
-                this.wheels[i].on('scrollEnd', function (i) {
-                  if (this.refreshing) return
-                  const currentIndex = this.wheels[i].getSelectedIndex()
-                  if (this.selectedIndex[i] !== currentIndex) {
-                    this.selectedIndex[i] = currentIndex
-                    if (this.mode === 'multiSelector') {
-                      this.$emit('columnchange', getCustomEvent('columnchange', {
-                        column: i,
-                        value: currentIndex
-                      }, this))
-                    }
-                  }
-                  if (this.mode === 'time' || this.mode === 'date') {
-                    this.handleScrollEnd()
-                  }
-                }.bind(this, i))
-              }
+              }.bind(this, i))
             }
-            if (this.mode === 'time' || this.mode === 'date') {
-              this.initWheelPosition()
-            }
-            for (; i < this.wheels.length; i++) {
-              if (this.wheels[i]) {
-                this.wheels[i].destroy()
-              }
+          }
+          if (this.mode === 'time' || this.mode === 'date') {
+            this.initWheelPosition()
+          }
+          for (; i < this.wheels.length; i++) {
+            if (this.wheels[i]) {
+              this.wheels[i].destroy()
             }
-            this.wheels.length = this.pickerData.length
-            this.selectedIndex.length = this.pickerData.length
-            this.refreshing = false
-          })
-        } else {
-          this.needRefresh = true
-        }
-      },
-      initRangeIndex () {
-        if (this.mode !== 'time' && this.mode !== 'date') {
-          return
-        }
+          }
+          this.wheels.length = this.pickerData.length
+          this.selectedIndex.length = this.pickerData.length
+          this.refreshing = false
+        })
+      } else {
+        this.needRefresh = true
+      }
+    },
+    initRangeIndex () {
+      if (this.mode !== 'time' && this.mode !== 'date') {
+        return
+      }
+
+      this.itemHeight = window.getComputedStyle(document.getElementsByClassName('wheel-item')[0]).height.replace(/px/g, '')
+      if (this.mode === 'time') {
+        this.startIndex = [this.getIndex('start', 0, ':'), this.getIndex('start', 1, ':')]
+        this.endIndex = [this.getIndex('end', 0, ':'), this.getIndex('end', 1, ':')]
+      }
+      if (this.mode === 'date') {
+        this.startIndex = [this.getIndex('start', 0, '-') - startYear, this.getIndex('start', 1, '-') - 1, this.getIndex('start', 2, '-') - 1]
+        this.endIndex = [this.getIndex('end', 0, '-') - startYear, this.getIndex('end', 1, '-') - 1, this.getIndex('end', 2, '-') - 1]
+      }
+    },
+    getIndex (type, i, delimiter) {
+      return this[type] && Number(this[type].split(delimiter)[i])
+    },
+    handleScrollStart () {
+      // 重置可滚动距离
+      for (let i = 0; i < this.wheels.length; i++) {
+        this.wheels[i].minScrollY = 0
+        this.wheels[i].maxScrollY = -(modeOptions[this.mode][i] * this.itemHeight)
+      }
+      //开始滚动 判断最多可滚动距离
+      if (this.start) {
+        this.wheels[0].minScrollY = -(this.startIndex[0] * this.itemHeight)
 
-        this.itemHeight = window.getComputedStyle(document.getElementsByClassName('wheel-item')[0]).height.replace(/px/g, '')
-        if (this.mode === 'time') {
-          this.startIndex = [this.getIndex('start', 0, ':'), this.getIndex('start', 1, ':')]
-          this.endIndex = [this.getIndex('end', 0, ':'), this.getIndex('end', 1, ':')]
-        }
-        if (this.mode === 'date') {
-          this.startIndex = [this.getIndex('start', 0, '-') - startYear, this.getIndex('start', 1, '-') - 1, this.getIndex('start', 2, '-') - 1]
-          this.endIndex = [this.getIndex('end', 0, '-') - startYear, this.getIndex('end', 1, '-') - 1, this.getIndex('end', 2, '-') - 1]
-        }
-      },
-      getIndex (type, i, delimiter) {
-        return this[type] && Number(this[type].split(delimiter)[i])
-      },
-      handleScrollStart () {
-        // 重置可滚动距离
         for (let i = 0; i < this.wheels.length; i++) {
-          this.wheels[i].minScrollY = 0
-          this.wheels[i].maxScrollY = -(modeOptions[this.mode][i] * this.itemHeight)
+          if (!(this.wheels[i + 1] && this.wheels[i].getSelectedIndex() === this.startIndex[i])) {
+            break
+          }
+          this.wheels[i + 1].minScrollY = -(this.startIndex[i + 1] * this.itemHeight)
+          this.wheels[i + 1].maxScrollY = -(modeOptions[this.mode][i + 1] * this.itemHeight)
         }
-        //开始滚动 判断最多可滚动距离
-        if (this.start) {
-          this.wheels[0].minScrollY = -(this.startIndex[0] * this.itemHeight)
+      }
+      if (this.end) {
+        this.wheels[0].maxScrollY = -(this.endIndex[0] * this.itemHeight)
 
-          for (let i = 0; i < this.wheels.length; i++) {
-            if (!(this.wheels[i + 1] && this.wheels[i].getSelectedIndex() === this.startIndex[i])) {
-              break
-            }
-            this.wheels[i + 1].minScrollY = -(this.startIndex[i + 1] * this.itemHeight)
+        for (let i = 0; i < this.wheels.length; i++) {
+          if (!(this.wheels[i + 1] && this.wheels[i].getSelectedIndex() === this.endIndex[i])) {
+            break
+          }
+          this.wheels[i + 1].minScrollY = 0
+          this.wheels[i + 1].maxScrollY = -(this.endIndex[i + 1] * this.itemHeight)
+        }
+      }
+    },
+    handleScrollEnd () {
+      const solarMonths = [1, 3, 5, 7, 8, 10, 12]
+      if (this.start) {
+        for (let i = 0; i < this.wheels.length; i++) {
+          if (!(this.wheels[i].getSelectedIndex() === this.startIndex[i]) || !(this.wheels[i + 1])) {
+            break
+          }
+          if (this.wheels[i + 1].getSelectedIndex() < this.startIndex[i + 1]) {
+            this.wheels[i + 1].minScrollY = 0
             this.wheels[i + 1].maxScrollY = -(modeOptions[this.mode][i + 1] * this.itemHeight)
+            this.wheels[i + 1].wheelTo([this.startIndex[i + 1]])
           }
         }
-        if (this.end) {
-          this.wheels[0].maxScrollY = -(this.endIndex[0] * this.itemHeight)
-
-          for (let i = 0; i < this.wheels.length; i++) {
-            if (!(this.wheels[i + 1] && this.wheels[i].getSelectedIndex() === this.endIndex[i])) {
-              break
-            }
+      }
+      if (this.end) {
+        for (let i = 0; i < this.wheels.length; i++) {
+          if (!(this.wheels[i].getSelectedIndex() === this.endIndex[i]) || !(this.wheels[i + 1])) {
+            break
+          }
+          if (this.wheels[i + 1].getSelectedIndex() > this.endIndex[i + 1]) {
             this.wheels[i + 1].minScrollY = 0
-            this.wheels[i + 1].maxScrollY = -(this.endIndex[i + 1] * this.itemHeight)
+            this.wheels[i + 1].maxScrollY = -(modeOptions[this.mode][i + 1] * this.itemHeight)
+            this.wheels[i + 1].wheelTo([this.endIndex[i + 1]])
           }
         }
-      },
-      handleScrollEnd () {
-        const solarMonths = [1, 3, 5, 7, 8, 10, 12]
-        if (this.start) {
+      }
+      // 单独处理小月30天，2月28天或29天情况
+      if (this.mode === 'date' && this.fields === 'day' && !solarMonths.includes(this.wheels[1].getSelectedIndex() + 1)) {
+        const currentYear = this.wheels[0].getSelectedIndex() + startYear
+        const isFebruary = this.wheels[1].getSelectedIndex() === 1
+        const isLeapYear = (currentYear % 4 === 0 && (currentYear % 100 !== 0)) || (currentYear % 400 === 0)
+        const day = isFebruary && (isLeapYear ? 28 : 27) || 29
+        this.wheels[2].getSelectedIndex() > day && this.wheels[2].wheelTo([0])
+      }
+
+    },
+    initWheelPosition () {
+      if (this.start) {
+        if (this.wheels[0].getSelectedIndex() < this.startIndex[0]) {
           for (let i = 0; i < this.wheels.length; i++) {
-            if (!(this.wheels[i].getSelectedIndex() === this.startIndex[i]) || !(this.wheels[i + 1])) {
-              break
-            }
-            if (this.wheels[i + 1].getSelectedIndex() < this.startIndex[i + 1]) {
-              this.wheels[i + 1].minScrollY = 0
-              this.wheels[i + 1].maxScrollY = -(modeOptions[this.mode][i+1] * this.itemHeight)
-              this.wheels[i + 1].wheelTo([this.startIndex[i + 1]])
-            }
+            this.wheels[i].wheelTo([this.startIndex[i]])
+            this.selectedIndex[i] = this.startIndex[i] || 0
           }
-        }
-        if (this.end) {
+        } else {
           for (let i = 0; i < this.wheels.length; i++) {
-            if (!(this.wheels[i].getSelectedIndex() === this.endIndex[i]) || !(this.wheels[i + 1])) {
+            if (this.wheels[i].getSelectedIndex() !== this.startIndex[i]) {
               break
             }
-            if (this.wheels[i + 1].getSelectedIndex() > this.endIndex[i + 1]) {
-              this.wheels[i + 1].minScrollY = 0
-              this.wheels[i + 1].maxScrollY = -(modeOptions[this.mode][i+1] * this.itemHeight)
-              this.wheels[i + 1].wheelTo([this.endIndex[i + 1]])
-            }
-          }
-        }
-        // 单独处理小月30天，2月28天或29天情况
-        if (this.mode === 'date' && this.fields === 'day' && !solarMonths.includes(this.wheels[1].getSelectedIndex() + 1)) {
-          const currentYear = this.wheels[0].getSelectedIndex() + startYear
-          const isFebruary = this.wheels[1].getSelectedIndex() === 1
-          const isLeapYear = (currentYear % 4 === 0 && (currentYear % 100 !== 0)) || (currentYear % 400 === 0)
-          const day = isFebruary && (isLeapYear ? 28 : 27) || 29
-          this.wheels[2].getSelectedIndex() > day && this.wheels[2].wheelTo([0])
-        }
-
-      },
-      initWheelPosition () {
-        if (this.start) {
-          if (this.wheels[0].getSelectedIndex() < this.startIndex[0]) {
-            for (let i = 0; i < this.wheels.length; i++) {
-              this.wheels[i].wheelTo([this.startIndex[i]])
-              this.selectedIndex[i] = this.startIndex[i] || 0
-            }
-          } else {
-            for (let i = 0; i < this.wheels.length; i++) {
-              if (this.wheels[i].getSelectedIndex() !== this.startIndex[i]) {
-                break
-              }
-              if (this.wheels[i+1] && this.wheels[i+1].getSelectedIndex() < this.startIndex[i+1]) {
-                for (let j = i+1; j < this.wheels.length; j++) {
-                  this.wheels[j].wheelTo([this.startIndex[j]])
-                  this.selectedIndex[j] = this.startIndex[j] || 0
-                }
+            if (this.wheels[i + 1] && this.wheels[i + 1].getSelectedIndex() < this.startIndex[i + 1]) {
+              for (let j = i + 1; j < this.wheels.length; j++) {
+                this.wheels[j].wheelTo([this.startIndex[j]])
+                this.selectedIndex[j] = this.startIndex[j] || 0
               }
             }
           }
         }
-        if (this.end) {
-          if (this.wheels[0].getSelectedIndex() > this.endIndex[0]) {
-            for (let i = 0; i < this.wheels.length; i++) {
-              this.wheels[i].wheelTo([this.endIndex[i]])
-              this.selectedIndex[i] = this.endIndex[i] || 0
+      }
+      if (this.end) {
+        if (this.wheels[0].getSelectedIndex() > this.endIndex[0]) {
+          for (let i = 0; i < this.wheels.length; i++) {
+            this.wheels[i].wheelTo([this.endIndex[i]])
+            this.selectedIndex[i] = this.endIndex[i] || 0
+          }
+        } else {
+          for (let i = 0; i < this.wheels.length; i++) {
+            if (this.wheels[i].getSelectedIndex() !== this.endIndex[i]) {
+              break
             }
-          } else {
-            for (let i = 0; i < this.wheels.length; i++) {
-              if (this.wheels[i].getSelectedIndex() !== this.endIndex[i]) {
-                break
-              }
-              if (this.wheels[i+1] && this.wheels[i+1].getSelectedIndex() > this.endIndex[i+1]) {
-                for (let j = i+1; j < this.wheels.length; j++) {
-                  this.wheels[j].wheelTo([this.endIndex[j]])
-                  this.selectedIndex[j] = this.endIndex[j] || 0
-                }
+            if (this.wheels[i + 1] && this.wheels[i + 1].getSelectedIndex() > this.endIndex[i + 1]) {
+              for (let j = i + 1; j < this.wheels.length; j++) {
+                this.wheels[j].wheelTo([this.endIndex[j]])
+                this.selectedIndex[j] = this.endIndex[j] || 0
               }
             }
           }
@@ -488,6 +484,7 @@
       }
     }
   }
+}
 </script>
 
 <style scoped lang="stylus" rel="stylesheet/stylus">
diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-web-view.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-web-view.vue
index ed83d5efd0..b3fecfa9b6 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-web-view.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-web-view.vue
@@ -3,184 +3,184 @@
 </template>
 
 <script>
-  import { getCustomEvent } from './getInnerListeners'
-  import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
-  const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab })
-  const eventLoad = 'load'
-  const eventError = 'error'
-  const eventMessage = 'message'
-  const mpx = global.__mpx
-  export default {
-    props: {
-      src: {
-        type: String
+import { getCustomEvent } from './getInnerListeners'
+import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
+import { extend } from '../../utils'
+const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab })
+const eventLoad = 'load'
+const eventError = 'error'
+const eventMessage = 'message'
+const mpx = global.__mpx
+export default {
+  props: {
+    src: {
+      type: String
+    }
+  },
+  computed: {
+    host () {
+      let host = this.src.split('/')
+      if (host[2]) {
+        host = host[0] + '//' + host[2]
+      } else {
+        host = ''
       }
+      return host
     },
-    computed: {
-      host () {
-        let host = this.src.split('/')
-        if (host[2]) {
-          host = host[0] + '//' + host[2]
-        } else {
-          host = ''
-        }
-        return host
-      },
-      currentUrl () {
-        if (!this.src) return ''
-        const hostValidate = this.hostValidate(this.host)
-        if (!hostValidate) {
-          console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单')
-          return ''
-        }
-        let src
-        const srcQueryIndex = this.src.indexOf('?')
-        // webview与被打开页面通过_uid确定关联关系
-        if (srcQueryIndex > -1) {
-          src = `${this.src.substring(0, srcQueryIndex + 1)}mpx_webview_id=${this._uid}&${this.src.substring(srcQueryIndex + 1)}`
-        } else {
-          src = `${this.src}?mpx_webview_id=${this._uid}`
-        }
-        return src
-      },
-      loadData () {
-        return {
-          src: this.host,
-          fullUrl: this.src
-        }
+    currentUrl () {
+      if (!this.src) return ''
+      const hostValidate = this.hostValidate(this.host)
+      if (!hostValidate) {
+        console.error('访问页面域名不符合domainWhiteLists白名单配置，请确认是否正确配置该域名白名单')
+        return ''
       }
-    },
-    watch: {
-      currentUrl: {
-        handler (value) {
-          if (!value) {
-            this.$emit(eventError, getCustomEvent(eventError, {
-              ...this.loadData,
-              errMsg: 'web-view load failed due to not in domain list'
-            }, this))
-          } else {
-            this.$nextTick(() => {
-              if (this.$refs.mpxIframe && this.mpxIframe != this.$refs.mpxIframe) {
-                this.mpxIframe = this.$refs.mpxIframe
-                this.mpxIframe.addEventListener('load', (event) => {
-                  this.$emit(eventLoad, getCustomEvent(eventLoad, this.loadData, this))
-                })
-              }
-            })
-          }
-        },
-        immediate: true
+      let src
+      const srcQueryIndex = this.src.indexOf('?')
+      // webview与被打开页面通过_uid确定关联关系
+      if (srcQueryIndex > -1) {
+        src = `${this.src.substring(0, srcQueryIndex + 1)}mpx_webview_id=${this._uid}&${this.src.substring(srcQueryIndex + 1)}`
+      } else {
+        src = `${this.src}?mpx_webview_id=${this._uid}`
       }
+      return src
     },
-    beforeCreate () {
-      this.messageList = []
-    },
-    mounted () {
-      window.addEventListener('message', this.messageCallback)
-    },
-    deactivated () {
-      if (!this.messageList.length) {
-        return
+    loadData () {
+      return {
+        src: this.host,
+        fullUrl: this.src
       }
-      let data = {
-        type: 'message',
-        data: this.messageList
+    }
+  },
+  watch: {
+    currentUrl: {
+      handler (value) {
+        if (!value) {
+          this.$emit(eventError, getCustomEvent(eventError, extend({
+            errMsg: 'web-view load failed due to not in domain list'
+          }, this.loadData), this))
+        } else {
+          this.$nextTick(() => {
+            if (this.$refs.mpxIframe && this.mpxIframe != this.$refs.mpxIframe) {
+              this.mpxIframe = this.$refs.mpxIframe
+              this.mpxIframe.addEventListener('load', () => {
+                this.$emit(eventLoad, getCustomEvent(eventLoad, this.loadData, this))
+              })
+            }
+          })
+        }
+      },
+      immediate: true
+    }
+  },
+  beforeCreate () {
+    this.messageList = []
+  },
+  mounted () {
+    window.addEventListener('message', this.messageCallback)
+  },
+  deactivated () {
+    if (!this.messageList.length) {
+      return
+    }
+    let data = {
+      type: 'message',
+      data: this.messageList
+    }
+    this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+  },
+  destroyed () {
+    window.removeEventListener('message', this.messageCallback)
+    if (!this.messageList.length) {
+      return
+    }
+    let data = {
+      type: 'message',
+      data: this.messageList
+    }
+    this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+  },
+  methods: {
+    messageCallback (event) {
+      const hostValidate = this.hostValidate(event.origin)
+      const data = event.data
+      // 判断number类型，防止undefined导致触发return逻辑
+      if (data.clientUid !== undefined && +data.clientUid !== this._uid) {
+        return
       }
-      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
-    },
-    destroyed () {
-      window.removeEventListener('message', this.messageCallback)
-      if (!this.messageList.length) {
+      let value = data.payload
+      if (!hostValidate) {
         return
       }
-      let data = {
-        type: 'message',
-        data: this.messageList
+      let asyncCallback = null
+      switch (data.type) {
+        case 'postMessage':
+          this.messageList.push(value.data || value)
+          asyncCallback = Promise.resolve({
+            errMsg: 'invokeWebappApi:ok'
+          })
+          break
+        case 'navigateTo':
+          asyncCallback = navObj.navigateTo(value)
+          break
+        case 'navigateBack':
+          asyncCallback = navObj.navigateBack(value)
+          break
+        case 'redirectTo':
+          asyncCallback = navObj.redirectTo(value)
+          break
+        case 'switchTab':
+          asyncCallback = navObj.switchTab(value)
+          break
+        case 'reLaunch':
+          asyncCallback = navObj.reLaunch(value)
+          break
+        case 'getLocation':
+          const getLocation = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations.getLocation
+          if (getLocation) {
+            asyncCallback = getLocation()
+          } else {
+            asyncCallback = Promise.reject({
+              errMsg: '未在apiImplementations中配置getLocation方法'
+            })
+          }
+          break
       }
-      this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
+      asyncCallback && asyncCallback.then((res) => {
+        this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
+          type: data.type,
+          callbackId: data.callbackId,
+          result: res
+        }, event.origin)
+      }).catch((error) => {
+        this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
+          type: data.type,
+          callbackId: data.callbackId,
+          error
+        }, event.origin)
+      })
     },
-    methods: {
-      messageCallback (event) {
-        const hostValidate = this.hostValidate(event.origin)
-        const data = event.data
-        // 判断number类型，防止undefined导致触发return逻辑
-        if (data.clientUid !== undefined && +data.clientUid !== this._uid) {
-          return
-        }
-        let value = data.payload
-        if (!hostValidate) {
-          return
-        }
-        let asyncCallback = null
-        switch (data.type) {
-          case 'postMessage':
-            this.messageList.push(value.data || value)
-            asyncCallback = Promise.resolve({
-              errMsg: 'invokeWebappApi:ok'
-            })
-            break
-          case 'navigateTo':
-            asyncCallback = navObj.navigateTo(value)
-            break
-          case 'navigateBack':
-            asyncCallback = navObj.navigateBack(value)
-            break
-          case 'redirectTo':
-            asyncCallback = navObj.redirectTo(value)
-            break
-          case 'switchTab':
-            asyncCallback = navObj.switchTab(value)
-            break
-          case 'reLaunch':
-            asyncCallback = navObj.reLaunch(value)
-            break
-          case 'getLocation':
-            const getLocation = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations.getLocation
-            if (getLocation) {
-              asyncCallback = getLocation()
-            } else {
-              asyncCallback = Promise.reject({
-                errMsg: '未在apiImplementations中配置getLocation方法'
-              })
-            }
-            break
-        }
-        asyncCallback && asyncCallback.then((res) => {
-          this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
-            type: data.type,
-            callbackId: data.callbackId,
-            result: res
-          }, event.origin)
-        }).catch((error) => {
-          this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
-            type: data.type,
-            callbackId: data.callbackId,
-            error
-          }, event.origin)
+    hostValidate (host) {
+      const hostWhitelists = mpx.config.webviewConfig && mpx.config.webviewConfig.hostWhitelists || []
+      if (hostWhitelists.length) {
+        return hostWhitelists.some((item) => {
+          return host.endsWith(item)
         })
-      },
-      hostValidate (host) {
-        const hostWhitelists = mpx.config.webviewConfig && mpx.config.webviewConfig.hostWhitelists || []
-        if (hostWhitelists.length) {
-          return hostWhitelists.some((item) => {
-            return host.endsWith(item)
-          })
-        } else {
-          return true
-        }
+      } else {
+        return true
       }
     }
   }
+}
 </script>
 
 <style>
-  .mpx-iframe {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-  }
+.mpx-iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
 </style>
diff --git a/packages/webpack-plugin/lib/runtime/optionProcessor.js b/packages/webpack-plugin/lib/runtime/optionProcessor.js
index 3186ef38df..b1949f04cc 100644
--- a/packages/webpack-plugin/lib/runtime/optionProcessor.js
+++ b/packages/webpack-plugin/lib/runtime/optionProcessor.js
@@ -1,4 +1,4 @@
-import { hasOwn, isEmptyObject } from './utils'
+import { hasOwn, isEmptyObject, extend } from './utils'
 import { isBrowser } from './env'
 import transRpxStyle from './transRpxStyle'
 import animation from './animation'
@@ -59,7 +59,7 @@ registered in parent context!`)
   }
 
   if (ctorType === 'page') {
-    option.__mpxPageConfig = Object.assign({}, global.__mpxPageConfig, pageConfig)
+    option.__mpxPageConfig = extend({}, global.__mpxPageConfig, pageConfig)
   }
 
   if (!hasApp) {
@@ -109,7 +109,7 @@ registered in parent context!`)
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
   // eslint-disable-next-line
-  if (extendOptions) Object.assign(component, extendOptions)
+  if (extendOptions) extend(component, extendOptions)
   return component
 }
 
@@ -164,10 +164,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
       })
     }
     const webRouteConfig = global.__mpx.config.webConfig.routeConfig || global.__mpx.config.webRouteConfig
-    global.__mpxRouter = option.router = new VueRouter({
-      ...webRouteConfig,
-      routes: routes
-    })
+    global.__mpxRouter = option.router = new VueRouter(extend({ routes }, webRouteConfig))
     let mpxStackPath = []
     if (isBrowser) {
       // 解决webview被刷新导致路由栈丢失后产生错乱问题
@@ -365,7 +362,7 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
 
   if (App.onAppInit) {
     global.__mpxAppInit = true
-    Object.assign(option, App.onAppInit() || {})
+    extend(option, App.onAppInit() || {})
     global.__mpxAppInit = false
   }
 
@@ -374,14 +371,8 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
     option.pinia = global.__mpxPinia
   }
 
-  const app = new Vue({
-    ...option,
-    render: (h) => h(App)
-  })
-  return {
-    app,
-    ...option
-  }
+  const app = new Vue(extend(option, { render: (h) => h(App) }))
+  return extend({ app }, option)
 }
 
 export function processAppOption ({ firstPage, pagesMap, componentsMap, App, Vue, VueRouter, tabBarMap, el }) {
diff --git a/packages/webpack-plugin/lib/runtime/utils.js b/packages/webpack-plugin/lib/runtime/utils.js
index ab77f13bdf..fccb46f6ed 100644
--- a/packages/webpack-plugin/lib/runtime/utils.js
+++ b/packages/webpack-plugin/lib/runtime/utils.js
@@ -45,3 +45,5 @@ const hasOwnProperty = Object.prototype.hasOwnProperty
 export function hasOwn (obj, key) {
   return hasOwnProperty.call(obj, key)
 }
+
+export const extend = Object.assign
diff --git a/packages/webview-bridge/src/index.js b/packages/webview-bridge/src/index.js
index a3b9fd6ce6..4954ef0478 100644
--- a/packages/webview-bridge/src/index.js
+++ b/packages/webview-bridge/src/index.js
@@ -1,6 +1,6 @@
 import loadScript from './loadscript'
 let sdkReady
-const SDK_URL_MAP = {
+const SDK_URL_MAP = Object.assign({
   wx: {
     url: 'https://res.wx.qq.com/open/js/jweixin-1.3.2.js'
   },
@@ -15,9 +15,8 @@ const SDK_URL_MAP = {
   },
   tt: {
     url: 'https://lf3-cdn-tos.bytegoofy.com/obj/goofy/developer/jssdk/jssdk-1.2.1.js'
-  },
-  ...window.sdkUrlMap
-}
+  }
+}, window.sdkUrlMap)
 function getMpxWebViewId () {
   const href = location.href
   const reg = /mpx_webview_id=(\d+)/g