uni-app公用方法

basic.js

import Vue from 'vue'
import store from '@/store'

1、运行环境判断

if(process.env.NODE_ENV == 'development'){//本地环境 development
}else{//线上环境 production
}

2、请求方法（异步/同步）

/** 删除对象空属性* @method deleteObjNull* @param {Object} obj 要处理的对象*/
const deleteObjNull=(obj)=>{for(let key in obj){if(obj[key]==='' || obj[key]===undefined || obj[key]===null || obj[key]=='-' || obj[key]=='NaN'){delete obj[key];}}
}/** post异步请求的方法* @method uniRequest* @param {String} url 请求的地址* @param {Object} data 请求传递的参数* @param {function} suc 成功之后调用的方法* @param {function} err 错误调用的方法*/
const uniRequest=(url,data,suc,err)=>{store.commit('setVariableVal',['loadingText',Vue.prototype.loadText]); //加载提示deleteObjNull(data); //删除请求对象空值 uni.request({url:url,method: 'POST',data: data?JSON.stringify(data):'',success: res => {if(res.data){store.commit('setVariableVal',['loadingText','']); //加载提示置空if(res.data.errcode){uni.showToast({'title':res.data.errmsg,'icon':'none'})if(err){err(res);}}else{if(suc){suc(res);}}}},fail:error=>{store.commit('setVariableVal',['loadingText','']); //加载提示置空}});
}/** post异步请求的方法，不提示错误* @method uniRequest2* @param {String} url 请求的地址* @param {Object} data 请求传递的参数* @param {function} suc 成功之后调用的方法*/
const uniRequest2=(url,data,suc)=>{deleteObjNull(data); //删除请求对象空值 uni.request({url:url,method: 'POST',data: data?JSON.stringify(data):'',success: res => {if(res.data){if(suc){suc(res);}}}});
}/** post异步promise请求的方法* @method promiseRequest* @param {String} url 请求的地址* @param {Object} data 请求传递的参数* @return {Object} promise对象*/
const promiseRequest=(url,data)=>{deleteObjNull(data); //删除请求对象空值return new Promise((resolve,reject)=>{uni.request({url:url,method: 'POST',data: data?JSON.stringify(data):''}).then(resData=>{let [error,res]=resData;if(res){// 请求成功if(res.data.errcode){uni.showToast({'title':res.data.errmsg,'icon':'none'})}else{resolve(res);}}}).catch(err=>{})})
}/** post同步请求的方法* @method awaitRequest* @param {String} url 请求的地址* @param {Object} data 请求传递的参数* @return {Object} 返回请求结果*/
const awaitRequest=async (url,data,noCue)=>{deleteObjNull(data); //删除请求对象空值let [error,res]=await uni.request({url:url,method: 'POST',data: data?JSON.stringify(data):''})// 请求成功if(res && res.data.errcode && !noCue){uni.showToast({'title':res.data.errmsg,'icon':'none'})}else{return res;}
}

3、是否可以加载更多数据

/** 判断是否可以加载更多数据* @method judgeIsLoad* @param {Array} data 请求返回的列表数据* @param {Number} start 开始查询位置* @return {Array} 返回提示文字和是否可加载*/
const judgeIsLoad=(data,start,size)=>{let loadingText='';let isLoad=true;if(data==''){if(start>0){loadingText='没有更多了';}else{loadingText='暂无数据';}isLoad=false;}else if(data.length>0 && data.length<size){loadingText='没有更多了';isLoad=false;}else{loadingText='';isLoad=true;}store.commit('setVariableVal',['loadingText',loadingText]); //加载提示return isLoad;
}

4、获取页面路径

// 获取页面路径
const getPagePath=()=>{let pageArr=getCurrentPages(); //页面集合let currPage=pageArr[pageArr.length-1]; //当前页面数据let pageParam={}; //当前页面参数// #ifdef H5 || APP-PLUSpageParam=currPage.$mp?currPage.$mp.query:{};// #endif// #ifdef MPpageParam=currPage.options;// #endiflet paramStr=''; //拼接的参数// 判断对象不为空if(Object.keys(pageParam).length>0){for(let item in pageParam){paramStr+=`&${item}=${pageParam[item]}`;}paramStr=paramStr.replace('&',''); //去掉第一个&}let pagePath=`/${currPage.route}?${paramStr}`; //当前页面地址,路由+参数return pagePath;
}

5、判断登录

