@mpxjs/api-proxy 2.9.0 → 2.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/api-proxy",
-  "version": "2.9.0",
+  "version": "2.9.6",
   "description": "convert miniprogram API at each end",
   "module": "src/index.js",
   "types": "@types/index.d.ts",
@@ -39,5 +39,5 @@
   "dependencies": {
     "axios": "^0.21.1"
   },
-  "gitHead": "91ac258dbf1d0a324a74cac606e2cc10ef557823"
+  "gitHead": "9034343edacc95da66b6e8ddb5c2f64a4be97231"
 }

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/web/api/action-sheet/ActionSheet.js

@@ -1,4 +1,4 @@
-import { ToPromise, webHandleSuccess, webHandleFail } from '../../../common/js'
+import { ToPromise, webHandleSuccess, webHandleFail, createDom, bindTap, getRootElement } from '../../../common/js'
 import '../../../common/stylus/ActionSheet.styl'
 
 export default class ActionSheet extends ToPromise {
@@ -12,37 +12,20 @@ export default class ActionSheet extends ToPromise {
       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
@@ -50,14 +33,12 @@ export default class ActionSheet extends ToPromise {
 
     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',
@@ -65,7 +46,7 @@ export default class ActionSheet extends ToPromise {
         }
         webHandleSuccess(res, opts.success, opts.complete)
         this.toPromiseResolve(res)
-      }
+      }))
       list.appendChild(sheet)
     })
 
@@ -73,15 +54,18 @@ export default class ActionSheet extends ToPromise {
     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)
       !opts.fail && this.toPromiseReject(err)
-    }
-
-    this.box.classList.add('show')
+    }))
+    // make transition next frame
     this.actionSheet.classList.add('show')
+    // 如果使用 requestAnimationFrame，第一次展示不会有动画效果，原因待确认，这里先使用 setTimeout
+    setTimeout(() => {
+      this.box.classList.add('show')
+    }, 17)
 
     return this.toPromiseInitPromise()
   }
@@ -91,10 +75,12 @@ export default class ActionSheet extends ToPromise {
       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/web/api/modal/Modal.js

@@ -1,4 +1,4 @@
-import { ToPromise, webHandleSuccess } from '../../../common/js'
+import { ToPromise, createDom, getRootElement, webHandleSuccess } from '../../../common/js'
 import '../../../common/stylus/Modal.styl'
 // import { forEach } from '@didi/mpx-fetch/src/util'
 // 汉字为两个字符，字母/数字为一个字符
@@ -28,52 +28,24 @@ export default class Modal extends ToPromise {
       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'})
@@ -136,6 +108,7 @@ export default class Modal extends ToPromise {
 
     this.hideTimer = setTimeout(() => {
       this.modal.classList.remove('show')
+      this.modal.remove()
     }, 0)
   }
 }

package/src/web/api/preview-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/web/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
@@ -92,7 +91,10 @@ export default class Toast {
       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 })
   }
 }