@mpxjs/api-proxy 2.8.40-test.1 → 2.8.40-test.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/api-proxy",
-  "version": "2.8.40-test.1",
+  "version": "2.8.40-test.2",
   "description": "convert miniprogram API at each end",
   "module": "src/index.js",
   "types": "@types/index.d.ts",
@@ -31,7 +31,7 @@
     "promise"
   ],
   "author": "httpsxiao",
-  "license": "ISC",
+  "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/didi/mpx/issues"
   },
@@ -39,5 +39,5 @@
   "dependencies": {
     "axios": "^0.21.1"
   },
-  "gitHead": "e636ed32cfc88787493c67c8bc27fd3af55f6f22"
+  "gitHead": "7b1911025a2eb47eddc046775f17b6f1405fdd54"
 }

package/src/common/js/utils.js

@@ -129,6 +129,9 @@ function makeMap (arr) {
 
 const isBrowser = typeof window !== 'undefined'
 
+function throwSSRWarning (info) {
+  console.error(`[Mpx runtime error]: Dangerous API! ${info}, It may cause some problems, please use this method with caution`)
+}
 export {
   changeOpts,
   handleSuccess,
@@ -141,5 +144,6 @@ export {
   noop,
   makeMap,
   isBrowser,
-  hasOwn
+  hasOwn,
+  throwSSRWarning
 }

package/src/common/js/web.js

@@ -26,13 +26,46 @@ function isTabBarPage (url, router) {
 function createDom (tag, attrs = {}, children = []) {
   const dom = document.createElement(tag)
   Object.keys(attrs).forEach(k => dom.setAttribute(k, attrs[k]))
-  children.length && children.forEach(child => dom.appendChild(child))
+  children.length && children.forEach(child => dom.appendChild(typeof child === 'string' ? document.createTextNode(child) : child))
   return dom
 }
 
+// 在H5中，直接绑定 click 可能出现延时问题，很多点击可以关闭的组件被唤出之后，有概率立马触发点击事件，导致组件被关闭。
+// 使用该方法通过 touchstart 和 touchend 模拟 click 事件，解决延时问题。
+function bindTap (dom, handler) {
+  let startTime = 0; let x = 0; let y = 0
+  const touchStart = (e) => {
+    startTime = Date.now()
+    x = e.touches[0].pageX
+    y = e.touches[0].pageY
+  }
+  const touchEnd = (e) => {
+    if (Date.now() - startTime < 300 && Math.abs(e.changedTouches[0].pageX - x) < 10 && Math.abs(e.changedTouches[0].pageY - y) < 10) {
+      handler(e)
+    }
+  }
+  dom.addEventListener('touchstart', touchStart)
+  dom.addEventListener('touchend', touchEnd)
+  return () => {
+    dom.removeEventListener('touchstart', touchStart)
+    dom.removeEventListener('touchend', touchEnd)
+  }
+}
+
+/**
+ * 获取弹窗应当挂载的根节点
+ * @returns dom
+ */
+function getRootElement () {
+  const page = getCurrentPages().slice(-1)[0]?.$el
+  return page || document.body
+}
+
 export {
   webHandleSuccess,
   webHandleFail,
   createDom,
+  bindTap,
+  getRootElement,
   isTabBarPage
 }

package/src/common/stylus/Preview.styl

@@ -9,12 +9,14 @@
   z-index 1000
   .__mpx_preview_tip__
     position absolute
-    top 0
+    top 7px
     left 50%
     transform translateX(-50%)
-    color white
-    font-size 48px
-    letter-spacing 0.3em
+    color #fff
+    font-size 18px
+    letter-spacing .3em
+    text-align center
+    width 100%
   .__mpx_preview_images__
     display flex
     width 100%

package/src/platform/api/action-sheet/ActionSheet.js

@@ -1,8 +1,9 @@
-import { webHandleSuccess, webHandleFail } from '../../../common/js'
+import { webHandleSuccess, webHandleFail, createDom, bindTap, getRootElement } from '../../../common/js'
 import '../../../common/stylus/ActionSheet.styl'
 
 export default class ActionSheet {
   constructor () {
+    // super()
     this.defaultOpts = {
       itemList: [],
       itemColor: '#000000',
@@ -11,37 +12,20 @@ export default class ActionSheet {
       complete: null
     }
     this.hideTimer = null
-
-    const actionSheet = document.createElement('div')
-    actionSheet.setAttribute('class', '__mpx_actionsheet__')
-
-    const mask = document.createElement('div')
-    mask.setAttribute('class', '__mpx_mask__')
-
-    const box = document.createElement('div')
-    box.setAttribute('class', '__mpx_actionsheet_box__')
-
-    const list = document.createElement('div')
-    list.setAttribute('class', '__mpx_actionsheet_list__')
-
-    const cancelBtn = document.createElement('div')
-    cancelBtn.setAttribute('class', '__mpx_actionsheet_cancel__')
-    cancelBtn.textContent = '取消'
-
-    box.appendChild(list)
-    box.appendChild(cancelBtn)
-    actionSheet.appendChild(mask)
-    actionSheet.appendChild(box)
-    document.body.appendChild(actionSheet)
-
-    this.actionSheet = actionSheet
-    this.mask = mask
-    this.box = box
-    this.list = list
-    this.cancelBtn = cancelBtn
+    // 临时绑定事件的解绑方法数组，用于在 hide 时解绑
+    this.tempListeners = []
+
+    this.actionSheet = createDom('div', { class: '__mpx_actionsheet__' }, [
+      this.mask = createDom('div', { class: '__mpx_mask__' }),
+      this.box = createDom('div', { class: '__mpx_actionsheet_box__' }, [
+        this.list = createDom('div', { class: '__mpx_actionsheet_list__' }),
+        this.cancelBtn = createDom('div', { class: '__mpx_actionsheet_cancel__' }, ['取消'])
+      ])
+    ])
   }
 
   show (options) {
+    getRootElement().appendChild(this.actionSheet) // show 则挂载
     if (this.hideTimer) {
       clearTimeout(this.hideTimer)
       this.hideTimer = null
@@ -49,21 +33,20 @@ export default class ActionSheet {
 
     const opts = Object.assign({}, this.defaultOpts, options)
 
-    const list = document.createElement('div')
-    list.setAttribute('class', '__mpx_actionsheet_list__')
+    const list = createDom('div', { class: '__mpx_actionsheet_list__' })
 
+    // todo 使用事件代理
     opts.itemList.forEach((item, index) => {
-      const sheet = document.createElement('div')
-      sheet.setAttribute('class', '__mpx_actionsheet_sheet__')
-      sheet.textContent = item
-      sheet.onclick = () => {
+      const sheet = createDom('div', { class: '__mpx_actionsheet_sheet__' }, [item])
+      this.tempListeners.push(bindTap(sheet, () => {
         this.hide()
         const res = {
           errMsg: 'showActionSheet:ok',
           tapIndex: index
         }
         webHandleSuccess(res, opts.success, opts.complete)
-      }
+        // this.toPromiseResolve(res)
+      }))
       list.appendChild(sheet)
     })
 
@@ -71,14 +54,20 @@ export default class ActionSheet {
     this.list = list
     this.list.style.color = opts.itemColor
 
-    this.cancelBtn.onclick = () => {
+    this.tempListeners.push(bindTap(this.cancelBtn, () => {
       this.hide()
       const err = { errMsg: 'showActionSheet:fail cancel' }
       webHandleFail(err, opts.fail, opts.complete)
-    }
-
-    this.box.classList.add('show')
+      // !opts.fail && this.toPromiseReject(err)
+    }))
+    // make transition next frame
     this.actionSheet.classList.add('show')
+    // 如果使用 requestAnimationFrame，第一次展示不会有动画效果，原因待确认，这里先使用 setTimeout
+    setTimeout(() => {
+      this.box.classList.add('show')
+    }, 17)
+
+    // return this.toPromiseInitPromise()
   }
 
   hide () {
@@ -86,10 +75,12 @@ export default class ActionSheet {
       clearTimeout(this.hideTimer)
       this.hideTimer = null
     }
-
+    this.tempListeners.forEach(unbind => unbind())
+    this.tempListeners = []
+    this.box.classList.remove('show')
     this.hideTimer = setTimeout(() => {
-      this.box.classList.remove('show')
       this.actionSheet.classList.remove('show')
-    }, 0)
+      this.actionSheet.remove() // hide 则卸载
+    }, 300) // animation duration is 300ms
   }
 }

package/src/platform/api/action-sheet/index.web.js

@@ -1,8 +1,13 @@
 import ActionSheet from './ActionSheet'
+import { isBrowser, throwSSRWarning } from '../../../common/js'
 
 let actionSheet = null
 
 function showActionSheet (options = { itemList: [] }) {
+  if (!isBrowser) {
+    throwSSRWarning('showActionSheet API is running in non browser environments')
+    return
+  }
   if (!actionSheet) { actionSheet = new ActionSheet() }
   return actionSheet.show(options)
 }

package/src/platform/api/animation/animation.js

@@ -1,3 +1,5 @@
+import { isBrowser, throwSSRWarning } from '../../../common/js'
+
 class Animation {
   constructor (options) {
     this._actions = []
@@ -5,11 +7,15 @@ class Animation {
     this._options = options
   }
 
-  _processSize (size) {
+  _processSize (size, type) {
     if (typeof size === 'number') {
       return `${size}px`
     } else {
       if (size.indexOf('rpx') !== -1) {
+        if (!isBrowser) {
+          throwSSRWarning(`Animation's ${type} API cannot use rpx in non browser environments`)
+          return
+        }
         // 计算rpx折算回px
         const rs = parseInt(size, 10)
         const width = window.screen.width
@@ -29,7 +35,7 @@ class Animation {
       case 'bottom':
       case 'width':
       case 'height':
-        value = this._processSize(value)
+        value = this._processSize(value, type)
         this._propMaps[type] = {
           args: [type, value],
           type: 'style'

package/src/platform/api/app/index.web.js

@@ -1,3 +1,4 @@
+import { isBrowser } from '../../../common/js'
 global.__mpxAppCbs = global.__mpxAppCbs || {
   show: [],
   hide: [],
@@ -6,7 +7,9 @@ global.__mpxAppCbs = global.__mpxAppCbs || {
 }
 
 function onError (callback) {
-  global.__mpxAppCbs.error.push(callback)
+  if (isBrowser) {
+    global.__mpxAppCbs.error.push(callback)
+  }
 }
 
 function offError (callback) {
@@ -16,7 +19,9 @@ function offError (callback) {
 }
 
 function onAppShow (callback) {
-  global.__mpxAppCbs.show.push(callback)
+  if (isBrowser) {
+    global.__mpxAppCbs.show.push(callback)
+  }
 }
 
 function offAppShow (callback) {
@@ -26,7 +31,9 @@ function offAppShow (callback) {
 }
 
 function onAppHide (callback) {
-  global.__mpxAppCbs.hide.push(callback)
+  if (isBrowser) {
+    global.__mpxAppCbs.hide.push(callback)
+  }
 }
 
 function offAppHide (callback) {

package/src/platform/api/audio/index.web.js

@@ -1,4 +1,9 @@
+import { isBrowser, throwSSRWarning } from '../../../common/js'
 export const createInnerAudioContext = () => {
+  if (!isBrowser) {
+    throwSSRWarning('createInnerAudioContext API is running in non browser environments')
+    return
+  }
   // eslint-disable-next-line no-undef
   const audio = new Audio()
   const __audio = {}

package/src/platform/api/create-intersection-observer/index.web.js

@@ -1,6 +1,11 @@
 import WebIntersectionObserver from './IntersectionObserver'
+import { isBrowser, throwSSRWarning } from '../../../common/js'
 
 function createIntersectionObserver (component, options) {
+  if (!isBrowser) {
+    throwSSRWarning('createIntersectionObserver API is running in non browser environments')
+    return
+  }
   return new WebIntersectionObserver(component, options)
 }
 

package/src/platform/api/create-selector-query/index.web.js

@@ -1,6 +1,11 @@
 import SelectQuery from './SelectQuery'
+import { isBrowser, throwSSRWarning } from '../../../common/js'
 
 function createSelectorQuery () {
+  if (!isBrowser) {
+    throwSSRWarning('createSelectorQuery API is running in non browser environments')
+    return
+  }
   return new SelectQuery()
 }
 

package/src/platform/api/device/network/getNetworkType.js

@@ -1,11 +1,15 @@
-import { webHandleSuccess, webHandleFail } from '../../../../common/js'
+import { webHandleSuccess, webHandleFail, isBrowser, throwSSRWarning } from '../../../../common/js'
 
 export function getNetworkType ({ success, fail = () => {}, complete = () => {} }) {
+  if (!isBrowser) {
+    throwSSRWarning('getNetworkType API is running in non browser environments')
+    return
+  }
   try {
     if (navigator.connection) {
       webHandleSuccess({ networkType: navigator.connection.effectiveType }, success, complete)
     } else {
-      webHandleSuccess({ networkType: 'unknow' }, success, complete)
+      webHandleSuccess({ networkType: 'unknown' }, success, complete)
     }
   } catch (err) {
     webHandleFail(err, fail, complete)

package/src/platform/api/device/network/onNetworkStatusChange.js

@@ -1,4 +1,4 @@
-import { isBrowser } from '../../../../common/js/utils'
+import { isBrowser, throwSSRWarning } from '../../../../common/js/utils'
 const fnMap = new Map()
 
 const oldObserveList = new Set()
@@ -13,6 +13,10 @@ if (isBrowser) {
 }
 
 export function onNetworkStatusChange (callbackFn) {
+  if (!isBrowser) {
+    throwSSRWarning('onNetworkStatusChange API is running in non browser environments')
+    return
+  }
   if (navigator.connection) {
     const proxyCallback = evt => {
       const isConnected = navigator.onLine
@@ -29,6 +33,10 @@ export function onNetworkStatusChange (callbackFn) {
 }
 
 export function offNetworkStatusChange (callbackFn) {
+  if (!isBrowser) {
+    throwSSRWarning('offNetworkStatusChange API is running in non browser environments')
+    return
+  }
   if (navigator.connection) {
     navigator.connection.removeEventListener('change', fnMap.get(callbackFn))
   } else {

package/src/platform/api/image/Preview.js

@@ -1,4 +1,4 @@
-import { webHandleSuccess, webHandleFail, createDom, warn } from '../../../common/js'
+import { webHandleSuccess, webHandleFail, createDom, warn, bindTap, getRootElement } from '../../../common/js'
 import '../../../common/stylus/Preview.styl'
 /**
  * Preview class for displaying images in a slideshow format.
@@ -12,7 +12,6 @@ export default class Preview {
     this.preview = createDom('div', { class: '__mpx_preview__' }, [
       this.textTip = createDom('div', { class: '__mpx_preview_tip__' })
     ])
-    document.body.appendChild(this.preview)
     this.initEvent()
   }
 
@@ -41,9 +40,11 @@ export default class Preview {
       this.updateTextTip()
     })
     // click to close
-    this.preview.addEventListener('click', () => {
+    bindTap(this.preview, () => {
+      this.currentIndex = 0
       this.preview.style.display = 'none'
       this.preview.querySelector('.__mpx_preview_images__').remove()
+      this.preview.remove()
     })
   }
 
@@ -57,6 +58,7 @@ export default class Preview {
     Object.keys(options).forEach(key => !supported.includes(key) && warn(`previewImage: 暂不支持选项 ${key} ！`))
     const { urls, success, fail, complete } = options
     try {
+      getRootElement().appendChild(this.preview)
       this.preview.style.display = 'block'
       // create images with urls
       // append to preview

package/src/platform/api/modal/Modal.js

@@ -1,4 +1,4 @@
-import { webHandleSuccess } from '../../../common/js'
+import { createDom, getRootElement, webHandleSuccess } from '../../../common/js'
 import '../../../common/stylus/Modal.styl'
 // import { forEach } from '@didi/mpx-fetch/src/util'
 // 汉字为两个字符，字母/数字为一个字符
@@ -27,52 +27,24 @@ export default class Modal {
       fail: (...args) => {},
       complete: (...args) => {}
     }
-    this.hideTimer = null
-
-    const modal = document.createElement('div')
-    modal.setAttribute('class', '__mpx_modal__')
-
-    const mask = document.createElement('div')
-    mask.setAttribute('class', '__mpx_mask__')
-
-    const box = document.createElement('div')
-    box.setAttribute('class', '__mpx_modal_box__')
-
-    const title = document.createElement('div')
-    title.setAttribute('class', '__mpx_modal_title__')
 
-    const content = document.createElement('div')
-    content.setAttribute('class', '__mpx_modal_content__')
-
-    const btns = document.createElement('div')
-    btns.setAttribute('class', '__mpx_modal_btns__')
-
-    const cancelBtn = document.createElement('div')
-    cancelBtn.setAttribute('class', '__mpx_modal_cancel__')
-
-    const confirmBtn = document.createElement('div')
-    confirmBtn.setAttribute('class', '__mpx_modal_confirm__')
-
-    btns.appendChild(cancelBtn)
-    btns.appendChild(confirmBtn)
-    box.appendChild(title)
-    box.appendChild(content)
-    box.appendChild(btns)
-    modal.appendChild(mask)
-    modal.appendChild(box)
-    document.body.appendChild(modal)
+    this.hideTimer = null
 
-    this.modal = modal
-    this.mask = mask
-    this.box = box
-    this.title = title
-    this.content = content
-    this.btns = btns
-    this.cancelBtn = cancelBtn
-    this.confirmBtn = confirmBtn
+    this.modal = createDom('div', { class: '__mpx_modal__' }, [
+      this.mask = createDom('div', { class: '__mpx_mask__' }),
+      this.box = createDom('div', { class: '__mpx_modal_box__' }, [
+        this.title = createDom('div', { class: '__mpx_modal_title__' }),
+        this.content = createDom('div', { class: '__mpx_modal_content__' }),
+        this.btns = createDom('div', { class: '__mpx_modal_btns__' }, [
+          this.cancelBtn = createDom('div', { class: '__mpx_modal_cancel__' }),
+          this.confirmBtn = createDom('div', { class: '__mpx_modal_confirm__' })
+        ])
+      ])
+    ])
   }
 
   show (options = {}) {
+    getRootElement().appendChild(this.modal)
     if (options.confirmText && _getLength(options.confirmText) > 8) {
       // eslint-disable-next-line
       return Promise.reject({errMsg: 'showModal:fail confirmText length should not larger than 4 Chinese characters'})
@@ -131,6 +103,7 @@ export default class Modal {
 
     this.hideTimer = setTimeout(() => {
       this.modal.classList.remove('show')
+      this.modal.remove()
     }, 0)
   }
 }

package/src/platform/api/modal/index.web.js

@@ -1,8 +1,13 @@
 import Modal from './Modal'
+import { isBrowser, throwSSRWarning } from '../../../common/js'
 
 let modal = null
 
 function showModal (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('showModal API is running in non browser environments')
+    return
+  }
   if (!modal) { modal = new Modal() }
   return modal.show(options)
 }

package/src/platform/api/page-scroll-to/index.web.js

@@ -1,7 +1,11 @@
-import { webHandleSuccess, webHandleFail } from '../../../common/js'
+import { webHandleSuccess, webHandleFail, isBrowser, throwSSRWarning } from '../../../common/js'
 import { nextTick } from '../next-tick'
 
 export function pageScrollTo (options) {
+  if (!isBrowser) {
+    throwSSRWarning('pageScrollTo API is running in non browser environments')
+    return
+  }
   nextTick(() => {
     const ms = global.__ms
     const { success, fail, complete } = options

package/src/platform/api/pull-down/index.web.js

@@ -1,6 +1,10 @@
-import { webHandleSuccess, webHandleFail } from '../../../common/js'
+import { webHandleSuccess, webHandleFail, throwSSRWarning, isBrowser } from '../../../common/js'
 
 function stopPullDownRefresh (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('stopPullDownRefresh API is running in non browser environments')
+    return
+  }
   const router = global.__mpxRouter
   if (router) {
     let err
@@ -27,6 +31,10 @@ function stopPullDownRefresh (options = {}) {
 }
 
 function startPullDownRefresh (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('startPullDownRefresh API is running in non browser environments')
+    return
+  }
   const router = global.__mpxRouter
   if (router) {
     let err

package/src/platform/api/route/index.web.js

@@ -1,9 +1,13 @@
-import { webHandleSuccess, webHandleFail, isTabBarPage } from '../../../common/js'
+import { webHandleSuccess, webHandleFail, isTabBarPage, throwSSRWarning, isBrowser } from '../../../common/js'
 import { EventChannel } from '../event-channel'
 
 let routeCount = 0
 
 function redirectTo (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('redirectTo API is running in non browser environments')
+    return
+  }
   const router = global.__mpxRouter
   if (router) {
     if (isTabBarPage(options.url, router)) {
@@ -33,6 +37,10 @@ function redirectTo (options = {}) {
 }
 
 function navigateTo (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('navigateTo API is running in non browser environments')
+    return
+  }
   const router = global.__mpxRouter
   if (router) {
     if (isTabBarPage(options.url, router)) {
@@ -69,6 +77,10 @@ function navigateTo (options = {}) {
 }
 
 function navigateBack (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('navigateBack API is running in non browser environments')
+    return
+  }
   const router = global.__mpxRouter
   if (router) {
     let delta = options.delta || 1
@@ -87,6 +99,10 @@ function navigateBack (options = {}) {
 }
 
 function reLaunch (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('reLaunch API is running in non browser environments')
+    return
+  }
   const router = global.__mpxRouter
   if (router) {
     if (routeCount === 0 && router.currentRoute.query.routeCount) routeCount = router.currentRoute.query.routeCount
@@ -125,6 +141,10 @@ function reLaunch (options = {}) {
 }
 
 function switchTab (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('switchTab API is running in non browser environments')
+    return
+  }
   const router = global.__mpxRouter
   if (router) {
     const toRoute = router.match(options.url, router.history.current)

package/src/platform/api/set-navigation-bar/index.web.js

@@ -1,6 +1,10 @@
-import { webHandleSuccess } from '../../../common/js'
+import { isBrowser, throwSSRWarning, webHandleSuccess } from '../../../common/js'
 
 function setNavigationBarTitle (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('setNavigationBarTitle API is running in non browser environments')
+    return
+  }
   const { title, success, complete } = options
   if (document.title !== title) {
     document.title = title
@@ -10,6 +14,10 @@ function setNavigationBarTitle (options = {}) {
 }
 
 function setNavigationBarColor (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('setNavigationBarColor API is running in non browser environments')
+    return
+  }
   const { backgroundColor, success, complete } = options
   const meta = document.createElement('meta')
   meta.setAttribute('name', 'theme-color')

package/src/platform/api/socket/index.web.js

@@ -1,7 +1,11 @@
-import { warn, webHandleSuccess, webHandleFail } from '../../../common/js'
+import { warn, webHandleSuccess, webHandleFail, isBrowser, throwSSRWarning } from '../../../common/js'
 import SocketTask from './SocketTask'
 
 function connectSocket (options = { url: '' }) {
+  if (!isBrowser) {
+    throwSSRWarning('connectSocket API is running in non browser environments')
+    return
+  }
   const { url, protocols, success, fail, complete } = options
 
   try {

package/src/platform/api/storage/index.web.js

@@ -1,6 +1,10 @@
-import { webHandleSuccess, webHandleFail, hasOwn } from '../../../common/js'
+import { webHandleSuccess, webHandleFail, hasOwn, isBrowser, throwSSRWarning } from '../../../common/js'
 
 function setStorage (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('setStorage API is running in non browser environments')
+    return
+  }
   const { key, data, success, fail, complete } = options
 
   try {
@@ -15,6 +19,10 @@ function setStorage (options = {}) {
 }
 
 function setStorageSync (key = '', data) {
+  if (!isBrowser) {
+    throwSSRWarning('setStorageSync API is running in non browser environments')
+    return
+  }
   let obj = {}
 
   if (typeof data === 'symbol') {
@@ -26,6 +34,10 @@ function setStorageSync (key = '', data) {
 }
 
 function getStorage (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('getStorage API is running in non browser environments')
+    return
+  }
   const { key, success, fail, complete } = options
   const { result, data } = getItem(key)
 
@@ -39,6 +51,10 @@ function getStorage (options = {}) {
 }
 
 function getStorageSync (key) {
+  if (!isBrowser) {
+    throwSSRWarning('getStorageSync API is running in non browser environments')
+    return
+  }
   const res = getItem(key)
   if (res.result) return res.data
 
@@ -60,6 +76,10 @@ function getItem (key) {
 }
 
 function getStorageInfo (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('getStorageInfo API is running in non browser environments')
+    return
+  }
   const { success, fail, complete } = options
 
   try {
@@ -74,6 +94,10 @@ function getStorageInfo (options = {}) {
 }
 
 function getStorageInfoSync () {
+  if (!isBrowser) {
+    throwSSRWarning('getStorageInfoSync API is running in non browser environments')
+    return
+  }
   return {
     keys: Object.keys(window.localStorage),
     limitSize: null,
@@ -82,6 +106,10 @@ function getStorageInfoSync () {
 }
 
 function removeStorage (options = { key: '' }) {
+  if (!isBrowser) {
+    throwSSRWarning('removeStorage API is running in non browser environments')
+    return
+  }
   const { key, success, fail, complete } = options
 
   try {
@@ -96,10 +124,18 @@ function removeStorage (options = { key: '' }) {
 }
 
 function removeStorageSync (key) {
+  if (!isBrowser) {
+    throwSSRWarning('getStorageInfoSync API is running in non browser environments')
+    return
+  }
   window.localStorage.removeItem(key)
 }
 
 function clearStorage (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('clearStorage API is running in non browser environments')
+    return
+  }
   const { success, fail, complete } = options
 
   try {
@@ -114,6 +150,10 @@ function clearStorage (options = {}) {
 }
 
 function clearStorageSync () {
+  if (!isBrowser) {
+    throwSSRWarning('clearStorageSync API is running in non browser environments')
+    return
+  }
   window.localStorage.clear()
 }
 

package/src/platform/api/system/index.web.js

@@ -1,6 +1,10 @@
-import { webHandleSuccess } from '../../../common/js'
+import { isBrowser, throwSSRWarning, webHandleSuccess } from '../../../common/js'
 
 function getSystemInfoSync () {
+  if (!isBrowser) {
+    throwSSRWarning('getSystemInfoSync API is running in non browser environments')
+    return
+  }
   const ua = navigator.userAgent.split('(')[1].split(')')[0]
   const phones = new Map([
     ['iPhone', /iPhone|iPad|iPod|iOS/i],
@@ -66,6 +70,10 @@ function getSystemInfoSync () {
 }
 
 function getSystemInfo (options = {}) {
+  if (!isBrowser) {
+    throwSSRWarning('getSystemInfo API is running in non browser environments')
+    return
+  }
   const info = getSystemInfoSync()
   const res = Object.assign({ errMsg: 'getSystemInfo:ok' }, info)
   webHandleSuccess(res, options.success, options.complete)

package/src/platform/api/toast/Toast.js

@@ -1,4 +1,4 @@
-import { webHandleSuccess, createDom } from '../../../common/js'
+import { webHandleSuccess, createDom, getRootElement } from '../../../common/js'
 import '../../../common/stylus/Toast.styl'
 import '../../../common/stylus/Loading.styl'
 
@@ -30,11 +30,10 @@ export default class Toast {
     this.loading = createDom('div', { class: '__mpx_loading_wrapper__' }, Array.from({ length: 12 }, (_, i) => {
       return createDom('div', { class: `line${i + 1}` })
     }))
-
-    document.body.appendChild(this.toast)
   }
 
   show (options, type) {
+    getRootElement().appendChild(this.toast) // show 则挂载
     if (this.hideTimer) {
       clearTimeout(this.hideTimer)
       this.hideTimer = null
@@ -90,7 +89,10 @@ export default class Toast {
       clearTimeout(this.hideTimer)
       this.hideTimer = null
     }
-
-    this.hideTimer = setTimeout(() => { this.toast.classList.remove('show') }, duration)
+    this.hideTimer = setTimeout(() => {
+      this.toast.classList.remove('show')
+      this.toast.remove() // hide 则卸载
+    }, duration)
+    // return Promise.resolve({ errMsg }) todo 验证一下
   }
 }

package/src/platform/api/toast/index.web.js

@@ -1,8 +1,13 @@
 import Toast from './Toast'
+import { isBrowser, throwSSRWarning } from '../../../common/js'
 
 let toast = null
 
 function showToast (options = { title: '' }) {
+  if (!isBrowser) {
+    throwSSRWarning('showToast API is running in non browser environments')
+    return
+  }
   if (!toast) { toast = new Toast() }
   return toast.show(options, 'toast')
 }
@@ -13,6 +18,10 @@ function hideToast (options = {}) {
 }
 
 function showLoading (options = { title: '' }) {
+  if (!isBrowser) {
+    throwSSRWarning('showLoading API is running in non browser environments')
+    return
+  }
   if (!toast) { toast = new Toast() }
   return toast.show(Object.assign({
     icon: 'loading',

package/src/platform/api/video/index.web.js

@@ -1,5 +1,11 @@
+import { isBrowser, throwSSRWarning } from '../../../common/js'
+
 const allowPlaybackRate = [0.5, 0.8, 1.0, 1.25, 1.5, 2.0]
 export const createVideoContext = (id, context) => {
+  if (!isBrowser) {
+    throwSSRWarning('createVideoContext API is running in non browser environments')
+    return
+  }
   if (!id) {
     throw new Error('id为必传参数')
   }

package/src/web/api/index.js

@@ -1,68 +0,0 @@
-// base64ToArrayBuffer, arrayBufferToBase64
-export * from './base'
-
-// createSelectorQuery
-export * from './create-selector-query'
-
-// showActionSheet
-export * from './action-sheet'
-
-// showToast, hideToast, showLoading, hideLoading
-export * from './toast'
-
-// previewImage
-export * from './preview-image'
-
-// showModal
-export * from './modal'
-
-// setStorage, setStorageSync, getStorage, getStorageSync
-// getStorageInfo, getStorageInfoSync, removeStorage, removeStorageSync
-// clearStorage, clearStorageSync
-export * from './storage'
-
-// getSystemInfo, getSystemInfoSync
-export * from './system'
-
-// getNetworkType, onNetworkStatusChange, offNetworkStatusChange
-export * from './device/network'
-
-// request
-export * from './request'
-
-// redirectTo, navigateTo, navigateBack, reLaunch, switchTab
-export * from './route'
-
-// connectSocket, sendSocketMessage, closeSocket
-// onSocketOpen, onSocketError, onSocketMessage, onSocketClose
-export * from './socket'
-
-// setNavigationBarTitle setNavigationBarColor
-export * from './set-navigation-bar'
-
-// nextTick
-export * from './next-tick'
-
-// onWindowResize offWindowResize
-export * from './window'
-
-// stopPullDownRefresh startPullDownRefresh
-export * from './pull-down'
-
-// createInnerAudioContext
-export * from './audio'
-
-// createVideoContext
-export * from './video'
-
-export * from './page-scroll-to'
-
-export * from './tab-bar'
-
-export * from './app'
-
-// createAnimation
-export * from './animation'
-
-// createIntersectionObserver
-export * from './create-intersection-observer'