uniapp uni_modules所有组件的使用方法

如何在uniapp项目中正确使用uni_modules下的组件？能否提供具体组件的引入方法和配置示例？遇到组件不生效的情况应该怎么排查？

2 回复

UniApp的uni_modules组件使用步骤：

  1. 在插件市场找到需要的uni_modules组件
  2. 点击下载导入到项目的uni_modules目录
  3. 在pages.json中配置easycom规则（已默认开启）
  4. 在页面中直接使用组件标签即可 无需手动import，自动按需引入。

UniApp的uni_modules是模块化组件管理方式，以下是核心使用方法：

1. 安装组件

  • 在uni_modules插件市场选择组件
  • 点击“使用HBuilderX导入”或手动下载到项目uni_modules目录

2. 基本使用步骤

自动注册（推荐）

组件自动注册，直接在页面使用：

<template>
  <view>
    <!-- 直接使用组件 -->
    <uni-badge text="99" type="error"></uni-badge>
    <uni-icons type="contact" size="30"></uni-icons>
  </view>
</template>

手动注册（如需）

某些组件需手动引入：

<script>
import uniBadge from '@/uni_modules/uni-badge/components/uni-badge/uni-badge.vue'

export default {
  components: {
    uniBadge
  }
}
</script>

3. 常用组件示例

UI组件

<!-- 按钮 -->
<uni-buttonsize="mini" type="primary">按钮</uni-button>

<!-- 图标 -->
<uni-icons type="star" size="24" color="#007AFF"></uni-icons>

<!-- 标签 -->
<uni-badge text="新品" type="success"></uni-badge>

表单组件

<!-- 输入框 -->
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>

<!-- 选择器 -->
<uni-data-select v-model="selectValue" :localdata="options"></uni-data-select>

布局组件

<!-- 卡片 -->
<uni-card title="标题" sub-title="副标题">
  卡片内容
</uni-card>

<!-- 分割线 -->
<uni-divider content="分割线"></uni-divider>

4. 配置注意事项

  • 确保pages.json中已配置easycom规则（默认已配置）
  • 查看组件文档了解props、events等具体用法
  • 注意平台差异，部分组件可能不支持所有平台

5. 自定义配置

如需修改组件默认样式，可在uni.scss中修改变量或使用样式覆盖。

建议直接查阅具体组件文档获取详细用法和示例代码。

回到顶部