⼩程序云开发-登录功能（授权登录）
⼀、创建页⾯load
创建页⾯load
⼆、需求说明
登录之前，【我的】头像和⽂字显⽰为默认显⽰。授权登录成功之后，【我的】头像和⽂字分别获取头像和名字。
三、代码实现（授权登录页⾯）
1、load.wxml
钢筋今日价格一览表1<view class="loadType">
2<button type="primary" bindtap="loadByWechat">授权登录</button>
3<button type="primary" plain="true" bindtap="loadByPhone">⼿机号码登录</button>
4<button type="primary" plain="true" bindtap="loadByAccount">账号密码登录</button>
5</view>
2、load.wxss
1.loadType{
2 margin-top: 800rpx;
3 }
4button{
5 margin-top: 20rpx;
6 }
3、load.js
授权登录获取⽤户信息（wx.getUserProfile函数）
携带⽤户登录头像和名字跳转到tab页⾯（wx.reLaunch函数）
将获取的⽤户信息保存到缓存中（wx.setStorageSync函数）
1 Page({
java程序员工资待遇2
3//授权登录
4 loadByWechat(){
5 wx.getUserProfile({
6 desc: '⽤户完善会员资料',
7 })
8 .then(res=>{
9 console.log("⽤户允许了授权登录",res.userInfo);
10//注意：此时不能使⽤ wx.switchTab，不⽀持参数传递
11 wx.reLaunch({
12//将头像和名称传递给【我的】页⾯
13 url: '/pages/me/me?nickName='+res.userInfo.nickName+'&avatarUrl='+res.userInfo.avatarUrl,
14 })
15//保存⽤户登录信息到缓存
16 wx.setStorageSync('userInfo', res.userInfo)
17 })
18 .catch(err=>{
19 console.log("⽤户拒绝了授权登录",err);
20 })
qq消息密码忘记了怎么办21 },
22
23//跳转到⼿机号码登录页
24 loadByPhone(){
菠萝蜜去粘液一区25 wx.navigateTo({
26 url: '/pages/loadByPhone/loadByPhone',
27 })
28 },
29
30//跳转到账号密码登录页
31 loadByAccount(){
32 wx.navigateTo({
33 url: '/pages/loadByAccount/loadByAccount',
34 })
35 },
36
37 })
四、代码实现（我的页⾯）
1、me.wxml
1<!--未登录-->
2<view class="load" wx:if="{{!loginOk}}">
3<image src="../../images/我的.png" bindtap="load"></image>
4<text class="clickload" bindtap="load">点击登录</text>
5</view>
6<!--已登录-->
7<view wx:else>
8<view class="load">
9<image src="{{avatarUrl}}"></image>
10<text class="clickload">{{nickName}}</text>
11</view>
12<button class="exit" bindtap="exit" type="primary">退出登录</button>
13</view>
2、me.wxss
1.load{
2 background-color:#04BE02;
3 width: 100%;
4 height: 400rpx;
5/*设置图⽚和⽂字垂直居中对齐*/
6 display: flex;
省份简称7 flex-direction: column;
8 justify-content: center;
9 align-items: center;
10 }
11
12.load image{
13 width: 200rpx;
14 height: 200rpx;
15 border-radius: 50%;
16 }
17.load text{
18 color:white;
19 }
21 width: 95%;
22 margin-top: 40rpx;
23 }
3、me.js
onLoad：页⾯加载的时候，获取load页⾯传过来的头像和名字onShow：根据缓存数据，来控制已登录/未登录的页⾯切换显⽰
退出登录后，清空⽤户信息的缓存数据
1 Page({
2
3/**
4 * 页⾯的初始数据
5*/
6 data: {
7 loginOk:true,
8 nickName:"",
9 avatarUrl:"",
10 },
11
12//页⾯加载的时候，将load页⾯传过来的值获取过来
13 onLoad: function (options) {
14 console.log("这⾥的options",options);
15this.setData({
16 nickName:options.nickName,
17 avatarUrl:options.avatarUrl
18 })
19 },
20
21//⼩程序声明周期的可见性函数⾥⾯来控制显⽰
22 onShow(){
23 let userInfo = wx.getStorageSync('userInfo')
24 console.log("我的缓存信息",userInfo);
25if(userInfo){
26this.setData({
27 loginOk:true,
28 nickName:userInfo.nickName, //从缓存中拿数据
29 avatarUrl:userInfo.avatarUrl
30 })
会计初级报名条件
31 }else{
32this.setData({
33 loginOk:false
34 })
35 }
36 },
37
38//点击登录
39 load(){
40 wx.navigateTo({
41 url: '/pages/load/load',
42 })
43 },
44
45//退出登录
46 exit(){
47 wx.showModal({
48 content:"确定退出吗"
49 }).then(res=>{
firm){
51 console.log("⽤户点击了确定"); 52this.setData({
53 loginOk:false
54 })
55//清空登录的缓存
56 wx.setStorageSync('userInfo', null)
57 }else if(res.cancel){
58 console.log("⽤户点击了取消");
59 }
60 })
61 },
62
63 })
五、效果展⽰
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论