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

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

logs页面有四个文件

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

//logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  getlogs:function(){
    //从缓存中获取用户信息
    const that = this
    const ui = wx.getStorageSync("userinfo")
    if(!ui.openid){
      //如果用户没有登录
      wx.switchTab({
        url: '/pages/me/me',
      })
    }else{
      wx.cloud.callFunction({
        //调用getlogs云函数
        name: "getlogs",
        data: {
          openid:ui.openid
        },
        success:res=>{
          console.log("res",res)
          that.setData({
            logs:res.result.data.map(log=>{
              //将日期变得正常可懂的形式
              var date = util.formatTime(new Date(log.date))
              log.date = date
              return log
            })
          })
        },
        fail: res => {
          console.log("res", res)
        }
      })
    }
  },
  //onLoad 页面首次加载的时候执行
  //onShow 页面每次切换的时候执行
  //通过onshow生命周期函数，调用getlogs方法，这样每次切换到日志界面，都会调用getlogs方法
  //在首页点击加减按钮后，切换到日志界面，新增的日志记录就会自动更新，提升用户体验
  onShow:function(){
    this.getlogs()
  }
})

logs.json

{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {}
}

logs.wxml

<!--logs.wxml-->
<block wx:for="{{logs}}" wx:key="key">
  <view class="log-item">
    日期：{{item.date}} 分数：{{item.add}}
  </view>
</block>

logs.wxss

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}