uni |
您所在的位置：网站首页 › uniapp后端用什么技术 › uni |
uni
|
uni-app访问java后端登录，携带参数跳转界面
前言一、访问后端1.request.js2.访问3.获取信息
二、带参跳转1.utils2.跳转界面
总结
前言
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('?') 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 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)工具类目录如下
单独传参方法如下 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) 总结在吗？来尝尝uni-app上勾拳的厉害 |
【本文地址】
今日新闻 |
推荐新闻 |