uni-app访问java后端登录，携带参数跳转界⾯
uni-app访问java后端登录，携带参数跳转界⾯
前⾔
uni-app 是⼀个使⽤ Vue.js 开发所有前端应⽤的框架，开发者编写⼀套代码，可发布到iOS、Android、Web（响应式）、以及各种⼩程序多个平台。可以作为前端来访问我们的java/python后端
提⽰：以下是本篇⽂章正⽂内容，下⾯案例可供参考
⼀、访问后端
这⾥我们来建⽴⼀个js⽂件，我们可以利⽤request⽅法来访问后端接⼝，这⾥使⽤uni⾃⼰的request⽅法来访问
const baseUrl ='localhost:8089'
const request =(url ='', date ={}, type ='GET', header ={})=>{
return new Promise((resolve, reject)=>{
method: type,
url: baseUrl + url,
data: date,
header: header,
dataType:'json',
}).then((response)=>{
setTimeout(function(){
uni.hideLoading();
},200);
let[error, res]= response;
resolve(res.data);
}).catch(error =>{
let[err, res]= error;
reject(err)
})
});
}
export default request
然后再main.js 中声明
import request from'common/request.js'
.
..
Vue.prototype.$request = request
2.访问
来看看登录吧
login(){
this.$request('/api/user/pwd_login',{
account:this.userAccount,
password:this.userPassWord
},'POST').then(res =>{
if(res.status ==100){
// 存⼊storage
uni.setStorage({
key:'userInfo',
data: res.data,
success:function(){
// 跳转⾄⾸页
uni.switchTab({
url:'/pages/main/index'
});
}
});
}else{
uni.showToast({
title: ssage,
icon:'none',
duration:2000
});
}
});
}
在request⽅法中参数分别是，url，数据，请求⽅式，请求头。如果不需要传数据那么{}就可以了，默认请求⽅式是GET 3.获取信息
如果想获取就直接从storage中取就可以了，可以在进⼊个⼈中⼼onLoad函数中获取
onLoad(){
let self =this
key:'userInfo',
success:function(res){
console.log(res)
self.userInfo = res.data
}
});
},
也可以把获取⽅法写⼊⼯具类中，没有的话返回{}
// 获取登录⽤户
UserInfo=function(){
let res = StorageSync('userInfo');
if(res){
return res
}else{
return{}
}
};
⼆、带参跳转
1.utils
单独写⼀个utils⽅法，也可以在此⽅法中写⼊⼀些⽇期处理，信息加密的⽅法
var utils ={};
//公共处理⽅法
utils.install=function(Vue, option){
utils.install=function(Vue, option){
//页⾯跳转
Vue.prototype.jump=function(path){
uni.navigateTo({
url: path
})
};
//返回
Vue.prototype.back=function(obj){
uni.navigateBack(obj);
};
//跳转传参
=function(url,data){
url +=(url.indexOf('?')<0?'?':'&')+param(data)
uni.navigateTo({
url
})
};
function param(data){
let url =''
for(var k in data){
let value = data[k]!== undefined ? data[k]:''
url +='&'+ k +'='+encodeURIComponent(value)
javascript登录注册界面}
return url ? url.substring(1):''
};
//⽇期处理
Vue.prototype.dateFormat=function(time,type){
var weekDayString =''
var date =new Date(time)
var year = FullYear()
var month = Month()+1<10?'0'+(Month()+1): Month()+1 var day = Date()<10?'0'+ Date(): Date()
var hours = Hours()<10?'0'+ Hours(): Hours()
var minutes = Minutes()<10?'0'+ Minutes(): Minutes()
var seconds = Seconds()<10?'0'+ Seconds(): Seconds() var weekDay = Day()
if(weekDay ==1){
weekDayString ="星期⼀";
}else if(weekDay ==2){
weekDayString ="星期⼆";
}else if(weekDay ==3){
weekDayString ="星期三";
}else if(weekDay ==4){
weekDayString ="星期四";
}else if(weekDay ==5){
weekDayString ="星期五";
}else if(weekDay ==6){
weekDayString ="星期六";
}else if(weekDay ==7){
weekDayString ="星期⽇";
}
if(type ==1){
return year +'-'+ month +'-'+ day +' '+ hours +':'+ minutes +':'+ seconds
}else if(type ==2){
return year +'年'+ month +'⽉'+ day +'⽇  '+weekDayString
}
};
// 获取登录⽤户
UserInfo=function(){
let res = StorageSync('userInfo');
if(res){
return res
}else{
return{}
}
}
};
};
export default utils;
然后在main.js中引⼊
import utils from'./common/util.js'
...
Vue.use(utils)
⼯具类⽬录如下
2.跳转界⾯
单独传参⽅法如下
<('/pages/personal/index',{userId:this.userId, userAccount:this.userAccount})
在personal/index中可以这样接受，汉字跳转的话需要使⽤decodeURIComponent来转码才可以正常获取
onLoad(options){
this.userId = options.userId
this.userAccount =decodeURIComponent(options.userAccount)
this.queryUserInfo(this.userId)
...
},
传递对象，直接把第⼆个参数传⼀个对象过去即可
<('/pages/public/calendar_detail',this.tableOne)
总结
在吗？来尝尝uni-app上勾拳的厉害

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。