# putonghua_uniapp

**Repository Path**: sunhappy0318/putonghua_uniapp

## Basic Information

- **Project Name**: putonghua_uniapp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-25
- **Last Updated**: 2025-09-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基础框架使用

## 组件引入

### uview-ui

组件库地址:https://www.uviewui.com[](https://www.uviewui.com/)

组件库作用:基础模板组件

组件库版本:2.0.33 

**注:详细使用请看文档**


 ```vue
 <template>
 	<view>
 		<u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
 		<u-button @click="show = true">打开ActionSheet</u-button>
 	</view>
</template>

<script>
export default {
	data() {
		return {
			title:'标题',
			list: [
				{
					name:'选项一',
					subname:"选项一描述",
					color:'#ffaa7f',
					fontSize:'20'
				},
				{
					name: '选项二禁用',
					disabled:true
				},
				{
					name: '开启load加载', //开启后文字不显示
					loading:true
				}
			],
			show: false
		};
	}
};
</script>

 ```
###  z-paging

组件地址:https://z-paging.zxlee.cn/api/methods/main.html [](https://z-paging.zxlee.cn/api/methods/main.html)

组件库作用:分页组件

组件库版本:2.7.6

**注:详细使用请看文档此组件库能满足绝大多数的分页场景**

```Vue
<template>
    <z-paging ref="paging" v-model="dataList" @query="queryList">
		<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
		<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
        <view class="item" v-for="(item,index) in dataList" :key="index">
            <view class="item-title">{{item.title}}</view>
        </view>
    </z-paging>
</template>

<script>
    export default {
        data() {
            return {
				// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
                dataList: []
            };
        },
        methods: {
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
            queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
                this.$request.queryList({ pageNo,pageSize }).then(res ={
					// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
                	this.$refs.paging.complete(res.data.list);
                }).catch(res ={
                	// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
                	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
                	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
                	this.$refs.paging.complete(false);
                })
            }
        },
    };
</script>
```


## 基础配置

### 基础配置

该文件包含基础的配置项例如 oss图片域名，接口请求域名，会话名称等

![image-20250825140011525](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20250825140011525.png)

## 接口封装

### 定义模板文件

例如:common公共接口模板(如-用户登录，用户注册，获取协议，首页轮播图等)，user用户相关模块(如-获取用户信息，修改用户信息，获取用户订单等)，其他模块按需添加如商城可以添加shop模块等



![image-20250825112615507](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20250825112615507.png)

### 模板文件引入

在api/index.js文件中引入自己的模块

![image-20250825113056583](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20250825113056583.png)

### 请求接口编写

注:不需要授权的接口一定要加noAuth那个对象,因为在请求封装哪里有限制，不定义的话会被拦截强制跳转登录页

![image-20250825113230254](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20250825113230254.png)

### 请求接口使用

上面所有的准备好之后可以在任意文件使用不需要重新引用，因为在全局已经挂上了，调用方式

```js
this.$Api.模块名 或者this.$Api['模块名']
```

备注:如果在res拿不到返回值请检查utils/request.js文件状态码和返回值层级是否和现在写的一样，不一样的话修改成自己需要的即可

![image-20250825114447491](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20250825114447491.png)

## Vuex存储

### state定义

现在只在系统中定义了token及userInfo数据，其他的如果需要可自行定义

![image-20250825115020886](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20250825115020886.png)

### state赋值

```JS
this.$Api.common.userLogin({
    phone: this.phone,
    password: this.password,
}).then(res => {
	//提交登录信息token到Vuex
	this.$store.commit('LOGIN', {
	token: res.data.token
	})
})

this.$Api.user.getUserInfo().then(res => {
    //t提交登录用户信息到Vuex
	this.$store.commit('UPDATE_USERINFO', res.data)
	this.$Tips({ title: '登陆成功' }, { tab: 1, url: '/pages/index/index' })
})
```

### state使用

现阶段可以使用的有isLogin判断用户是否登陆，userInfo用户信息

![image-20250825115420739](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20250825115420739.png)

## 工具函数

### uView工具函数

防抖与节流等尽量用uView自带的那个，还有一些其他常用的例如时间格式化等

```vue
<template>
    <view class="">
		<!-- 此处用法为在模板中使用，无需写this，直接$u.throttle()即可 -->
    	<view class="throttle" @tap="$u.throttle(btnAClick, 500)">
    		露从今夜白
    	</view>
    	<view class="throttle" @tap="btnBClick">
    		月是故乡明
    	</view>
    </view>
</template>

<script>
    export default {
        methods: {
            btnAClick() {
				console.log('btnClick');
			},
			btnBClick() {
				// 此处用法为在js中调用，需要写uni.$u.throttle()
				uni.$u.throttle(this.toNext, 500)
			},
			toNext() {
				console.log('btnBClick');
			}
        }
    }
</script>

<style lang="scss">
    .throttle {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		border: 1px solid $u-type-primary;
	}
</style>

```

### 本地工具函数

在utils/utils.js文件中定一个部分常用的工具函数

- 文件上传uploadFilePromise

