⼩程序授权登录页⾯（有提⽰窗）⼩程序授权登录（有弹窗提⽰）
1 效果显⽰
1.1 授权登录页⾯
1.2 授权登录提⽰弹窗
1.3 拒绝授权登录
1.4 允许登录后，跳转到⼩程序⾸页
2 代码
2.1 wxml ⽂件
<view class='header'>
<image src="{{userInfo.avatarUrl}}"></image><!--⽤户头像-->
</view>
<view>
<button class="bottom" bindtap="getUI"type='primary'>授权登录</button><!--授权登录按钮--> </view>
<!-- type='primary' 默认按钮为蓝⾊--><!--授权登录为按钮内容-->
2.2 wxss ⽂件
/* pages/userInfo/userInfo.wxss */
.header {/*样式⽂件配置 */
margin: 90rpx 0 90rpx 50rpx;/*margin 属性为给定元素设置所有四个（上下左右）⽅向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写 */
border-bottom: 1px solid rgb(11,165,88);/* border-bottom 简写属性把下边框的所有属性：border-bottom-color，border-bottom-style 与 border-bottom-wi dth 设置到了⼀个声明中。这些属性描述了元素的下边框样式。 */
text-align: center;
width: 650rpx;
height: 300rpx;
line-height: 450rpx;
margin-top: 120px;
}
.header image {
width: 185rpx;
height: 185rpx;
border-radius:50%;/* 图⽚圆⾓为50 */
margin-right: 20rpx;
background-color: #f8f8f8;
}
.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}
2.3 js ⽂件
Page({
data:{
avatarUrl: './user-unlogin.png',// 未登录时的状态图⽚
userInfo:{},// 存储⽤户信息列表
hasUserInfo:false,
logged:false,
takeSession:false,
requestResult: '',// 请求结果
canIUseGetUserProfile:false,
canIUseOpenData: wx.canIUse('pe.userAvatarUrl')// 如需尝试获取⽤户信息可改为false
},
onLoad: function (){},//页⾯加载时触发。⼀个页⾯只会调⽤⼀次，可以在 onLoad 的参数中获取打开当前页⾯路径中的参数。
getUI(e){//点击授权登录时产⽣的监听事件
var t =this// 定义变量 t var 可以定义全局变量 let 定义局部变量
console.log('获取头像昵称', e)// console.log 打印输出
lang: 'zh_CN',//显⽰⽤户信息的语⾔
desc: '⽤于在后台更好的识别您的⾝份',//声明获取⽤户个⼈信息后的⽤途
htmlbordersuccess(res){//接⼝调⽤成功的回调函数
console.log('获取', res)
wx.setStorageSync('userInfo', res.userInfo);// userInfo 本地缓存指定的 key  res.userInfo 需要存储的数据
// wx.setStorageSync('userInfo', res.userInfo); 第⼀个参数为本地缓存指定的 key
// 第⼆个参数为 res.userInfo 为要需要存储的数据信息这⾥要把 res.userInfo 获取到的⽤户信息列表，存储在userInfo 列表⾥⾯
t.setData({//对 userInfo 进⾏数据更改，赋值
userInfo: res.userInfo,//把获取到的数据列表赋值给 userInfo 改变⾥⾯的数据
avatarUrl: res.userInfo.avatarUrl //把头像地址赋值给 avatarUrl
}),
wx.switchTab({//跳转到 tabBar 页⾯，并关闭其他所有⾮ tabBar 页⾯就是⾸页
//⽤户授权成功后就要跳转到⾸页导航栏
url:"/pages/index/index",
});// 进⼊到⾸页后，出现消息提⽰窗，提⽰⽤户:'欢迎使⽤本⼩程序'的提⽰语
wx.showToast({//显⽰消息提⽰框
image:"/static/image/success.png",//⾃定义图标的本地路径，image 的优先级⾼于 icon
icon:"success",//显⽰成功图标，此时 title ⽂本最多显⽰ 7 个汉字长度
title: '欢迎使⽤本⼩程序',
duration:1000,//提⽰的延迟时间为1s 1000ms=1s

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。