小程序02——对简单小程序源代码进行详细分析——me页面

#本文章仅用于记录本人学习过程，当作笔记来用，如有侵权请及时告知，谢谢！

me页面有四个文件

接下来我们一个一个文件分析：
首先是me.js:

Page({
  data:{ //定义一个data方法
    userinfo:{},//创建一个userinfo变量来储存信息
    openid:"" //用来保存云函数获取到的openid信息
  },
  onGotUserInfo:function(e){ //使用onGotUserinfo方法获取用户信息，与wxml中的bindgetuserinfo="onGotUserInfo"对应
    const that = this //将this保存至that中，防止不生效
    wx.cloud.callFunction({ //调用云函数
      name:"login", //云函数名字是login
      success:res=>{ //如果云函数调用成功，使用的是ES6的箭头函数(还没学过)
        console.log("云函数调用成功") //就打印"云函数调用成功"
        that.setData({ //setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。不是很懂
          openid:res.result.openid, //调用云函数后才将得到的res.result.openid赋值到openid变量
          userinfo: e.detail.userInfo //传递了参数e的userinfo到userinfo变量中
        })
        that.data.userinfo.openid = that.data.openid 
        //将userinfo、openid这些信息保存至缓存中，信息越少越好，就将userinfo和openid两条信息合成一条信息，将openid变成userinfo里面的一个字段
        console.log("userinfo", that.data.userinfo) //打印userinfo到控制台中
        wx.setStorageSync("userinfo", that.data.userinfo) 
        //将userinfo保存至缓存中，key是"userinfo",value是that.data.userinfo
      },
      fail:res=>{ //如果云函数调用失败
        console.log("云函数调用失败") //就打印"云函数调用失败"
      }
    })
  },
  onLoad:function(options){ //onload生命周期函数通过options获取参数
    const ui = wx.getStorageSync('userinfo') //获取缓存信息，使用getStorageSync函数
    this.setData({
      userinfo:ui, //userinfo = ui
      openid:ui.openid // openid = ui.openid
    })
  }
})

me.json

{
  "usingComponents": {} 
}

me.wxml

<view wx:if="{{!openid}}"> 
<!-- 如果获取到的openid是空的，就显示登录按钮 -->
  <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">HYH叫你点我点我！</button>
</view>
<!-- /*如果是变量的话都用两个大括号括起来*/ -->

<view class="uploader-container" wx:if="{{openid}}">
  <image class="image" src="{{userinfo.avatarUrl}}"></image> 
  <!-- 指定头像路径，加上定义image样式 -->
  <view class="name">{{userinfo.nickName}}</view> 
  <!-- 显示用户昵称，加上定义name样式 -->
</view>
<!-- /*样式都在wxss文件中写*/ -->

me.wxss

.image {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  /* 设置对象上下间距为0，左右自动 */
  display: block;
  padding-top:20px;
}

.name {
  text-align: center; 
  /* 居中 */
  padding-top:10px;
}

button{
  background: #EA5149;
  width: 60%;
  margin-top: 100px;
  color: #ffffff;
}