```js
/**
 * @desc 文件上传  
 * @param {file} file 上传的文件
 */
export function uploadFilePromise(file) {
	uni.showLoading({
		title: '上传中',
		mask: true
	});
	const token = store.state.app.token;
	return new Promise((resolve, reject) => {
		uni.uploadFile({
			url: HTTP_REQUEST_URL + '/api/upload', // 仅为示例，非真实的接口地址
			filePath: file,
			header: {
				token: token
			},
			name: 'file',
			success: (res) => {
				let response = JSON.parse(res.data)
				if (response.code == 1) {
					setTimeout(() => {
						resolve(response.data)
						uni.hideLoading()
					}, 1000)
				} else {
					uni.showToast({
						title: response.msg,
						icon: 'none'
					})
					uni.hideLoading()
				}
			},
		});
	})
}
```

使用方式如下:

```js
let that = this
uni.chooseImage({
	count: 1,
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album'], //从相册选择
	success: async function(res) {
		let file = res.tempFilePaths[0]
		let {
			url,
			fullurl
		} = await that.$uploadFilePromise(file)
		// 仅为示例一般后端会返回短链接与长链接需要什么用什么
	}
});
```

- 文本提示$Toast等同于uni.showToast只是为了简写

```js
/**
 * @desc 全局提示函数
 * @param {string} title - 提示的内容
 * @param {string} icon - 图标名字
 * @param {number} endtime -提示的延迟时间，单位毫秒
 */

export function Toast(title, icon = 'none', endtime = 2000) {
	uni.showToast({
		title: title,
		icon: icon,
		duration: endtime
	});
}
```

使用方式如下:

```js
this.$Toast('操作成功')
```

- 跳转函数$Tips是小程序跳转的集合

```js
/**
 * @desc 页面跳转函数
 * @param {object|string} opt - 提示的内容
 * @param {object|string} to_url - 页面跳转地址
 * 例:
 * this.$Tips('/pages/test/test'); 跳转不提示
 * this.$Tips({title:'提示'},'/pages/test/test'); 提示并跳转
 * this.$Tips({title:'提示'},{tab:1,url:'/pages/index/index'}); 提示并跳转值table上
 */
const TAB_SWITCH = 1; //一定时间后跳转至 table上
const NAVIGATE = 2; //一定时间后跳转至非 table上
const NAVIGATE_BACK = 3; //一定时间后返回上页面
const RELAUNCH = 4; //关闭所有页面跳转至非table上
const REDIRECT = 5; //关闭当前页面跳转至table上
export function Tips(opt, to_url) {
	if (typeof opt == 'string') {
		to_url = opt;
		opt = {};
	}
	// 参数解构和默认值  
	const {
		title = '', icon = 'none', endtime = 2000
	} = opt;
	// 显示提示  
	if (title) Toast(title, icon, endtime)
	// 处理跳转逻辑  
	const handleRedirect = (delay, navigationFunc, navigationArgs) => {
		setTimeout(() => {
			navigationFunc(navigationArgs);
		}, delay);
	};
	if (to_url !== undefined) {
		if (typeof to_url === 'object') {
			const {
				tab = NAVIGATE, url = ''
			} = to_url;

			switch (tab) {
				case TAB_SWITCH:
					handleRedirect(endtime, uni.switchTab, {
						url
					});
					break;
				case NAVIGATE:
					handleRedirect(endtime, uni.navigateTo, {
						url
					});
					break;
				case NAVIGATE_BACK:
					const delta = parseInt(url, 10) || 1;
					handleRedirect(endtime, uni.navigateBack, {
						delta
					});
					break;
				case RELAUNCH:
					handleRedirect(endtime, uni.reLaunch, {
						url
					});
					break;
				case REDIRECT:
					handleRedirect(endtime, uni.redirectTo, {
						url
					});
					break;
				default:
					console.warn('Unsupported tab type:', tab);
			}
		} else if (typeof to_url === 'function') {
			handleRedirect(endtime, to_url, null);
		} else {
			// 直接跳转，不延迟  
			handleRedirect(title ? endtime : 0, uni.navigateTo, {
				url: to_url
			});
		}
	}
}
```

使用方式如下:

```js
this.$Tips('/pages/test/test'); 跳转不提示
this.$Tips({title:'提示'},'/pages/test/test'); 提示并跳转
this.$Tips({title:'提示'},{tab:1,url:'/pages/index/index'}); 提示并跳转值table上
```

- 拼接OSS图片地址 不传oss_url的会启用配置项的图片地址，如果后端返回oss只需要在第二个参数传上oss地址即可

```js
/**
 * @desc 拼接OSS图片地址  
 * @param {string} url - 图片的文件名，包括扩展名  
 * @returns {string} - 拼接后的OSS图片地址  
 */
export function OssUrl(img_url, oss_url) {
	if (oss_url) {
		return oss_url + img_url;
	} else {
		return HTTP_IMG_URL + img_url;
	}
}
```

使用方式如下:

```js
this.avatar = this.$OssUrl(res.data.avatar) //默认拼接
this.avatar = this.$OssUrl(res.data.avatar,后端返回的oss地址) //后端返回oss地址
```

```Vue
<image class="user-header-image" :src="$OssUrl('/uploads/20250611/d6f205aba242cab9c9756262b1f215a3.png')"></image>
```