当前位置:   article > 正文

微信小程序获取用户信息_【&pqspd&]{"data":{"isencoded":1,"cutbo

【&pqspd&]{"data":{"isencoded":1,"cutbo
为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。

oh~my god!!!

开发者可使用以下方式获取或展示用户信息:


一、小程序:

1、使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。

详情参考文档:

https://developers.weixin.qq.com/miniprogram/dev/component/button.html


2、使用 open-data 展示用户基本信息。

详情参考文档:

https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html


二、小游戏:

1、使用用户信息按钮 UserInfoButton。

详情参考文档:

https://developers.weixin.qq.com/minigame/dev/document/open-api/user-info/wx.createUserInfoButton.html


2、开放数据域下的展示用户信息。

详细参考文档:

https://developers.weixin.qq.com/minigame/dev/document/open-api/data/wx.getUserInfo.html


用button来获取用户基本信息的代码如下:

  1. <view class="container">
  2. <view class="userinfo">
  3. <button wx:if="{{ !hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="onGetUserinfo"
  4. >授权登录</button>
  5. <block wx:else>
  6. <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
  7. <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  8. </block>
  9. </view>
  10. </view>
  1. /**index.wxss**/
  2. .userinfo {
  3. display: flex;
  4. flex-direction: column;
  5. align-items: center;
  6. }
  7. .userinfo-avatar {
  8. width: 128rpx;
  9. height: 128rpx;
  10. margin: 20rpx;
  11. border-radius: 50%;
  12. }
  13. .userinfo-nickname {
  14. color: #aaa;
  15. }
  16. .usermotto {
  17. margin-top: 200px;
  18. }
  1. //index.js
  2. //获取应用实例
  3. const app = getApp()
  4. Page({
  5. data: {
  6. motto: 'Hello World',
  7. userInfo: {},
  8. hasUserInfo: false,
  9. canIUse: wx.canIUse('button.open-type.getUserInfo')
  10. },
  11. //事件处理函数
  12. bindViewTap: function() {
  13. wx.navigateTo({
  14. url: '../logs/logs'
  15. })
  16. },
  17. onLoad: function () {
  18. // 查看是否授权
  19. if (app.globalData.userInfo) {
  20. this.setData({
  21. userInfo: app.globalData.userInfo,
  22. hasUserInfo: true
  23. })
  24. } else if (this.data.canIUse){
  25. // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
  26. // 所以此处加入 callback 以防止这种情况
  27. app.userInfoReadyCallback = res => {
  28. this.setData({
  29. userInfo: res.userInfo,
  30. hasUserInfo: true
  31. })
  32. }
  33. } else {
  34. // 在没有 open-type=getUserInfo 版本的兼容处理
  35. wx.getUserInfo({
  36. success: res => {
  37. app.globalData.userInfo = res.userInfo
  38. this.setData({
  39. userInfo: res.userInfo,
  40. hasUserInfo: true
  41. })
  42. }
  43. })
  44. }
  45. },
  46. onGetUserinfo: function(e) {
  47. console.log(e.detail.userInfo)
  48. if (e.detail.userInfo) {
  49. //用户按了允许授权按钮
  50. console.log("允许")
  51. console.log(e.detail.errMsg)
  52. console.log(e.detail.userInfo)
  53. console.log(e.detail.rawData)
  54. app.globalData.userInfo = e.detail.userInfo
  55. this.setData({
  56. userInfo: e.detail.userInfo,
  57. hasUserInfo: true
  58. })
  59. } else {
  60. //用户按了拒绝按钮
  61. console.log("拒绝")
  62. }
  63. }
  64. })


声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/99922?site
推荐阅读
相关标签
  

闽ICP备14008679号