# uniappx-frame

**Repository Path**: wanchuang_software/uniappx-frame

## Basic Information

- **Project Name**: uniappx-frame
- **Description**: 基于vue3+uts+uviewUltra+uvue搭建的uniappx开发框架
- **Primary Language**: Unknown
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2026-07-25
- **Last Updated**: 2026-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于vue3+uts+uviewUltra+uvue搭建的uniappx开发框架（更新完善中...）
[uniapp开发框架地址](https://gitee.com/wanchuang_software/uniapp-frame)
## 安装依赖
```javascript
npm install
node 版本号 22.20.00
```
## 相关文档
api文档：[uniappx](https://doc.dcloud.net.cn/uni-app-x/)、[uview-ultra](https://uview-ultra.lingyun.net/)
## 目录结构
```javascript
|-api //接口相关文件
|-config //配置文件
|--index.uts //配置文件
|--routes.uts //路由地址
|-node_modules //依赖
|-pages //业务页面
|-scripts //脚本文件
|--generateRoutes.js //根据pages.json自动生成路由地址脚本 调用方法 node scripts/generateRoutes.js
|-static //静态资源
|-uni_modules //uniapp插件
|-unpackage //运行包忽略
|-utils //工具包
|--interceptors.uts //全局配置、请求拦截器
|--request.uts //封装的request请求
|--router.uts //封装的router管理
|--routerSetup.uts //全局路由守卫
|--storage.uts //封装的存储
|--update-app.uts //APP 版本更新管理器
|--update-mp-weixin.uts //微信小程序 版本更新管理器
|--upload.uts //封装的文件上传upload
|--websocket.uts //封装的websocket
|-.gitignore //git配置文件
|-App.vue //应用根组件
|-index.html //网页入口模板-不需要任何操作
|-main.uts //入口文件
|-manifest.json //应用配置文件
|-package.json //项目依赖清单
|-package-lock.json //依赖版本锁文件
|-pages.json //页面路由配置
|-uni.scss //全局样式变量
|-README.md
```
## 代码使用
- request请求方式，在api目录下创建 ***.uts文件，并引入http方法，可用的http请求方法有 post、get、delete、put
```javascript
import { http } from '@/utils/request'
export const 接口名称 = (data: LoginParams): Promise<LoginResult> => {
  const params = {
      //参数
    } as UTSJSONObject
  return http.get<LoginResult>('接口地址', params)
}
export const 接口名称 = (data: LoginParams): Promise<LoginResult> => {
  const params = {
      //参数
    } as UTSJSONObject
  return http.post<LoginResult>('接口地址', params)
}
export const 接口名称 = (data: LoginParams): Promise<LoginResult> => {
  const params = {
      //参数
    } as UTSJSONObject
  return http.delete<LoginResult>('接口地址', params)
}
export const 接口名称 = (data: LoginParams): Promise<LoginResult> => {
  const params = {
      //参数
    } as UTSJSONObject
  return http.put<LoginResult>('接口地址', params)
}
```
- upload上传使用
```javascript
const res = await uploader.upload({
	url: '接口地址',
	filePath: '文件地址', // 从 uni.chooseImage 等获取
	name: 'file',
	formData: { userId: 1 },
	showLoading: true,
	onProgress: (progress) => {
		console.log('上传进度:', progress)
	}
})
```
- websocket使用
```javascript
import { wsUrl } from '@/config'
import { createWebSocket } from '@/utils/websocket'
let ws = null as any
// 创建 WebSocket 实例
ws = createWebSocket({
	url: wsUrl,
	autoReconnect: true,
})
// 注册事件监听
ws.on('open', () => {
	tips.value = '连接已打开'
	// 发送消息
	// ws.send({ type: 'login', token: 'xxx' })
})

ws.on('message', (data) => {
	tips.value = '收到消息:' + data
	// 处理消息
})

ws.on('error', (err) => {
	tips.value = '连接错误:' + err
})

ws.on('close', (res) => {
	tips.value = '连接关闭:' + res
})

ws.on('reconnect', ({ attempt }) => {
	tips.value = `第 ${attempt} 次重连尝试`
})

ws.on('reconnect_failed', () => {
	tips.value = '重连失败，已达到最大次数'
})

// 发起连接
ws.connect()

// 发送消息
const sendMessage = () => {
	console.log(123);
	ws?.send({ content: 'Hello WebSocket' })
}
// 关闭ws
const closeConnection = () => {
	console.log(456);
	ws?.close()
}

onUnload(() => {
	// 页面卸载时关闭 WebSocket
	if (ws) {
		ws.close()
		ws.destroy()
		ws = null
	}
})
```
- 使用storage持久化存储
```javascript
import { storage } from '@/utils/storage'
storage.getSync('token')
storage.setSync('token', '22223333')
storage.removeSync('token')
```
- router路由管理基本使用
```javascript
import { router } from '@/utils/router'
// 通过名称跳转
router.push({ name: 'profile' })
  .catch(err => console.error(err))
// 通过路径跳转，带 query
router.push({
  path: '/pages/detail/index',
  query: { id: id }
})
 // 替换当前页
router.replace({ name: 'login' })
// 返回上一页
router.back()
// 切换 tab 页
router.push({ name: 'home', switchTab: true })
// 重启到首页
router.push({ name: 'home', reLaunch: true })

// 获取传参
const currentRoute = router.getCurrentRoute()
if (currentRoute && currentRoute.query) {
	redirect.value = currentRoute.query.redirect as string
	console.log('重定向地址:', redirect)
}
```