微信小程序入门之授权登录

微信小程序

一.实现微信小程序授权登录
微信小程序每次获得用户的信息时需要授权登录,下面的代码可以实现以下功能

Page({  data: {    nickName:''  },  dianji(){       console.log("点击了按按钮")    wx.getUserProfile({       desc: '获取用户的信息',//获取用户的信息       success:res => {//用户成功授权        console.log("成功",res)        this.setData({          nickName:res.userInfo.nickName,          touxian:res.userInfo.avatarUrl        })    },    fail:res=>{      console.log("失败",res)    }  })}})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

结果：

使得登录后可以隐藏点击按钮：
在js文件里面增加以下代码

Page({  data: {   userInfo:""  },  dianji(){       console.log("点击了按按钮")    wx.getUserProfile({       desc: '获取用户的信息',       success:res => {         let user=res.userInfo        console.log("成功",res)        this.setData({          userInfo:user           })    },    fail:res=>{      console.log("失败",res)    }  })}})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在wxml里面的代码：

<button wx:if="{{!userInfo}}"   bindtap="dianji" >点击</button><view wx：else >     <image   src="{{userInfo.avatarUrl}}"></image>     <text>{{userInfo.nickName}}</text></view>
1
2
3
4
5

理解：
设定条件，由于一开始userInfo为空，所以执行button命令，点击授权之后，userInfo获得了数据所以执行里面的内容。
退出点击按钮的操作：
在之前的代码下面增加一段，同时也要在wxml里面增加相应的操作
js：

 tui(){   this.setData({    userInfo:""   }) }
1
2
3
4
5

wxml：

  <button bindtap="tui" >退出登录</button>
1

二.对登录的信息进行缓存
用户在使用微信小程序时，可能需要对用户以前提交的信息进行保存，方便用户的操作，所以对用户登录的信息进行缓存十分重要。
主要是使用了微信小程序里面的这一端代码：
wx.setStorageSync(‘参数1’, 参数2)
上面的参数1其实就是相对与一个用来保存参数2里面内容的地方，可以在微信开发者里面看到缓存的内容：

同时得到保存地方的内容可以用以下代码：
wx.getStorageSync(‘参数1’)

具体实现：

Page({  data: {   userInfo:""  },  onLoad(){    let user=wx.getStorageSync('user1')    console.log("1",user)    this.setData({      userInfo:user    })  },  dianji(){    console.log("点击了按按钮")    wx.getUserProfile({       desc: '获取用户的信息',       success:res => {         let user=res.userInfo         wx.setStorageSync('user1', user)        console.log("成功",res)        this.setData({          userInfo:user           })    },    fail:res=>{      console.log("失败",res)    }  })}, tui(){   this.setData({    userInfo:""   })   wx.setStorageSync('user1', null) }})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

结果就是每次进入小程序可以保存用户的相关信息，不用总是点击登录输入相关的信息