rt-uni-utils

rt-uni-utils

介绍

uniapp封装常用类（请求、上传图片、上一页，精准数值计算，精准类型判断，空对象判断，根据两点的经纬度计算两点之间直线距离）

安装教程

1. npm i rt-uni-utils

使用说明

根目录下新建config文件夹，新建config.ts，代码如下：请求接口的统一前缀、图片地址的前缀、请求超时时间、uploadFile的请求头header都在这里配置,get和post默认请求头是

header： {
		'content-type': 'application/json',
		'Authorization': uni.getStorageSync('token') 
	};

如果post是form表单形式提交，在api.ts中 请使用 uniHttp.postForm；content-type为 application/x-www-form-urlencoded

class Config {
	
	// 接口地址前缀
	baseUrl = '';
	
	// 图片地址前缀
	ossUrl = '';
	
	// 请求超时时间
	timeout = 10000;
	
	// 上传请求头
	uploadHeader = {
		'content-type': 'application/json',
		'Authorization': uni.getStorageSync('token') //自定义请求头
	};
	
	// 默认登录页
	loginPage = '/pages/login/login'
	
	constructor() {
		if (process.env.NODE_ENV === 'development') {
			//开发环境 运行
			// this.baseUrl = 'http://127.0.0.1:8080'; //本地地址
		} else {
			//生产环境 发行
			this.baseUrl = 'http://xxx.xxxx.com'; //正式地址
		}
	}
}
export default new Config();

##后端返回格式要求如下：

{
  ok:false,//true或者fasle
  msg:'', //成功或者失败的提示
  data:{} //数据
}

##请求成功是根据服务器的 statuCode===200会返回数据，statusCode === 401无权限会跳转到登录页 res.statusCode >=500 会提示服务器错误

新建文件夹api，api下新建vo文件夹,新建login.ts

//定义Iuser类
export class Iuser {
	code:string = "";
	mobile:string = ""
}
```	
	 
###文件夹api下新建login.ts文件

```	 
import uniHttp from 'rt-uni-utils/request';
import { Iuser } from './api/vo/login';//这里定义的api下的vo文件里定义的class
class User {
		// 登录
	login(data: Iuser){
		return uniHttp.post('/auth/shop/login',data) //post方法
				
		//return uniHttp.get('/auth/shop/login',data) //get方法
		
		//return uniHttp.postForm('/auth/shop/login',data) //postForm方法
	}

}
export const user = new User(); //暴露

###在登录页面login.vue中使用

//引入	 
import { user } from '../../../api/login';
import { Iuser } from '../../../api/vo/login'; //这里定义的api下的vo文件里定义的class

	//vue2写法
	<template>
		<input type="number" maxlength="11" placeholder="手机号" v-model="info.mobile"/>
		<input type="number" maxlength="6" placeholder="验证码" v-model="info.code"/>
	</template>
		data() {
				return {
						info:new Iuser()
					}
				},
				methods:{
					async login() {
						const res = await user.login(this.info)
						if(res.ok){
							console.log('登录成功',res)
						}else{
							console.log('登陆失败')
						}
						
					}
					
				}
		
	//vue3写法
	<template>
		<input type="number" maxlength="11" placeholder="手机号" v-model="info.mobile"/>
		<input type="number" maxlength="6" placeholder="验证码" v-model="info.code"/>
	</template>
	
	<script setup lang="ts">
		const data = reactive({
			info:new Iuser() 
		})
		const { info } = toRefs(data)
		const getVerificationCode = async()=>{
			const res  = await user.login(info)
			if(res.ok){
				console.log('登录成功',res)
			}else{
				console.log('登录失败')
			}
		}
	</script>
	 

###2. uniapp.upload上传图片使用方法：

###在api文件夹下的info.ts中使用 和uniHttp用法一样

import uniImg from 'rt-uni-utils/upload';
import uniImg from 'rt-uni-utils/uploadLimit';

class Info {
	uploadCard(data:uploadLimit){
			return uniImg.upload('/api/upload/upload_file',data)
		}
}
export cosnt info = new Info() //暴露
```	

###在上传图片的页面upload.vue中使用

import {info} from '../../../api/info' //引入

//vue2写法
	data() {
		return {
				img:'', //单图
				imgs:[] //多图
			}
		},
	methods:{
		async uploadImg() { //单图
			const res: any = await info.uploadCard(1)
			this.img = res[0].url
		}
		async uploadImgs() { //多图
			const res: any = await info.uploadCard(9,this.imgs) //this.imgs必须，为了控制还能选几张图
			this.imgs = this.imgs.concat(res)
		}
	} 
	
//vue3写法
const img = ref('') //单图
const imgs = reactive([]) //多图

const uploadImg = async()=>{ //单图
	const res: any = await info.uploadCard(1) 
	img.value = res[0].url 
} 
const uploadImgs = async()=>{ //多图
	const res: any = await info.uploadCard(9,imgs) //imgs必传，为了控制手机相册还能选几张图
	imgs = imgs.concat(res) 
} 

	
###3.  uniapp上一页，修改上一页的数据或者调用上一页的方法

import { PrevPage } from 'rt-uni-utils/prevPage';

let prevPage:any = new PrevPage(); prevPage.list = [] //修改上个页面的数据 prevPage.getList();//调用上个页面的方法

###4.  精准计算，为了解决js计算精度丢失的问题，使用之前请 npm i decimal.js;

import { cal } from 'rt-uni-utils/cal';

let a =0.88; let b = 0.99; let result:number //计算结果

result = cal.jia(a,b) //加 result = cal.jian(a,b) //减 result = cal.cheng(a,b) //乘 result = cal.chu(a,b) //除

###5.  判断数据类型

import { dataType } from 'rt-uni-utils/dataType';

dataType.val([]) // 返回"Array" dataType.val({}) // 返回"Object" dataType.val('123') // 返回"string" dataType.val(window) // 返回"Window" dataType.val(null) // 返回"Null" dataType.val(undefined) // 返回"undefined" dataType.val() // 返回"undefined" dataType.val(function(){}) // 返回"function" dataType.val(NaN) // 返回"number" dataType.val(/123/g) //返回"RegExp"

###6.  空对象判断

import { emptyObj } from 'rt-uni-utils/emptyObj';

emptyObj.judge({name:'小明'}) //返回false emptyObj.judge({}) //返回true

###7.  根据两点的经纬度计算两点之间直线距离，实际路程建议直线距离乘以1.4

import { distance } from 'rt-uni-utils/distance'; distance.val(40.1835390,115.823092,40.4411433,119.882540) //返回距离 (千米/公里) ```