支付宝内嵌 h5 页面前端开发常见问题

一、支付宝内 H5 页面长按 Base64 图片没反应问题（安卓端支付宝）

支付宝官方已解释，支付宝安卓客户端目前只支持 http 格式的图片这样长按保存操作， 不支持其它格式的图片，如 base64 图片格式。目前苹果 ios 暂无此问题。
详见：https://openclub.alipay.com/club/history/read/9024

二、支付宝使用 canvas drawImage 画带阴影的 png 图片，阴影会严重失真（安卓端支付宝）

这问题可能跟支付宝的内核 UC 浏览器有关，ios 端的支付宝客户端没问题，只是安卓端的会有这个问题。
解决方案：尽量使用 jpg 格式的图片来作图，可以避免此问题

三、支付宝前端开发时要注意不能出现 “微信” / “公众号” 的字样

这很好理解，竞争关系所致，不能出现竞争对手的敏感字眼

四、js 判断支付宝环境

  function isWeiXin () { // 是否为微信环境
    return navigator.userAgent.match(/MicroMessenger/i)
  }

  function isAplipay () { // 是否为支付宝环境
    return navigator.userAgent.match(/alipay/i)
  }

  function isAndroid () { // 是否为安卓环境
    return navigator.userAgent.match(/Android/i)
  }

  function isIPhone () { // 是否为 iPhone 环境
    return navigator.userAgent.match(/iPhone/i)
  }

五、虚拟键盘弹出时 fixed / absolute 在底部的内容挡住输入框问题。同时如果是一屏页面 iphone 下，输入框收起虚拟键盘失去焦点后，页面底部留白问题

此问题跟 fixed 在底部的输入框输入状态时位置错乱的问题或者输入框被挡住的问题不一样。
兼容的办法的处理思路：输入框获得焦点 focus 隐藏 fixed 内容，输入框失去焦点 blur 时显示内容；当用户点击输入框时也要隐藏 fixed 的内容（收起键盘未失去焦点时，防止二次点击 resize 引起错误显示 fixed 内容）；用户 scroll 时 scrollTop 大于比如 250 时显示 fixed 内容；window.resize 时如果之前的 screenHeight 是小于当前的 screenHeight 即用户收起虚拟键盘时，显示 fixed 内容。

Vue 中处理如下：

                  <input
                    v-model="myInputVal"
                    placeholder="必填"
                    @focus="fixedContentVisible = false"
                    @blur="onBlur"
					@click="fixedContentVisible = false"
                  >

export default {
  data () {
    return {
      fixedContentVisible: true,
      screenHeight: null,
      preScreenHeight: null
    }
  },
  mounted () {
    this.screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    this.preScreenHeight = this.screenHeight
    window.addEventListener('scroll', this.onScroll)
    window.addEventListener('resize', this.onResize)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.onScroll)
    window.removeEventListener('resize', this.onResize)
  },
  methods: {
    onBlur () {
      this.logoVisible = true
      window.setTimeout(function () {
        document.activeElement.scrollIntoViewIfNeeded() // 解决如果是一屏页面 iphone 下，输入框收起虚拟键盘失去焦点后，页面底部留白问题
      }, 0)
    },
    onScroll () {
      if (!this.fixedContentVisible) {
        const st = document.body.scrollTop || document.documentElement.scrollTop
        if (st > 250) {
          this.fixedContentVisible = true
        }
      }
    },
    onResize () {
      const newScreenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      if (newScreenHeight > this.preScreenHeight && !this.fixedContentVisible) {
        this.fixedContentVisible = true
      }
      this.preScreenHeight = newScreenHeight
    }
  }
}