uni-app移动端项目中 @1x、@2x 图 和 @3x 图 的解决方案

在 Uni-app 中，可以使用 `uni.$on` 监听 `uniTabBar` 组件的 `click` 事件，然后通过 `uni.switchTab` 方法跳转到对应的页面。具体实现步骤如下：

1. 在 `App.vue` 中定义一个全局变量 `$pixelRatio`，用于存储当前设备的像素比。

<script>
export default {
  data() {
    return {
      $pixelRatio: 1 // 默认为 1
    }
  },
  created() {
    // 获取当前设备的像素比
    this.$pixelRatio = uni.getSystemInfoSync().pixelRatio
  }
}
</script>

2. 在 `utils` 文件夹下创建一个 `index.js` 文件，用于封装获取图片路径的方法。

const getImagePath = (path) => {
  const pixelRatio = getApp().$pixelRatio
  let suffix = ''
  if (pixelRatio >= 2 && pixelRatio < 3) {
    suffix = '@2x'
  } else if (pixelRatio >= 3) {
    suffix = '@3x'
  }
  return `${path}${suffix}.png`
}

export default {
  getImagePath
}

3. 在需要使用图片的地方，使用 `getImagePath` 方法获取对应的图片路径。

<template>
  <img :src="getImagePath('/static/logo')" alt="logo" />
</template>

<script>
import utils from '@/utils'

export default {
  methods: {
    getImagePath(path) {
      return utils.getImagePath(path)
    }
  }
}
</script>

这样，就可以根据不同设备的像素比加载对应的图片了。注意，这里只是一种解决方案，实际开发中还需要根据具体情况进行调整。