当前位置：首页 > wzjs >正文

小型企业网站建设的背景免费做网站推广的软件

wzjs 2025/8/18 2:25:46

小型企业网站建设的背景,免费做网站推广的软件,wordpress收藏关注,南澳网站建设说明 uView UI 是一款支持多平台的高效开发框架，能够极大地提升开发效率，尤其是在跨平台开发时。在本篇文章中，我们将详细介绍如何在 UniApp 中集成 uView UI，如何配置环境、封装 API 请求、配置路由、以及常用的 uView 组件的使…

说明

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.dataconst custom = response.config?.customif (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，可以尝试将其集成到你的项目中，享受更高效的开发体验。如果有任何问题或建议，欢迎留言讨论！

参考链接：