mpvue 用户授权登录

1、button按钮添加属性open-type='getUserInfo'2、button绑定事件监听@getuserinfo="回调"3、回调的第一个参数即为登录信息x.mp.detail.userInfo;4、生命周期函数中判断是否已授权登录第一次授权后,再次编译时,数据将不再显示,且不再弹出授权窗口,使用如下方法,将授权后的信息显示wx.getUserInfo({success:(res)=>{res.userInfo;  已授权后的数据},fail:(res)=>{console.log('还未授权');}})

代码示例:

<template><div><div class='header'><img :src="userInfo.avatarUrl?userInfo.avatarUrl:'/static/tabs/7.png'" alt=""><button size='mini' open-type='getUserInfo' @getuserinfo="bindGetUserInfo" >{{userInfo.nickName?userInfo.nickName:'登录'}}</button></div><div class='cardlist'><div class='card'><span>扫码看书</span><span>></span></div></div></div>
</template><script>export default{data(){return{userInfo:[]}},methods:{bindGetUserInfo(e){console.log(e);//判断是否允许if(e.mp.detail.userInfo){this.userInfo=e.mp.detail.userInfo;}}},mounted(){wx.getUserInfo({success:(res)=>{console.log(res);this.userInfo=res.userInfo;},fail:(res)=>{console.log(res);console.log('还未授权');}})}}
</script><style>.header{padding: 40rpx;background-color: #02A774;}.header>img{width: 100rpx;height: 100rpx;vertical-align: middle;border-radius: 50rpx;}.header>button{vertical-align: middle;margin-left: 40rpx;max-width: 200rpx;}.card{display: flex;justify-content: space-between;width: 94%;height: 60rpx;line-height: 60rpx;margin:10rpx auto;border:solid 1px #eee;padding: 10rpx;}
</style>

mpvue 用户授权登录相关推荐

微信公众号用户授权登录逻辑
我们知道,微信开发离不开openid(为了识别用户,每个用户针对每个公众号会产生一个安全的openid).而通常我们获取openid,以及获取用户的基本信息是通过用户授权的方式进行获取.那么ok,怎样 ...
基于 Pyjwt 的 Flask 用户授权登录
一个比较简单清晰的demo:https://github.com/yaoyonstudio/flask-pyjwt-auth 中文可以参考这篇博客对demo的描述:https://blog.csdn. ...
微信小程序云开发用户身份登录_微信小程序开发用户授权登录(下)
如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用.网站应用和公众帐号(包括小程序),用户的 Un ...
微信小程序：用户授权登录
点击"微信一键登录"按钮,触发login_weixi事件先查看是否勾选了底部按钮,勾选了就获取用户信息,每次请求成功都会弹出授权窗口,把用户信息缓存到storage里面,方便下次 ...
微信小程序案例 | 微信用户授权登录，无需cookie
首先,先看一下效果图: 这里,微信用户可以通过授权,进行登录功能的主要实现,是通过wx.getUserProfile()这个API wx.getUserProfile()会获取用户的信息,然后我们可 ...
企业微信小程序_授权登录接口获取用户userid
文章目录一.前置知识 1. 阅读企业微信小程序开发文档 2. 企业微信小程序登录流程 3. 微信小程序区别二.前端部分 2.1. 调用登录接口 2.2. 请求后端接口 2.3. 项目源码三.后 ...
【Android应用开发详解】第01期：第三方授权认证（一）实现第三方授权登录、分享以及获取用户资料
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9057257 由于公司项目的需要,要实现在项目中使用第三方授权登录以及分享文字 ...
MySQL基本用户授权步骤
1.MySQL用户授权步骤: select distinct concat('user: ''',user,'''@''',host,''';') as query from mysql.user; ...
uni-app 微信小程序授权登录
文章目录一.appID相关申请和配置 1. appid获取方式 2. appID配置二.获取用户基础数据 2.1. 获取用户信息 2.2. 获取用户信息2 三.调用登录api 3.1. 登录api ...
小程序授权登录的体验优化
小程序授权登录的体验优化大多数小程序的登录,都是这样设计的: 进来就提示你需要授权,有部分人可能就会点"拒绝"(拒绝的比例可能超出我们的预估) 然后在后续操作的时候,就进行不下去 ...

mpvue 用户授权登录

mpvue 用户授权登录相关推荐

最新文章

热门文章