# 对运行平台的判断

基于浏览器 navigator.userAgent 实现,可能对小程序判断不准

对单个平台进行判断
对运行平台的组合判断-在移动的下有效果
在js代码里使用平台监测
属性/事件/参数

# 对单个平台进行判断

一次只监测一个平台

<template>
  <div>
    <baPlatform name="Android">
      <van-cell title="只有在安卓下运行"></van-cell>
    </baPlatform>
    <baPlatform name="iPhone">
      <van-cell title="只有在iphone下运行"></van-cell>
    </baPlatform>
    <baPlatform name="miniProgram">
      <van-cell title="只有在微信小程序下运行"></van-cell>
    </baPlatform>
    <baPlatform name="Html5Plus">
      <van-cell title="只有在uniapp外壳下运行"></van-cell>
    </baPlatform>
    <baPlatform name="Windows">
      <van-cell title="只有在Windows下运行"></van-cell>
    </baPlatform>
    <baPlatform name="Mac">
      <van-cell title="只有在mac下运行"></van-cell>
    </baPlatform>
    <baPlatform name="Desk">
      <van-cell title="只有在mac或者windows桌面环境下运行下运行"></van-cell>
    </baPlatform>
  </div>
</template>
<script>
  export default {

  };
</script>

复制代码

# 对运行平台的组合判断-在移动的下有效果

是对运行环境的嵌套判断,在小程序和uniapp运行环境下有效

<template>
  <div>
    <baPlatform name="miniProgram">
      <baPlatform name="Android">
        <van-cell title="只有在安卓下运行微信小程序"  ></van-cell>
      </baPlatform>
      <baPlatform name="iPhone">
        <van-cell title="只有在iphone下运行微信小程序"  ></van-cell>
      </baPlatform>
    </baPlatform>
    <baPlatform name="Html5Plus">
      <baPlatform name="Android">
        <van-cell title="只有在安卓下uniapp外壳下运行"  ></van-cell>
      </baPlatform>
      <baPlatform name="iPhone">
        <van-cell title="只有在iphone下uniapp外壳下运行"  ></van-cell>
      </baPlatform>
    </baPlatform>
  </div>
</template>
<script>
  export default {};
</script>

复制代码

# 在js代码里使用平台监测

this.$BaPlatformsSync 同步获取当前平台

this.$BaPlatforms.Android(() => {}) 异步获取当前平台

同步方式获取当前平台

异步方式获取当前平台

<template>
  <div>
    <van-cell title="同步方式获取当前平台">{{platformsSync}}</van-cell>
    <van-cell title="异步方式获取当前平台">{{platforms}}</van-cell>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        platformsSync: '',
        platforms: ''
      };
    },
    mounted: function () {
      console.log(this.$BaPlatformsSync)
      this.platformsSync = this.$BaPlatformsSync
      this.$BaPlatforms.Android(() => {
        console.log('Android')
        this.platforms = 'Android'
      })
      
      // 嵌套组合使用
      this.$BaPlatforms.miniProgram(() => {
        nowPlatfoem.value = '这个要在小程序显示的 字段'
        this.$BaPlatforms.Android(() => {
          this.platforms = '这个要在 安卓小程序显示的 字段'
        })
        this.$BaPlatforms.iPhone(() => {
          this.platforms = '只在iphone下运行'
        })
      })
      
      //单独使用判断
      this.$BaPlatforms.iPhone(() => {
        this.platforms = '只在iphone下运行'
      })
      this.$BaPlatforms.Mac(() => {
        this.platforms = '只在mac下运行'
      })
      this.$BaPlatforms.Desk(() => {
        this.platforms = '只在桌面环境下运行'
      })
    },
  };
</script>

复制代码

# 属性/事件/参数

# Attributes

参数	说明	类型	可选值	默认值
name	传入要判断环境名称	String	null	null

# Events

事件名称	说明	回调参数
—	—	—

# Slot

名称	说明
default	只有符合运行环境的内容才会显示

← Scrollbar 滚动条