# uniapp前端模板

**Repository Path**: zhaodengyun/uniapp-front

## Basic Information

- **Project Name**: uniapp前端模板
- **Description**: uniapp前端模板，基于uview-ui，封装了一些常用方法
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 9
- **Created**: 2022-10-09
- **Last Updated**: 2022-10-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Uni-App模板Demo
此项目适用于纯手机端的小程序、公众号、H5、APP； 不适用于PC、自适应等项目

#### UI框架及文档
- **[uviewui - UI组件(v1.8.5)](https://v1.uviewui.com/components/intro.html)**
- **[uniapp插件市场](https://ext.dcloud.net.cn)**
- **[uniapp文档](https://uniapp.dcloud.io/component/README)** 
#### 其他常用优秀插件推荐
- **[QS-SharePoster - Canvas海报生成](https://ext.dcloud.net.cn/plugin?id=471)** 
- **[android、IOS文件上传](https://ext.dcloud.net.cn/plugin?id=1015)**
- **[二维码生成](https://ext.dcloud.net.cn/plugin?id=39)**
- **[uCharts 图标插件](https://ext.dcloud.net.cn/plugin?id=271)**
#### 目录
~~~
|- components       UNIAPP插件目录
|------ 
|- common
|------ /api 		接口目录
|------ http.api.js	请求API集中管理
|------ http.interceptor.js	请求拦截器
|------ function.js 常用方法封装
|------ function.js 常用方法封装
|------ config.js	项目参数配置
|- pages 			页面目录
|------ index/index 			  
|- static			静态资源目录
|------ imgs		图片目录 
|------ css			公共样式目录
|- App.vue			 
|- main.js          主入口文件，引入了uviewui的js
|- pages.json
|- uni.scss         
~~~

#### 富文本解析
~~~  
<view>
	<u-parse :html="content"></u-parse>
</view>
~~~  
#### 网络请求 

1. GET/POST请求 [Promise] 
~~~  
uni.$u.get("/api/home/banner").then((res)=>{
	if(res.code==200){this.banner=res.data}
});
uni.$u.post("/api/login",{username:"admin",password:"xxx"},{'Content-Type':'application/json'})
	.then((res)=>{
	
	})
~~~  
2. 常用方法调用 uni.$func.xxx
~~~
	uni.$func.cache("uid",1);
	uni.$func.datetime(1600000000);
~~~
  
#### 分页查询DEMO
此分页只兼容ThinkPHP框架和Laravel框架自带的分页，其他框架参考接口格式亦可
~~~
	this.page=uni.$func.initPage();//首次初始化
	var page=uni.$func.nextPage(this.page);//下一页
	if(!page)return;//已经加载到最后一页
	page.type=1;//page附加其他查询参数，post提交整个page
	uni.$u.post("/xxx",page).then((res)=>{
		if(res.code==200){
			this.list=this.list.concat(res.data.data);
			this.page=res.data;
		}
	});
	
	接口返回格式参考：
	{
		code:200,
		data:{
			current_page:1,
			total:150,
			last_page:10,
			per_page:15,
			data:[
				{id:1,name:"xxx"}
			],
			
		}
	}
~~~
#### API集中管理
注册文件/common/http.api.js , /common/api/下为各个模块api，用法:
~~~
	uni.$api.user.login();
	this.$api.common.sendCode({mobile:"xxx"});
~~~
#### 常用方法封装

1. 浮点运算，避免出现js浮点bug
~~~
let res = uni.$func.jia(1.9,1.82131);
let res = uni.$func.jian(1.9,1.82131);
let res = uni.$func.cheng(1.9,1.82131);
let res = uni.$func.chu(1.9,1.82131);
~~~
2. 时间转换相关
~~~
var timestamp=uni.$func.now(); //当前时间戳 
uni.$func.datetime(timestamp,3);//获取格式化的年，月，日，时，分，秒，周 
console.log("格式化时间",arr);
console.log("XX小时、XX天以前",uni.$func.beforeTime(timestamp));
console.log("今天是星期几",arr.weekday); 
console.log('完整时间',uni.$func.datetime(timestamp,0));
console.log('日期',uni.$func.datetime(timestamp,1));
console.log('时间',uni.$func.datetime(timestamp,2));
~~~
3. 随机数、字符串
~~~
let random = uni.$func.rand(10000,999999); //随机整数
let randChar = uni.$func.randChar(20); //随机字符串，无特殊符号
let randChar = uni.$func.randChar(20,true); //随机字符串，含特殊符号
~~~
4. 带遮盖层的提示、加载中，可用于避免重复点击
~~~
uni.$func.toast("验证码错误");
uni.$func.toast("验证码错误",'success');//定义图标，默认none
uni.$func.toast("验证码错误",null,5000);//定时关闭毫秒，默认1500 
uni.$func.loading('上传中');//uni.hideLoading();
uni.$func.alert("密码错误")
~~~
5. H5微信浏览器判断
~~~
uni.$func.isWechat();//微信浏览器返回true
~~~
6. 缓存数据
~~~
uni.$func.cache("token");//读取缓存
uni.$func.cache("token","xxxxx");//设置缓存，自动增加config.js里面的前缀
~~~
7. 敏感数据加密解密（AES-128-CBC）
~~~
uni.$func.encrypt("要加密的字符串");//加密
uni.$func.decrypt("要解密的字符串");//解密
~~~
8. 返回N天N分钟以前
~~~
uni.$func.beforeTime(1620000000);
uni.$func.beforeTime("2022-01-01 15:00:00");
~~~