E企盈营销工具技术服务商 热线:4006-838-530

微信小程序~新版授权用户登录例子

E企盈直播平台营销卖货系统

要实现的效果在用户进入个人中心,直接弹出获取用户信息弹窗以前能够直接弹出授权弹窗现在需要点击一个按钮后才弹出授权弹出显示圆形的用户头像如何获取用户信息?官方文档链接授权弹窗官方获取用户信息文档调整为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。正式版暂不受影响。也就是以前的 wx.getUserInfo 不直接弹出授权窗口了,而且在新版中调用会直接返回fail,现在的做法呢就是通过点击一个button 去实现用户授权功能。通过点击按钮去授权这也是大部分开发者不愿接受的,毕竟在页面中添加一个按钮太不和谐了,但是在微信的地盘,还是得按着人家的套路走。文档中说明了有两种方式能够获取用户信息一个是利用 open-data获取公开的用户信息open-data type=”userNickName” lang=”zh_CN”/open-dataopen-data type=”userAvatarUrl”/open-dataopen-data type=”userGender” lang=”zh_CN”/open-data另一个是利用button 组件将 open-type 指定为 getUserInfo 类型  !– 需要使用 button 来授权登录 —  button wx:if=”{{canIUse}}” open-type=”getUserInfo” bindgetuserinfo=”bindGetUserInfo”授权登录/button  view wx:else请升级微信版本/viewPage({  data: {    canIUse: wx.canIUse(‘button.open-type.getUserInfo’)  },  onLoad: function() {    // 查看是否授权    wx.getSetting({      success (res){        if (res.authSetting[‘scope.userInfo’]) {          // 已经授权,可以直接调用 getUserInfo 获取头像昵称          wx.getUserInfo({            success: function(res) {              console.log(res.userInfo)            }          })        }      }    })  },  bindGetUserInfo (e) {  // 获取到用户信息    console.log(e.detail.userInfo)  }}) open-data 中实现圆形头像直接贴代码了view class=’amountBg’  view class=’img’    open-data type=”userAvatarUrl”/open-data  /view  view class=’account’    view class=’nick-name’      open-data type=”userNickName” lang=”zh_CN”/open-data    /view    view class=’address’      open-data type=”userCountry” lang=”zh_CN”/open-data·      open-data type=”userProvince” lang=”zh_CN”/open-data·      open-data type=”userCity” lang=”zh_CN”/open-data    /view  /view/viewcss 样式如下:.amountBg {  display: flex;  flex-direction: row;  height: 100px;  background-color: #5495e6;  align-items: center;}.img {  overflow: hidden;  display: block;  margin-left: 20px;  width: 49px;  height: 49px;  border-radius: 50%;}.account {  width: 70%;  color: #fff;  margin-left: 10px;  align-items: center;}.nick-name{  font-family: ‘Mcrosoft Yahei’;  font-size: 16px;}.address{  font-size: 13px;}.nav {  width: 15px;  color: #fff;}参考CSS display 属性CSS overflow 属性

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序~新版授权用户登录例子
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