[移动开发]企业微信链接适配安卓ios移动端问题汇总

ios网页上拉下弹(橡皮筋样式)

ios在 meta标签配置viewport时要加viewport-fit=cover，防止底部黑色小横条部分出现小白边遮挡footer部分。

该问题布局可使用fixed上中下布局，内容部分使用overflow-y: auto; overflow-x: hidden;-webkit-overflow-scrolling: touch;局部滚动。

也可以使用监听器，禁止内容其他部分按钮触发滚动，内容部分绑定touchmove给一个true，监听器内判断为true不触发禁止默认事件。

使用elementui的话，弹出层要加:modal-append-to-body="false"

使用fixed 局部滑动可能会穿透导致页面卡顿无法滑动，主要原因是触发到了body层的滑动，解决：

//防止局部滚动穿透触发body部分滚动条，ios滑动卡住，
document.getElementById('scroll').addEventListener('scroll', this.handleScroll)
  },
  
    handleScroll() {
      const scrollTop = document.getElementById('scroll').scrollTop
      if (scrollTop <= 0 || scrollTop > document.getElementById('scroll').offsetHeight) {
        document.body.style.overflow = 'hidden'
      } else {
        document.body.style.overflow = 'auto'
      }
    },

.container {
  font-size: 2vh;
  background: #ffffff;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
}
.header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  height: 10vh;
  width: 100vw;
}
.footer {
  height: 10vh;
  width: 100vw;
  line-height: 2.5vh;
  background: #ffffff;
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
}
.main {
  width: 100vw;
  margin-top: 10vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

监听器：我没用此方法，

<div
      class="main"
      @touchmove="$event._isScroller = true">


destroyed() {
    document.body.removeEventListener('touchmove', this.scroll, {
      passive: false,
    })
  },
  created() {
    //移动端适配ios 禁止ios浏览器上下拉回弹
    document.body.addEventListener('touchmove', this.scroll, {
      passive: false,
    })
    },
     scroll(e) {
      if (e._isScroller) return
      e.preventDefault()
    },

项目中部分页面适配移动端，其他页面不能被影响

移动端页面初始大小一倍，最大放大数随意，禁止缩放，ios注意viewport-fit=cover，安卓端注意弹起键盘时，高度变化影响布局等，viewport中设置height固定高度，ios中不需要，机型已适配，ios使用window.innerHeight会多一个小横条的高度，会引起浏览器滚动。

router.afterEach((to, form) => {
/** 移动端页面适配，最大缩放1.0 */
  let metaEl = document.querySelector('#viewportMeta')

  
  let userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''
  let platform = (typeof navigator !== 'undefined' && navigator.platform) || ''
  let maxTouchPoints = (typeof navigator !== 'undefined' && navigator.maxTouchPoints) || 1
  
  let isIOS =
    /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent) || (platform === 'MacIntel' && maxTouchPoints > 1)
  
  if (to.name.indexOf("negotiateCase-mobileTerminal-") != -1) {
    let name = 'viewport'
    var content = `width=device-width, initial-scale=1.0,${to.name.indexOf("negotiateCase-mobileTerminal-pdf") != -1?'':'maximum-scale=1.0, user-scalable=no,'}  viewport-fit=cover`
    metaEl.setAttribute('name', name)
    metaEl.setAttribute('content', content)
  
  /** 防止移动端键盘弹出时影响高度:刚进入时高度为未缩放控制1.0时高度，所以先控制，再设置高度 */
    if (!isIOS) { 
      let height = window.innerHeight
      var content = `height=${height}, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no`
      metaEl.setAttribute('content', content)
    }
  } else if (metaEl.getAttribute('name')) { 
      metaEl.removeAttribute('name')
      metaEl.removeAttribute('content')
      location.reload()
  }
  })

操作后样式、数据不改变
el-button点击后按钮颜色一直是灰色，失焦后变绿：点击事件内进行按钮失焦或在focus聚焦时改变内部样式为按钮颜色 .btn:focus

数据缓存，在div上绑定自定义属性，在操作数据后给属性更改值 new Date().getTime()

企业微信多个# ios转码
跳转的链接参数url不传全部url，传id，前端判断，获取url上参数方法：

 /*
      获取地址栏里指定的参数值
      用法:getUrlValue()["id"]
    */
    getUrlValue() {
      var vars = {}
      //正则：?或&一次或多次 非=和&一次或多次 = 非？和&零次或多次  多次查找，不区分大小写
      var parts = decodeURIComponent(window.location.href).replace(/[?&]+([^=&]+)=([^?&]*)/gi, function (m, key, value) {
        vars[key] = value
      })
      return vars
    },