rt-uni-utils v1.0.30

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) //返回距离 (千米/公里)