/** 判断用户是否登录* @method judgeLogin* @param {Boolean} forcedLogin 是否需要强制登录,默认为false* @param {Boolean} relaunch 是否关闭所有页面，再打开新页面,默认为false*/
const judgeLogin=(forcedLogin=false,relaunch=false)=>{if(!store.state.userInfo['id']){uni.getStorage({key:'userInfo',success:(res)=>{// 用户已登录,给vuex中的userInfo赋值，防止刷新后vuex清空store.state.userInfo=JSON.parse(res.data);},fail:() => {// 判断未登录，跳转到登录页面if(forcedLogin){// 强制登录if(relaunch){// 关闭所有页面，打开登录页，用于tabbar强制登录uni.reLaunch({url: '/pages/login'})}else{// 打开登录页let pagePath=encodeURIComponent(getPagePath()); //编译urluni.redirectTo({url: '/pages/login?pagePath='+pagePath})}}else{//未登录}}})}
}

6、退出登录

// 复制和重置state,用于退出时重置vuex值
const copyResetState=(type)=>{if(type){// 退出时重置store.commit('resetState',JSON.parse(Vue.prototype.stateStr));}else{// main.js中初始化复制Vue.prototype.stateStr=JSON.stringify(store.state);}
}// 退出登录
const userLoginOut=()=>{copyResetState(true); //重置vuexstore.commit('setUserInfo',{});uni.removeStorage({key:'userInfo'})uni.switchTab({url:'/pages/index'})
}

7、验证码

/** 获取验证码* @method getVerificationCode* @param {String} username 手机号，用于验证号码是否合规* @param {String} codeUrl 请求的接口地址* @param {Object} obj 请求发送的数据*/
const getVerificationCode=(username,codeUrl,obj,countFn)=>{//定义表单规则const rule = [{name:"username", checkType : "phoneno", checkRule:"11",  errorMsg:"请输入正确的手机号码"},];let checkRes = graceChecker.check({'username':username}, rule); //验证手机号if(checkRes){store.state.securityTimeDec=true;// 发送请求获取验证码uniRequest(codeUrl,obj,res=>{if(countFn){countFn();}else{countDown();}})}else{uni.showToast({ title: graceChecker.error, icon: "none" });}
}// 验证码倒计时
const countDown=()=>{store.state.securityTime=89;let invalId=setInterval(()=>{//发送验证码倒计时store.state.securityTime--;if(store.state.securityTime==0 || !store.state.securityTimeDec){clearInterval(invalId);store.state.securityTime=90;}},1000);
}

8、格式化时间

/* 格式化时间* @method fmtDate* @param {String} str 时间戳字符串* @param {String} d 日期格式，默认为时间格式,1年月日,2月日时分,3年月1号* @return {String} 返回格式化之后的日期
*/
const fmtDate=(str,d)=>{let dt=str?new Date(str):new Date();let year=dt.getFullYear();let month=fixed2(dt.getMonth()+1);let date=fixed2(dt.getDate());let hours=fixed2(dt.getHours());let minutes=fixed2(dt.getMinutes());let secounds=fixed2(dt.getSeconds());let times='';if(d==1){times= `${year}-${month}-${date}`;}else if(d==2){times= `${month}-${date} ${hours}:${minutes}`;}else if(d==3){times= `${year}-${month}-01`;}else{times= `${year}-${month}-${date} ${hours}:${minutes}:${secounds}`;}return times;
}/* 保留两位小数* @method fixed2* @param {String} str 需要转换的字符串* @return {String} 返回两位小数
*/
const fixed2=(str)=>{return Number.parseInt(str)<10?'0'+str:str;
}

9、停止当前页面下拉刷新

//停止当前页面下拉刷新
const stopPullRefresh=()=>{setTimeout(()=>{uni.stopPullDownRefresh();},800)
}

10、图片预览

// 预览图片
const previewImg=(arr,current)=>{uni.previewImage({urls:arr,current:current})
}

11、向上保留两位小数

// 向上保留两位小数
const ceilFixed2=(num)=>{let ceilNum=Math.ceil(num*100)/100;return ceilNum.toFixed(2);
}

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({state: {userInfo: {}, //用户的登录信息securityTime:90, //发送验证码倒计时securityTimeDec:true ,//倒计时是否自减loadingText:'' //加载提示},mutations: {resetState(state,val){ //重置statefor(let item in state){state[item]=val[item];}},setVariableVal(state,option){ //统一方法设置变量值state[option[0]]=option[1];}}
})
export default store

uni-app公用方法相关推荐

uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
UNI-APP APP版本更新方法
UNI-APP APP版本更新方法直接上代码不墨迹直接上代码不墨迹 // 版本更新方法wgtUrlupload(){let _this = this;//系统版本升级判断接口(后台获取服务器)va ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...
uni app页面传值
传值是很常见的知识点,刚开始接触uni app总会踩到很多传值的坑,不是这里传不过去,就是那边接收不到,以下是我遇到过的一些传值方式,实在不行,咱就一个一个试,总有一个能"干起". ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
H5调用APP的方法
使用场景原生APP内嵌入HTML5页面,在HTML5页面调用原生APP的方法(如登录.分享等). 关键代码 if(window.webkit && window.webkit.mes ...

uni-app公用方法

1、运行环境判断

2、请求方法（异步/同步）

3、是否可以加载更多数据

4、获取页面路径

5、判断登录

6、退出登录

7、验证码

8、格式化时间

9、停止当前页面下拉刷新

10、图片预览

11、向上保留两位小数

uni-app公用方法相关推荐

最新文章

热门文章