微信小程序授权登录（有弹窗提示）

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-width 设置到了一个声明中。这些属性描述了元素的下边框样式。 */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('open-data.type.userAvatarUrl') // 如需尝试获取用户信息可改为false},onLoad: function () {}, //页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。getUI(e) { //点击授权登录时产生的监听事件var t = this // 定义 变量 t var 可以定义全局变量 let 定义局部变量console.log('获取头像昵称', e) // console.log 打印输出wx.getUserProfile({ //获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo,用于替换 wx.getUserInfolang: 'zh_CN', //显示用户信息的语言desc: '用于在后台更好的识别您的身份', //声明获取用户个人信息后的用途success(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 的优先级高于 iconicon: "success", //显示成功图标，此时 title 文本最多显示 7 个汉字长度title: '欢迎使用本小程序',duration: 1000, //提示的延迟时间 为1s 1000ms=1s});},fail(err) { //接口调用失败的回调函数 用户拒绝授权登录后，出现的提示窗console.error(err) //打印输出错误数据console.error("123")wx.showToast({ // 拒绝登录 显示消息提示框 image: "/static/image/error.png",title: '用户拒绝授权', // 提示用户：'用户拒绝授权'icon: "error",duration: 1000 // 提示语出现时间延迟1s});}})},onShow() { //页面显示或从后台跳回小程序时显示此页面时触发，从跳转页面返回时触发，不能传递参数this.setData({userInfo: wx.getStorageSync('userInfo') // 更新存储里面的 key ：userInfo})},getUserProfile() {wx.getUserProfile({desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {this.setData({// 更新数据和给字段赋值avatarUrl: res.userInfo.avatarUrl,// 更新用户图像列表userInfo: res.userInfo,// 更新用户列表列表信息hasUserInfo: true,})}})},onGetUserInfo: function (e) {if (!this.data.logged && e.detail.userInfo) {this.setData({logged: true,avatarUrl: e.detail.userInfo.avatarUrl,userInfo: e.detail.userInfo,hasUserInfo: true,})}},
})

不足之处还望指教!

微信小程序授权登录页面（有提示窗）相关推荐

微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
SpringBoot微信小程序授权登录
SpringBoot微信小程序授权登录一.appId 1.1.自己是管理者:微信公众平台,申请或登录自己的微信小程序,在开发者管理中即可看到 2.2.自己是开发者:让管理员将自己加入到小程序开发者管 ...
微信小程序授权登录取消授权重新授权处理方法附可用代码
微信小程序授权登录基本是小程序的标配了,但是官方的demo,取消授权后,就不能再重新点击登录,除非重新加载小程序才可以,这下怎么办? 我们可以先在首页引导用户点击,然后跳转到一个新的页面,在新的页面进 ...
新版微信小程序授权登录流程及问题汇总（getUserProfile）
问题来源:前不久去面试的时候有面试官问我你有自己的博客啥的吗?只能很尴尬的说没有.其实一直想有一个属于自己的博客啥的去记录自己在开发过程中遇到的问题,正好现在微信小程序比较流行,就花了两天自己搞了一个 ...
微信小程序授权登录界面
微信小程序授权登录界面原先用的 wx.getUserInfo(Object object) ,现已改革现用的 wx.getUserProfile(Object object),获取用户信息.每次请 ...
微信小程序授权登录+获取手机号
微信小程序授权登录+获取手机号一.官方文档背景: 小程序登录的链接: 微信小程序获取手机号的链接: 二.微信小程序授权登录+获取手机号 1.简单说明官方文档的操作:先授权登录后拿手机号 2.前端代码 ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
SpringCloud 微信小程序授权登录获取openId SessionKey【SpringCloud系列13】
SpringCloud 大型系列课程正在制作中,欢迎大家关注与提意见. 自我提升方法推荐:神奇的早起早上 5:00 -5:20 起床刷牙 5:30-6:00 晨练(跑步.跳绳.骑自行车.打球等等) ...
微信小程序授权登录第一次总是失败，第二次登录便正常了
微信小程序授权登录第一次总是失败,第二次登录便正常了错误流程调用用户点击授权用户信息按钮 ===> 调用wx.login( )生成code发送给后台生成session_key解密 ===& ...

微信小程序授权登录页面（有提示窗）

微信小程序授权登录（有弹窗提示）

1 效果显示

1.1 授权登录页面

1.2 授权登录提示弹窗

1.3 拒绝授权登录

1.4 允许登录后，跳转到小程序首页

2 代码

2.1 wxml 文件

2.2 wxss 文件

2.3 js 文件

不足之处还望指教!

微信小程序授权登录页面（有提示窗）相关推荐

最新文章

热门文章