[微信小程序开发]静态实例转动态实例

图一只是一个静态页面，微信上的用户信息可以做一个获取用户信息按钮，获取到真正的用户信息。在index.wxml里面写上button按钮，button里面有一个属性是open-type对应微信开放能力，open-type的合法值有一个是getUserInfo代表获取用户信息，可以从bindgetuserinfo回调中获取到用户信息。所以给这个button绑定这个bindgetuserinfo事件，给它一个事件处理函数handleGetUserInfo。

静态图片

可以通过获取用户信息button获得信息的动态图片

获取用户信息

  handleGetUserInfo(res){
    console.log(res)
  },

这个函数定义好之后，如果点击获取用户信息的按钮，会有下图中的弹窗，不管是点击拒绝还是点击允许，都会注入一个实参res，我们需要根据res来判断用户到底点击的是拒绝还是允许。

点击后出现弹窗

res输出不同内容

如果允许，需要在data里面初始化一个userInfo，然后用setData把data里面的空的userInfo设置一下，这个时候只是在后台拿到数据，还需要显示到页面中。

  handleGetUserInfo(res){
    console.log(res)
    if (res.detail.userInfo){
      this.setData({
        userInfo: res.detail.userInfo
      })
    }
  },

只需要把index.wxml中的页面代码修改如下，图像和用户名都从userInfo里面获取到。

{{userInfo.nickName}}

这个时候再次登录，页面上会不再显示用户信息，这是因为每次重新编译代码，userInfo都会进行初始化为0，而正确的情况应该是，用户第一次登录选择授权，第二次登录会正确显示用户登录信息。这个时候需要用到wx.getUseInfo这个api，它在调用前需要用户授权，否则会打印失败，这样第一次编译授权后，第二次编译页面就会自动出现用户信息。

    wx.getUserInfo({
      success:(res)=>{
        console.log(res)第二次登录的时候res里面就会有userinfo，
		this.setData({
          userInfo: res.userInfo
        })把这个数据更新到userInfo里去
      },
      fail: (err)=>{
        console.log(err)
      }
    })