h5页面运行环境判断

• 判断h5页面所处的运行环境，以便针对不同的环境做兼容性或差异化处理；
• 由于很多时候需要一进页面就第一时间做处理，所以异步的判断方法都不予考虑，必须是能实时获取的;
• 那么自然的，判断UA是最好、最方便的方式。

一、先上代码：js封装

platform.js：

const ua = window.navigator.userAgent.toLowerCase()

// android平台
const isAndroid = (() => {
  return /Android|Adr/i.test(ua)
})()

// ios平台
const isIos = (() => {
  return /iPhone|iPod|iPad/i.test(ua)
})()

// 微信生态
const isWechat = (() => {
  return /MicroMessenger/i.test(ua)
})()

// 微信小程序
const isWxmp = (() => {
  return /miniProgram/i.test(ua) || window.__wxjs_environment === 'miniprogram'
})()

// 钉钉环境
const isDingding = (() => {
  return /DingTalk/i.test(ua)
})()

// 自家的android客户端
const isInnerAdr = (() => {
  return isAndroid && /dianyidian/i.test(ua)
})()

// 自家的ios客户端
const isInnerIos = (() => {
  return isIos && /dianyidian/i.test(ua)
})()

// 自家的app客户端
const isInnerApp = (() => {
  return isInnerAdr || isInnerIos
})()

// 站内
const isInner = (() => {
  return isInnerAdr || isInnerIos || isWxmp
})()

// 站外
const isOuter = (() => {
  return !isInner
})()

export default {
  isAndroid,
  isIos,
  isWechat,
  isWxmp,
  isDingding,
  isInnerAdr,
  isInnerIos,
  isInnerApp,
  isInner,
  isOuter
}

二、js封装代码的一些说明

• 微信生态，包括微信小程序、微信内置浏览器、微信公众号等
• 针对hybrid混合开发模式中的webview内嵌h5页，需要判断自家的客户端，这时需要让客户端开发人员修改webview的UA，添加上特殊的UA标识，用来给h5做判断，比如我这里的标识就是dianyidian。
• 关于站内站外的划分因人而异，自己决定，使用方便就好。
• 导出的每一个属性值都是boolean类型，true或false。
• 在自家ios客户端接入阿里百川后发现UA被莫名的覆盖了，这种情况可以额外加个判断处理：

// 自家ios客户端
const isInnerIos = (() => {
  if (isIos && /baichuan/i.test(ua)) {
    // 兼容ios客户端跳转阿里百川授权后再打开webview的userAgent被百川覆盖的问题
    return true
  }
  return isIos && /dianyidian/i.test(ua)
})()

• 以上都是实际项目中经过考验了的，放心使用。

三、配合vue封装个自定义指令

• 指令作用：根据页面运行环境给元素添加相应的class类名，这样就可以在css样式里很方便的对不同环境做不同的处理。
• 指令封装：

// 先引入上述封装的platform.js
import platform from '@/utils/platform'

export default {
  bind (el) {
    Object.keys(platform).forEach(v => {
      if (platform[v]) {
        el.classList.add(v)
      }
    })
  }
}

• 使用示例：

<template>
    <div class="demo" v-platforms>使用示例</div>
</template>

<script>
import platforms from '@/directive/platforms/index'

export default {
  directives: { platforms }
}
</script>

<style lang='less' scoped>
.demo {
  color: red;
  
  &.isAdr {
    // 安卓平台下的自定义样式处理
  }
  &.isIos {
    // ios平台下的自定义样式处理
  }
  &.isWxmp {
    // 微信小程序下的自定义样式处理
  }
  // 其他环境下也一样，任性的加......
}
</style>