# uniapp前端模板

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

## Basic Information

- **Project Name**: uniapp前端模板
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 9
- **Created**: 2021-05-27
- **Last Updated**: 2021-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

#### UI框架及文档
- **[uviewui - UI组件(v1.8.3)](https://www.uviewui.com/)**
- **[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插件目录
|------ 
|- node_modules     Vue插件目录，小程序不建议使用
|- pages 			页面目录
|------ demo/form 			表单验证
|------ demo/request    	网络请求与文件上传
|------ demo/qrcode			分享二维码海报，通过canvas绘制保存 (QS-SharePoster )
|------ demo/page 			PHP框架快速分页查询，适配java需要稍作改动 function.js		
|------ demo/wechat 		微信JSSDK
|- static			静态资源目录
|------ images		图片目录
|------ js 			js封装目录 
|------------- api.js 		请求相关封装（带拦截器）
|------------- function.js  常用函数封装
|------------- wechat.js    微信公众号JSSDK简单封装
|- App.vue			全局样式，引入了colorui，uviewui的样式
|- config.js        配置文件，接口请求地址
|- main.js          主入口文件，引入了uviewui的js
|- pages.json
|- uni.scss        引入了uviewui的样式变量
~~~

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

1. GET/POST请求 [Promise] , 默认都是POST提交 , 如需在header里面增加token, 修改request.js即可
~~~  

var _this=this;
this.$api.request("/api/goods/search",{ 
	method:"GET",
	data:{page:1,per_page:20,keyword:"便宜"}
}).then((res)=>{
	if(res.code==200){
		
	} 
}).catch((err)=>{
	console.log("错误:",err);
})
~~~  
2. GET/POST请求（旧版本）
~~~
var _this=this;
this.$api.request({
	url:"/api/goods/search",  
	data:{page:1,per_page:20,keyword:"便宜"},
	success:function(res){
		if(res.code==200){
			//数据渲染
		}else{
			_this.$toast(res.msg)
		}
	},
	fail:function(err){
		_this.$toast("请求出错");
		console.log("请求出错",err);
	}
})
~~~
3. 图片上传
~~~
//批量上传
var _this=this;  
uni.chooseImage({
	count:9,
	success(res){
		_this.$showLoading("上传中");
		_this.$api.upload('/api/attachment/upload',res.tempFilePaths,{id:1}).then((res)=>{
			uni.hideLoading()
			console.log("上传成功",res);
			//下一步提交表单
			
		}).catch((err)=>{
			uni.hideLoading()
			console.log("上传终止",err)
		})
	}
})
~~~

#### 表单批量验证
~~~ 
<form @submit="formSubmit">...</form> 
...
formSubmit:function(e){
	var datas=e.detail.value;
	//表单验证 ， 更多验证看function.js
	var msg=this.$func.validate(this,[ 
		["姓名",datas.name,'chinese'],//length验证长度 
		['手机号',datas.mobile,'mobile'],//手机号验证
		['身份证',datas.idcard,'idcard'],//身份证验证
		['邮箱',datas.email,'email'],//邮箱验证
		["备注",datas.require,'require'], //验证必填
		["用户名",datas.username,'username'], //用户名
		["密码",datas.password,'password'], //密码
		["年龄",datas.range,'range',[1,100]], //数字范围
		["爱好",datas.slength,'length',[1,10]], //数字范围
		["性别",datas.slength,'index',["1","2"]], //indexOf验证，字符串数组，区分大小写
	]);
	console.log("表单数据",datas)
	if(msg!==true){
		this.$toast(msg);
		return false;
	}
	this.$showLoading("保存中"); //避免表单重复提交 
	
	var _this=this;
	this.$api.request({ //发送请求
		url:"/api/user/update",  
		data:datas,
		success:function(res){
			_this.$hideLoading();
			if(res.code==200){
				//保存成功
			}else{
				 
			}
		},
		fail:function(err){
			_this.$hideLoading();
			_this.$toast("请求出错");
			console.log("请求出错",err);
		}
	})
}
...
~~~
#### 分页查询DEMO
此分页只兼容ThinkPHP框架和Laravel框架自带的分页，Java的若依
- **[分页DEMO](https://gitee.com/qq_admin_dev_team/uniapp-front/blob/master/pages/demo/page.vue)** 
#### 微信公众号JSSDK 
- **[微信公众号DEMO](https://gitee.com/qq_admin_dev_team/uniapp-front/blob/master/pages/demo/wechat.vue)** 

#### 其他JS封装

1. 浮点运算，避免出现js浮点bug
~~~
let res = this.$func.jia(1.9,1.82131);
let res = this.$func.jian(1.9,1.82131);
let res = this.$func.cheng(1.9,1.82131);
let res = this.$func.chu(1.9,1.82131);
~~~

2. 时间转换
~~~
var timestamp=this.$func.now(); //当前时间戳

//0返回完整时间,1返回日期，2返回时分秒，3返回每个节点数组,4返回时分）

var arr=this.$func.datetime(timestamp,3);//获取格式化的年，月，日，时，分，秒，周 
console.log("格式化时间",arr);
console.log("今天是星期几",arr.weekday);

console.log('完整时间',this.$func.datetime(timestamp,0));
console.log('日期',this.$func.datetime(timestamp,1));
console.log('时间',this.$func.datetime(timestamp,2));
~~~
 
3. 随机数、字符串
~~~
let rand = this.$func.rand(10000,999999); //随机整数
let randChar = this.$func.randChar(20); //随机字符串，无特殊符号
let randChar = this.$func.randChar(20,true); //随机字符串，含特殊符号
~~~
4. 带遮盖层的提示、加载中，可用于避免重复点击
~~~
this.$toast("验证码错误");
this.$toast("验证码错误",'success');//定义图标，默认none
this.$toast("验证码错误",null,5000);//定时关闭毫秒，默认1500 
this.$showLoading('上传中');
this.$hideLoading();
~~~
5. H5微信浏览器判断
~~~
this.$func.isWechat();//微信浏览器返回true
~~~
6. 缓存数据
~~~
this.$api.cache("token");//读取缓存
this.$api.cache("token","xxxxx");//设置缓存，自动增加config.js里面的前缀
~~~
7.