微信小程序 获取用户信息 官网例程 详解

 

//index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'diligent is the short cut',//**motto 格言的意思 这里是你要显示在下面的东西
    userInfo: {},
    hasUserInfo: false,//**获取到用户信息标志
    canIUse: wx.canIUse('button.open-type.getUserInfo')
    //* boolean wx.canIUse(string schema) 判断小程序的API，回调，参数，组件等是否在当前版本可用。
    //*string schema 使用 ${API }.${method }.${param }.${options }  方式来调用
    //*或者 ${component }.${attribute }.${option } 方式来调用 （这里用的是这个--> open-type属性为getUserInfo的button组件
  },
  //事件处理函数
  //**在组件中绑定一个事件处理函数。
  //**如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
  bindViewTap: function() {
    wx.navigateTo({
      /*wx.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。 */
      url: '../logs/logs'
    })
  },

  //**页面加载之后立即执行一段 JavaScript：//即 一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        /* app.globalData.userInfo 能获取到些啥？ */
        /* 官方文档上有详情 https://developers.weixin.qq.com/miniprogram/dev/api/open.html#wxgetuserinfoobject*/
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({//****************如果获取用户信息成功
        success: res => {
          app.globalData.userInfo = res.userInfo//******结果信息里 存入获取到的用户信息
          this.setData({//******************设置用户信息
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },

  //①function（e）传值
  //②console.log(e)查看事件传的值有哪些
  getUserInfo: function(e) {
    console.log(e)//console.log在console窗口输出信息（用于输出普通信息） 就是你编译后下面窗口显示的信息
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

<!--index.wxml-->

<!--index.wxml-->
<view class="container">
  <view class="userinfo">

<!--在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：-->
<!--当条件成立小程序页面才会渲染这个button，否则就会在页面上渲染下面的wx:else中的WXML代码--> 
<!--因为需要用户主动触发才能打开 APP，所以该功能不由 API 来调用，需要用 open-type 的值设置为 getUserInfo 的 <button> 组件的点击来触发。--> 
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 点击获取头像昵称 </button>
      
    <block wx:else>    
    <!--wx:else前面有个block标签，也很好理解，
      因为 wx:if/wx:else 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来
      由于wx:else里有2个标签（image和text），
      所以需要用block包起来做为一个整体进行渲染，所以把block理解成块级元素即可
      -->
    
    <!--在组件中绑定一个事件处理函数-->
    <!--如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数-->
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
    <!--</block>不是组件 仅仅是一个包装元素-->
  </view>

  <!--usermotto 这个类就是wxss的  但是好像没有获取到用户个性签名啊
  这个不知道什么情况。。。
  知道了，是会有弹窗的，因为需要用户授权你大爷的-->
  <view class="usermotto">

  <!--测试区-->
     <!--<button open-type="usermotto" bindgetuserinfo="usermotto"> 点击更改签名 </button>--> 
  <!--测试区-->

  <!--测试区原始数据-->
    <text class="user-motto">{{motto}}</text>
  <!--测试区原始数据-->
  
  </view>
</view>

/**index.wxss**/

/**index.wxss**/
.userinfo {
  /*用户信息的显示（也就是昵称和头像
  Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。*/
  display: flex;

  /*按列方向适应 那么你的头像和昵称 就是上下显示*/
  /*flex-direction: column;*/
  flex-direction: column;
  /*按列方向适应 那么你的头像和昵称 就是左右显示*/
  /*flex-direction: row;*/

  /*居中*/
  align-items: center;

  /*（个人添加的） 让 头像和昵称 两端对齐，项目之间的间隔都相等*/
  justify-content:  space-between;
}

/*****userinfo-avatar  是化身的意思 就是你的头像
        margin 就是页边距的意思
        写css圆形时总是直接设置border-radius为50%
          border-radius的值是百分比的话，就相当于盒子的宽度和高度的百分比
          我们知道在一个正方形内做一个面积最大的圆形，这个圆的半径就为正方形边长的一半。
          所以border-radius为50%时，则会形成圆。100%一样是实心圆，具体百度*/
.userinfo-avatar {
  width: 160rpx;
  height: 160rpx;

  /*margin 看下面.usermotto里*/
  margin: 20rpx;

  /*border-radius: 50%; 这个就是原来的圆形*/
  /*border-radius: 60px 60px 0 60px; 花瓣形状*/
  border-radius: 100%;
}

/*****userinfo-nickname  是昵称的意思
                        昵称的颜色可以百度*/
.userinfo-nickname {
  /*color: #FF88C2; 粉色*/
  color:  #551A8B;
}

/*****你要显示的格言（helloword）的上边 很奇怪 这个不应该是获取来的咩
距离上方200个像素。外边距并不是当前内容与DIV盒子的边距，而是与外面的（网页边框）的距离。
如果是padding-top:57px. 这就是内边距，与当前DIV盒子的距离*/
.usermotto {
  margin-top: 200px;
  color:  #C71585;/*这里其实也可以设置颜色*/
}

/* 照理说 应该还有用户的其他不是很重要的信息
一般的话 1.extend extend 里有.gender
*/

app.json 不好注释就来个截图吧

"enablePullDownRefresh":true,（你们自己复制添加进去，我就不多截图了）

添加这个字段的话才可以看到

这个字段的设置"backgroundColor": "#eeeeee",

原因是background需要下拉才能显示这片区域

 

"backgroundTextStyle": "light",（或者dark）

是使得下拉刷新的loading样式发生了改变，可以自行尝试

 

其余的没什么好解释的，大家可以看看。

wx.canIUse(String)

判断小程序的API，回调，参数，组件等是否在当前版本可用。
String参数说明： 使用${API}.${method}.${param}.${options}或者${component}.${attribute}.${option}方式来调用，例如：

1. *${API}代表 API 名字
2. *${method}代表调用方式，有效值为return, success, object, callback
    
3. *${param}代表参数或者返回值
4. *${options}代表参数的可选值
5. *${component}代表组件名字
6. *${attribute}代表组件属性
7. *${option}代表组件属性的可选值

这里还有一个大佬写的博客，很详细，可以多看看

https://blog.csdn.net/wlwlwlwl015/article/details/78868624