这也是我第一次完完整整的肚子写完一个微信小程序,首先我觉得有必要总结的就是request请求要注意的小坑。一般request都要求携带token,所以先从获取token写起:
- 获取token:直接上代码
bindGetUserInfo: function (e) {
-
var that=this
if (that.data.userName.length == 0 || that.data.userpwd.length == 0) {
wx.showToast({
title: '账号或密码不能为空',
icon: 'none',
duration: 2000
})
} else {
wx.login({ //这一步先获取code
success: function (res) {
that.setData({
code:res.code
})
console.log("code是:"+that.data.code)
wx.request({
url: 'http://47.101.166.67:8080/login',
header: { 'Content-Type': 'application/json','code': res.code},//将获取的code放在request消息头中,这一步主要用于请求服务器以获取token
//根据自己的API文档对data数据进行编写
data: {
userName:that.data.userName,
userPwd:that.data.userpwd
},
method:'POST',
success: function (res) {//获取成功,返回的res中会带token,将数据打印出来,准确查看token在哪个数组里面。
console.log("成功");
that.setData({
resmsg:res,
token:res.data.data.token,
code:res.data.data.code
})
console.log(that.data.resmsg)
//登陆成功后跳转
if(res.statusCode==200){
if(res.data.code==2000){
wx.getStorage({
key: 'token',
success:function(res){
that.setData({
token1:res.data
})
}
})
if(that.data.token1.length>0){wx.removeStorage({
key: 'token',
})
wx.setStorage({//缓存token
data: that.data.token,
key: 'token',
success:function(res){
console.log("数据缓存成功"+that.data.token)
}
})
wx.setStorageSync('token', that.data.token)
}else{
wx.setStorage({//缓存token
data: that.data.token,
key: 'token',
success:function(res){
console.log("数据缓存成功"+that.data.token)
}
})
}
setTimeout(function(){
wx.switchTab({
url:'../../pages/first/first',
})
},1500)
}else{
wx.showToast({
title:'登陆失败',
icon:'none',
duration:2000
})
}
}else{
wx.showToast({
title:'网络错误',
icon:'none',
duration:2000
})
}
}
})
}
})
}
},
2.获取token后,如何运用token(此次代码是我用来获取定位数据的)
onReady: function () {
var that = this
//查询最后一次定位
var marker=[]
let header = {}//定义一个变量存放request消息头的数据
let token = wx.getStorageSync('token')//在上一步的获取token中,我将token放入了缓存中
header['token'] = token;//定义变量header中的token的值为获取的token值
wx.request({
url: 'http://47.101.166.67:8080/api/position/9516637909',
data: {
deviceId:'9516637909',
},
header: header,//将定义的局部变量赋值给header
method:'GET',
success:function(res) {
console.log("消息token"+token)
marker.push({
id: Number(res.data.data.deviceId),
iconPath: 'dingwei.png',
latitude: Number(res.data.data.latitude),
longitude: parseFloat(res.data.data.longitude),
title:res.data.data.address,
width: 30,
height: 30,
})
that.setData({
marker:marker,
lo2:parseFloat(res.data.data.longitude),
la2:Number(res.data.data.latitude)
})
console.log("获取的设备数据",res)
},
fail(res){
wx.showToast({
title: that.data.resmsg,
icon: 'none',
duration: 2000
})
wx.navigateTo({
url: '../../pages/log/log',
})
console.log("获取失败")}
})
},
这样定义token的原因是:token有时效性,过了一段时间就失效,所以在前端需要在登陆的时候随时更新。以上是最简易的代码,当然熟悉了整个过程后,可以将整个登陆过程和请求过程封装成一个方法,直接在需要的页面引用即可。