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。

javascript 复制代码

// 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 校验等。

javascript 复制代码

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 钩子中设置页面标题：

javascript 复制代码

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

6.3 动态设置导航栏颜色

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

javascript 复制代码

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

6.4 轮播图 (u-swiper)

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

轮播图组件文档

6.5 公告栏 (u-notice-bar)

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

公告栏组件文档

7. 改造默认项目

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

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

将原来的

json 复制代码

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

改造为

json 复制代码

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

8. 相关文章

9. 总结

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

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

参考链接：

uView UI 在 UniApp 中的集成与配置

说明

Uniapp插件

1. 下载与创建空白工程

1.1 下载资源

1.2 项目结构

2. 基础配置

2.1 创建公共文件夹

配置环境（env.js）

封装请求（request.js）

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

3.1 配置路由守卫

3.2 工具类封装

4. 全局状态管理 Store

5. 插件管理 Plugins

6. uView 常用组件

6.1 顶部标题组件

6.2 动态设置页面标题

6.3 动态设置导航栏颜色

6.4 轮播图 (u-swiper)

6.5 公告栏 (u-notice-bar)

7. 改造默认项目

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

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

说明

改造easycom

8. 相关文章

9. 总结

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