5.1 获取用户的基本信息

并且 在 这个版本的时候，只允许 每次 进入 小程序 点击 授权。而不允许 像以前那样 自动授权了。

// pages/index/index.js
Page({
    

  /** * 页面的初始数据 */
  data: {
    
    msg:"XiaoBlack",
    userInfo:{
    }
  },

  handleGetUser(){
    
    wx.getUserProfile({
    
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
    
        this.setData({
    
          userInfo: res.userInfo
        })
      }
    })
  },

  navigateToLog(){
    
    wx.navigateTo({
    
      url: '/pages/log/log',
    })
  },

  fatherText(){
    
    console.log("文本框 view 被点击了！");
  },

  childText(){
    
    console.log("Hello World 文本被点击了！");
  },

  /** * 生命周期函数--监听页面加载 */
  onLoad(options) {
    
//debugger;
    this.setData({
    
      msg:"MuQuanyu"
    });
    console.log(this.data.msg);
  },

  /** * 生命周期函数--监听页面初次渲染完成 */
  onReady() {
    

  },

  /** * 生命周期函数--监听页面显示 */
  onShow() {
    

  },

  /** * 生命周期函数--监听页面隐藏 */
  onHide() {
    

  },

  /** * 生命周期函数--监听页面卸载 */
  onUnload() {
    

  },

  /** * 页面相关事件处理函数--监听用户下拉动作 */
  onPullDownRefresh() {
    

  },

  /** * 页面上拉触底事件的处理函数 */
  onReachBottom() {
    

  },

  /** * 用户点击右上角分享 */
  onShareAppMessage() {
    

  }
})

<view class="mainContext">
  <image class="img" src="{
     {userInfo.avatarUrl}}"></image>
  <button bindtap="handleGetUser">获取用户基本信息</button>
  <text class="textA">{
   {userInfo.nickName}}</text>
<!-- <view class="showText" catchtap="fatherText"> <text catchtap="childText">Hello World</text> </view>--> 

  <view class="showText" catchtap="navigateToLog">
    <text>Hello World</text>
  </view>

</view>

wx:if：当条件成立后，所属标签 会显示！

wx:else：当条件失败后，所属标签 会不显示！

<view class="mainContext">
  <image wx:if="{
     {userInfo.avatarUrl}}" class="img" src="{
     {userInfo.avatarUrl}}"></image>
  <button wx:else="{
     {userInfo.avatarUrl}}" bindtap="handleGetUser">获取用户基本信息</button>
  <text class="textA">{
   {userInfo.nickName}}</text>
<!-- <view class="showText" catchtap="fatherText"> <text catchtap="childText">Hello World</text> </view>--> 

  <view class="showText" catchtap="navigateToLog">
    <text>Hello World</text>
  </view>
</view>

这样的话，我们 只要 获取到 数据了，那么 就不再 显示 这个 按钮了。

当然 我们说 也可以 上下文 自动匹配一对。也就是 当出现了 wx:if 后 下面的 wx:else 就会跟它 自动匹配。我们不需要 输入 什么条件。

<view class="mainContext">
  <image wx:if="{
     {userInfo.avatarUrl}}" class="img" src="{
     {userInfo.avatarUrl}}"></image>
  <button wx:else bindtap="handleGetUser">获取用户基本信息</button>
  <text class="textA">{
   {userInfo.nickName}}</text>
<!-- <view class="showText" catchtap="fatherText"> <text catchtap="childText">Hello World</text> </view>--> 

  <view class="showText" catchtap="navigateToLog">
    <text>Hello World</text>
  </view>

</view>