uViewUI在UniApp中的集成与配置

软件开发
2025-08-26 02:15:02

说明

uView UI 是一款支持多平台的高效开发框架，能够极大地提升开发效率，尤其是在跨平台开发时。在本篇文章中，我们将详细介绍如何在 UniApp 中集成 uView UI，如何配置环境、封装 API 请求、配置路由、以及常用的 uView 组件的使用方法。

Uniapp插件

如果希望在IDEA或WebStorm里面运行uni项目，安装Uniapp Tool

1. 下载与创建空白工程 1.1 下载资源

首先，可以通过以下链接下载 uView UI 设计资源和空白工程：

Sketch & Axure 设计资源

脚手架空白工程（点击“下载”获取空白工程）

空白工程包含了项目的基本结构，适合用作开发基础模板。

1.2 项目结构

空白工程的文件夹结构如下：

uView_default │ ├── pages │ └── (存放页面的目录) ├── static │ └── (静态资源目录，通常用于存放图片、字体、外部库等) ├── uview-ui │ └── (uView UI 库的目录，存放组件、样式等) ├── .eslintignore │ └── (ESLint 忽略文件，配置了哪些文件不需要 ESLint 校验) ├── App.vue │ └── (主入口文件，配置全局样式、全局组件、路由等) ├── LICENSE │ └── (项目的开源协议文件，通常是 MIT、Apache 等) ├── main.js │ └── (项目的入口 JS 文件，初始化项目、引入插件、设置全局配置) ├── manifest.json │ └── (应用的基本配置文件，配置应用名称、版本、图标等信息) ├── pages.json │ └── (配置页面的路由、导航、标题等) ├── template.h5.html │ └── (用于 H5 端的 HTML 模板文件) ├── uni.scss │ └── (全局样式文件，通常用于配置全局的 CSS 样式、主题等) ├── vue.config.js │ └── (Vue 项目的配置文件，通常用于配置 webpack、环境变量等)

2. 基础配置 2.1 创建公共文件夹

首先，创建公共文件夹来管理常见的功能模块，例如：

api：存放接口请求相关代码config：配置不同环境的 API 地址http：请求工具封装配置环境（env.js）

创建 env.js 用来配置不同环境下的 API 地址。根据开发、测试、生产等不同环境设置对应的 baseUrl。

// prod-生产 dev-开发 local-本地 const env = "local" // contextPath路径 const contextPath = "bkb/v1" const prod = { baseUrl: ` prod.api /${contextPath}`, // 生产环境 } const dev = { baseUrl: ` dev.api /${contextPath}`, // 开发环境 } const local = { baseUrl: ` local.api /${contextPath}`, // 本地环境 } const config = { dev, prod, local, } export default config[env] 封装请求（request.js）

创建 request.js 文件，封装所有请求逻辑。类似 Java 中的 Filter 过滤器，负责统一处理请求、响应、Token 校验等。

import env from '@/common/config/env.js' module.exports = (vm) => { // 初始化请求配置 uni.$u.http.setConfig((config) => { config.baseURL = env.baseUrl; // 根域名 config.custom = { catch: true, auth: true } return config }) // 请求拦截 uni.$u.http.interceptors.request.use((config) => { uni.showLoading({ title: '加载中' }); config.data = config.data || {} if(config?.custom?.auth) { config.header['Access-Token'] = uni.getStorageSync("access_token") } return config }, config => { return Promise.reject(config) }) // 响应拦截 uni.$u.http.interceptors.response.use((response) => { const data = response.data const custom = response.config?.custom if (data.code !== 200) { if (custom.toast !== false) { uni.$u.toast(data.message) } if(401 == data.code){ uni.removeStorageSync("Access-Token") uni.removeStorageSync("userInfo") setTimeout(() => { uni.navigateTo({ url: '/pages/login/index' }) }, 1000) } if (custom?.catch) { return Promise.reject(data) } else { return new Promise(() => {}) } } uni.hideLoading() return data === undefined ? {} : data }, (response) => { uni.$u.toast("请求失败，请稍后重试！") return Promise.reject(response) }) }

3. 配置路由守卫与工具类 3.1 配置路由守卫

你可以创建 router 文件夹来管理路由守卫。这里可以做全局权限检查、页面跳转等功能。

3.2 工具类封装

一些常见的工具类（例如日期工具、WebSocket 工具、国际化工具等）可以被封装到 utils 文件夹中，如：

i18n.jssse.jsWebSocket.jsdefaultSettings.jsauth.jsdateUtil.js

4. 全局状态管理 Store

通过 Vuex 或 uView 提供的 store 管理全局状态，确保各个页面能够共享状态。例如，管理用户的登录状态、Token 等。

5. 插件管理 Plugins

uView 提供了多种常用插件，可以在 plugins 文件夹中进行管理。你可以引入需要的插件，如图表插件、表单验证插件等。

6. uView 常用组件 6.1 顶部标题组件

在 uView 中，u-navbar 组件可以帮助你快速构建顶部导航栏。可以通过该组件设置页面的标题、返回按钮等。