uView UI 在 UniApp 中的集成与配置

说明

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: `https://prod.api.com/${contextPath}`, // 生产环境
}
const dev = {
  baseUrl: `https://dev.api.com/${contextPath}`, // 开发环境
}
const local = {
  baseUrl: `https://local.api.com/${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.js
• sse.js
• WebSocket.js
• defaultSettings.js
• auth.js
• dateUtil.js

---

4. 全局状态管理 Store

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

---

5. 插件管理 Plugins

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

---

6. uView 常用组件

6.1 顶部标题组件

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

相关组件文档

6.2 动态设置页面标题

在 pages.json 中配置页面标题是静态的，但你也可以使用 uni.setNavigationBarTitle 动态设置页面标题。例如，在页面的 onLoad 或 mounted 钩子中设置页面标题：

export default {
  onLoad() {
    uni.setNavigationBarTitle({
      title: '欢迎来到首页'
    })
  }
}

6.3 动态设置导航栏颜色

使用 uni.setNavigationBarColor 动态修改导航栏的背景色和前景色：

uni.setNavigationBarColor({
  frontColor: '#ffffff',  // 前景色
  backgroundColor: '#42b983'  // 背景色
})

6.4 轮播图 (u-swiper)

u-swiper 组件可以实现轮播图效果，支持自动播放、手动滑动、3D 效果等功能。

轮播图组件文档

6.5 公告栏 (u-notice-bar)

u-notice-bar 用于显示公告或通知，通常放置在页面顶部或页面之间。

公告栏组件文档

---

7. 改造默认项目

手动新建依赖文件 package.json ：

{
  "dependencies": {
    "moment": "^2.29.4",
    "uview-ui": "^2.0.31",
    "uni-read-pages": "^1.0.5",
    "uni-simple-router": "^2.0.7"
  }
}

移除uview-ui的库文件，我们通过node的依赖将包引入，之后打开该项目所在路径使用node版本大于等于18.x执行npm install即可。

改造pages.json中的自动注册机制

说明

‌easycom‌是Uniapp框架提供的一种组件自动注册机制，它能够自动扫描指定目录下的所有组件并将其注册到全局组件中。使用easycom可以简化组件的使用过程，无需手动在components中引入组件，只需在组件目录下创建一个index.vue文件即可自动注册组件并在全局中使用‌

改造easycom

将原来的

"easycom": {
	"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}

改造为

"easycom": {
	"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}

8. 相关文章

• UniApp 使用 uView 打造跨平台应用
• uView 2.x 在 UniApp 中的应用
• UniApp 项目开发中常见问题与解决方案

---

9. 总结

通过本文，你已经了解了如何在 UniApp 中集成 uView UI，如何配置项目、封装 API 请求、动态设置页面标题和导航栏颜色、以及如何使用常见的组件（如 u-navbar、u-swiper 和 u-notice-bar）。这些组件和配置将大大提高你的开发效率，特别是在多平台开发时，能够减少大量的适配工作。

如果你还没有使用 uView UI，可以尝试将其集成到你的项目中，享受更高效的开发体验。如果有任何问题或建议，欢迎留言讨论！

---

参考链接：

• uView 官方文档
• uView 组件资源