# uniapp-frame

**Repository Path**: yangl8564/uniapp-frame

## Basic Information

- **Project Name**: uniapp-frame
- **Description**: 基于vue3+ts+uview-pro+webscoket搭建的uniapp开发框架
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-06-29
- **Last Updated**: 2026-06-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于vue3+ts+uview-pro+webscoket搭建的uniapp开发框架

## 安装依赖
```javascript
npm install
node 版本号 22.20.00
```
## 相关文档
api文档：[uniapp](https://uniapp.dcloud.net.cn/)、[uview-pro](https://uviewpro.cn/zh/guide/intro.html)
## 目录结构
```javascript
|-api //接口相关文件
|-components //自定义组件
|-config //配置文件
|-hooks //组合函数文件
|-node_modules //依赖
|-pages //业务页面
|-server //封装的http请求
|-static //静态资源
|-store //全局内存
|-unpackage //运行包忽略
|-.gitignore //git配置文件
|-App.vue //应用根组件
|-index.html //网页入口模板-不需要任何操作
|-main.js //入口文件
|-manifest.json //应用配置文件
|-package.json //项目依赖清单
|-package-lock.json //依赖版本锁文件
|-pages.json //页面路由配置
|-tsconfig.json //TypeScript 配置
|-uni.promisify.adaptor.js //uni-app 适配器(vue3适配uniapp)
|-uni.scss //全局样式变量
|-README.md
```
## 代码使用
- request请求方式，在api目录下创建 ***.ts文件，并引入http方法，可用的http请求方法有 post、get、delete、put
```javascript
import { http } from 'uview-pro';
export const 接口名称= (data: any) => http.get('接口地址', data)
export const 接口名称= (data: any) => http.post('接口地址', data)
export const 接口名称= (data: any) => http.delete('接口地址', data)
export const 接口名称= (data: any) => http.put('接口地址', data)
```
- webscoke使用
```javascript
import { watch } from 'vue';
import { useWebSocket } from '@/hooks/useWebSocket'
const userStore = useUserStore()
const { reconnect, initWS, isConnected, send, onMessage, close, lastMessage } = useWebSocket()
initWS() //初始化webscoket并开启
close() //关闭webscoket
lastMessage //心跳数据
watch(lastMessage, (newVal) => {
	 if (newVal) {
	   console.log('消息更新了:', newVal)
	   // 追加到列表中
	   // messages.value.push(newVal)
	 }
})
```
- store中的useUserStore如何使用，如需自定义更多存储方法可在store/modules目录下根据user.ts结构创建自己的方法
```javascript
import { useUserStore } from '@/store';
const userStore = useUserStore()
userStore.setToken('12234556');  //存储token
userStore.clearToken() //清除token
userStore.token //获取存储的token
userStore.isLoggedIn //判断是否登录
```