uni-app访问java后端登录，携带参数跳转界面

---

前言

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序多个平台。可以作为前端来访问我们的java/python后端

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、访问后端

1.request.js

这里我们来建立一个js文件，我们可以利用request方法来访问后端接口，这里使用uni自己的request方法来访问

const baseUrl = 'http://localhost:8089'
const request = (url = '', date = {}, type = 'GET', header = {}) => {
	return new Promise((resolve, reject) => {
		uni.request({
			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: res.message,
				icon: 'none',
			    duration: 2000
			});
		}
	});
}

在request方法中参数分别是，url，数据，请求方式，请求头。如果不需要传数据那么{}就可以了，默认请求方式是GET

3.获取信息

如果想获取就直接从storage中取就可以了，可以在进入个人中心onLoad函数中获取

onLoad() {
	let self = this
	uni.getStorage({
	    key: 'userInfo',
	    success: function (res) {
	        console.log(res)
			self.userInfo = res.data
	    }
	});
},

也可以把获取方法写入工具类中，没有的话返回{}

// 获取登录用户
Vue.prototype.getUserInfo = function() {
	let res = uni.getStorageSync('userInfo');
	if (res) {
		return res
	} else {
		return {}
	}
};

二、带参跳转

1.utils

单独写一个utils方法，也可以在此方法中写入一些日期处理，信息加密的方法

var utils = {};
//公共处理方法
utils.install = function(Vue, option) {
  //页面跳转
  Vue.prototype.jump = function(path) {
    uni.navigateTo({
    	url: path
    })
  };
  //返回
  Vue.prototype.back = function(obj) {
	uni.navigateBack(obj);
  };
  //跳转传参
  Vue.prototype.togo = 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)
    }
    return url ? url.substring(1) : ''
  };
  //日期处理
  Vue.prototype.dateFormat = function(time,type) {
	  var weekDayString = ''
	  var date = new Date(time)
	  var year = date.getFullYear()
	  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
	  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
	  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
	  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
	  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
	  var weekDay = date.getDay()
	  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
	  }
    };
	// 获取登录用户
	Vue.prototype.getUserInfo = function() {
		let res = uni.getStorageSync('userInfo');
		if (res) {
			return res
		} else {
			return {}
		}
	};
};

export default utils;

然后在main.js中引入

import utils from './common/util.js'
...

Vue.use(utils)

工具类目录如下

2.跳转界面

单独传参方法如下

this.togo('/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)
	...
},

传递对象，直接把第二个参数传一个对象过去即可

this.togo('/pages/public/calendar_detail', this.tableOne)

---

总结

当然也可以使用云函数的方式，可以看 云函数简单操作

文章内代码可能不是最新的，所以这里也贴上了 源码