# uniapp-frame

**Repository Path**: walster/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-07-01
- **Last Updated**: 2026-07-01

## 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)
```
- request请求中去除默认的loading和toast
```javascript
import { http } from 'uview-pro';
export const 接口名称= (data: any) => http.get('接口地址', data, {meta: { toast: false, loading: false }})
```
- 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 //判断是否登录
```
## 组件使用
- 如何在项目中使用components中的组件，在components组件命名方式com-xxx，组件目录是com-xxx/com-xxx，不一定是com开头随意，在uniapp中asycom是默认开启的在引用组件时可简化引入流程
```javascript
<template>
	<com-xxx></com-xxx>
</template>
```
- com-list组件如何使用
```javascript
// 父组件中使用
<template>
	<com-list :method="anyapi"></com-list>
</template>
<script>
import { anyapi } from '@/api/anyapi'
</script>
// 子组件中所需参数
 // showAvatar 骨架屏是否展示头像
 // showTitle 骨架屏是否显示大标题
 // refresherEnabled 是否开启下拉刷新
 // method 请求数据所用的方法
 // text 缺省页显示的文本

```