（9）用户入口实现，wxml、wxss、js源代码

这一节我们把用户入口实现出来，并提供wxml、wxss、js源代码。

实现后的效果图：

代码结构图：

一、wxml

<view class='lanmu'>
  <!-- 说明 -->
  <view class="shuoming">
    <text class="syjs">您好：</text>
    <text class="smnr" decode="{{true}}">&nbsp;&nbsp;&nbsp;&nbsp;您有<text style='color:#ee0000'> {{timushu}}</text> 道错题，点击下方“我要复习”，可以复习您的错题。</text>
  </view>

 <!-- 错题本 -->
 
  <view class="cuotiben">
    <button 
      open-type="getUserInfo" 
      bindgetuserinfo="onGetUserInfo"
      class="userinfo-avatar"
      style="background-image: url({{avatarUrl}})" >
     </button>
     <button class="ctbutton" bindtap='logCuotiben'>我要复习</button>
  </view>

</view>

二、wxss

/* pages/grzx/grzx.wxss */

.lanmu{
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  color: #000000;
  margin: 30rpx 30rpx 30rpx 30rpx;
  font-size: 40rpx;
  border: 1rpx solid #ffffff;
}

.shuoming{
  display:flex;
  flex-direction:column;
  justify-content:center;
  height: 260rpx;
  width: 100%;
  border-bottom: 1rpx solid #dcdcdc;
}

.syjs{
  display:flex;
  flex-direction:column;
  justify-content:center;
  height: 50rpx;
  width: 100%;
 }

.smnr{
  display:flex;
  flex-direction:column;
  justify-content:center;
  height: 210rpx;
  width: 100%;
  font-size:36rpx;
 }

.cuotiben{
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 150rpx;
  border-bottom: 1rpx solid #dcdcdc;
}

三、js

// pages/grzx/grzx.js
const app = getApp()

Page({

  data: {
    timushu: null,
    openid: ''
  },
 
  onGetOpenid: function () {
    // 调用云函数
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[云函数] [login] user openid: ', res.result.openid)
        app.globalData.openid = res.result.openid


      },
      fail: err => {
        console.error('[云函数] [login] 调用失败', err)
        wx.navigateTo({
          url: '../deployFunctions/deployFunctions',
        })
      }
    })
  },
  
  logCuotiben: function(){

    wx.navigateTo({

      url: '/pages/cuotiben/cuotiben',
      success: function (res) {

      },
      fail: function (res) { },
      complete: function (res) { },
    })
      
  },


  cuotishu: function () {

    const db = wx.cloud.database()
    var that = this

    db.collection('cuotiku').where({
      _openid: app.globalData.openid
    }).count({
      success(res) {
        console.log(res.total)
        that.setData({
          timushu: res.total
        })
      }
    })
  },

  
  onLoad: function (options) {
    this.onGetOpenid()
    this.cuotishu()
    
  },

 onReady: function () {

  },

  onShow: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

四、关于源代码的说明

js里有bug，导致效果图中看到的178道错题是错题库中的错题总数，而不是当前用户的错题数。