uni-app 怎么获取resid,例如:android的R.drawable.xxxx

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app 怎么获取resid,例如:android的R.drawable.xxxx

uniappx 怎么获取resid,例如:android的R.drawable.xxxx

1 回复

在uni-app中,获取资源ID(resid)的方式与原生Android开发有所不同。uni-app是基于Vue.js的多端开发框架,它主要面向的是跨平台开发,包括小程序、H5、App(iOS和Android)等。因此,直接使用Android的R.drawable.xxxx方式并不适用于uni-app。

不过,在uni-app中,你可以通过静态资源引用和条件编译的方式来实现类似的功能。以下是一个如何在uni-app中引用本地静态图片的示例:

1. 静态资源引用

在uni-app中,你可以将图片资源放在项目的static目录下,然后在代码中使用相对路径来引用这些资源。例如:

目录结构

├── pages
│   └── index
│       └── index.vue
├── static
│   └── images
│       └── example.png
└── ...

index.vue中引用图片

<template>
  <view>
    <image src="/static/images/example.png" mode="widthFix"></image>
  </view>
</template>

<script>
export default {
  // 你的组件逻辑
}
</script>

<style>
/* 你的样式 */
</style>

2. 条件编译

如果你需要在不同平台(如App和小程序)中使用不同的资源,你可以使用uni-app的条件编译功能。例如,你可以为App平台和小程序平台分别准备不同的图片资源:

目录结构

├── pages
│   └── index
│       └── index.vue
├── static
│   ├── app-images
│   │   └── example_app.png
│   └── wx-images
│       └── example_wx.png
└── ...

index.vue中使用条件编译引用图片

<template>
  <view>
    <!-- #ifdef APP-PLUS -->
    <image src="/static/app-images/example_app.png" mode="widthFix"></image>
    <!-- #endif -->
    <!-- #ifndef APP-PLUS -->
    <image src="/static/wx-images/example_wx.png" mode="widthFix"></image>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  // 你的组件逻辑
}
</script>

<style>
/* 你的样式 */
</style>

通过上述方式,你可以在uni-app中灵活地引用和管理资源,而无需直接操作资源ID。这种方式更符合uni-app的跨平台开发理念,也更易于维护和管理。

回到顶部