在“我的”页面里获取用户信息
显示用户的头像和昵称
页面布局代码如下

  1. <view>
  2. <view class='banner'>
  3. <view class="userinfo">
  4. <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo=
  5. "getUserInfo"> 获取头像昵称 </button>
  6. <block wx:else>
  7. <image bindTap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}"
  8. background-size="cover"></image>
  9. <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  10. </block>
  11. </view>
  12. </view>
  13. <view class="page__bd">
  14. <view class="weui-panel__ft">
  15. <view class="weui-cell weui-cell_access">
  16. <view class="weui-cell__bd">我的收藏</view>
  17. <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  18. </view>
  19. </view>
  20. <view class="weui-panel__ft">
  21. <view class="weui-cell weui-cell_access">
  22. <view class="weui-cell__bd">查看更多</view>
  23. <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  24. </view>
  25. </view>
  26. </view>
  27. </view>

在index.js里获取用户信息,代码如下

  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. onLoad: function () {
  12. if (app.globalData.userInfo) {
  13. this.setData({
  14. userInfo: app.globalData.userInfo,
  15. hasUserInfo: true
  16. })
  17. } else if (this.data.canIUse) {
  18. // 由于 getUserInfo 是网络请求,可能在 Page.onLoad 之后才返回
  19. // 所以此处加入 callback,以防止这种情况
  20. app.userInfoReadyCallback = res => {
  21. this.setData({
  22. userInfo: res.userInfo,
  23. hasUserInfo: true
  24. })
  25. }
  26. } else {
  27. // 没有 open-type=getUserInfo 版本的兼容处理
  28. wx.getUserInfo({
  29. success: res => {
  30. app.globalData.userInfo = res.userInfo
  31. this.setData({
  32. userInfo: res.userInfo,
  33. hasUserInfo: true
  34. })
  35. }
  36. })
  37. }
  38. },
  39. getUserInfo: function (e) {
  40. console.log(e)
  41. app.globalData.userInfo = e.detail.userInfo
  42. this.setData({
  43. userInfo: e.detail.userInfo,
  44. hasUserInfo: true
  45. })
  46. }
  47. })