微信小程序学习笔记2——关于个人中心实现登录后隐藏登录注册按钮显示头像及用户名

本科课程作业写了个基础的小程序在这里记录分享一下，如有错误欢迎指出。

判断是否登录隐藏按钮

一开始写好登录注册发现，当我登录成功后个人中心页面还保留着登录注册按钮，于是翻阅了微信小程序开发文档查找如何隐藏按钮的方法。
在微信官方的开发文档中找到条件渲染语句的用法：

然后考虑到隐藏和显示包含了多个view，所以用block来承载这个条件渲染：

wxml代码

<scroll-view scroll-y class="scrollPage">
  <view class="UCenter-bg">
    <block wx:if="{{id}}">//判断条件 id是否为空
      <image src="{{userimg}}" class="png" mode="widthFix" bindtap="userimgsc"></image>
      <view class="margin-top-sm">
        <text>欢迎回来,{{username}}!</text>
      </view>
    </block>
    <block wx:else>//id为空则显示登录注册按钮
      <button bindtap='signzhuan' class="button">注册</button>
      <button bindtap='loginzhuan' class="button">登录</button>
    </block>
    <image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-wave"></image>
  </view>
  <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">

    <view class="cu-item arrow">
      <view class="content" bindtap="shoucangjia">
        <text class="cuIcon-writefill text-cyan"></text>
        <text class="text-grey">我的收藏</text>
      </view>
    </view>

    <view class="cu-item arrow">
      <view class="content" bindtap="wdsc">
        <text class="cuIcon-formfill text-green"></text>
        <text class="text-grey">我的上传</text>
      </view>
    </view>

    <view class="cu-item arrow">
      <view class="content" bindtap="photostop">
        <text class="cuIcon-creativefill text-orange"></text>
        <text class="text-grey">上传图片</text>
      </view>
    </view>
  <view class="cu-tabbar-height"></view>
</scroll-view>

wxss用的colorUI

js代码

登陆成功后会将该用户的openid传入全局变量，根据全局变量中的该字段判断用户是否登录。

1. 在app.js中加入新字段

    this.globalData = {
      nowuseropid:null
    }

2. 在登录的js中加入传入变量代码（该段代码加入到登录成功的条件下）

app.globalData.nowuseropid = app.globalData.openid

3. 在个人中心的js中利用openid在用户集合中查询该用户的用户名、头像信息

 const app = getApp()
 const db = wx.cloud.database({   //引用云数据库
  env: '云开发环境名'			//云开发环境ID
});
 const 自己起的名userListDB = db.collection('集合名');
  Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    console.log('id', app.globalData.nowuseropid)
    this.setData({
      id:app.globalData.nowuseropid//传入视图层 判断是否登录
    })
    if(app.globalData.nowuseropid!=null){//进行判断 不为空则进行查询
      userListDB.where({
        _openid:app.globalData.nowuseropid
      }).get({
        success: function (res){
          that.setData({
            username:res.data[0].name,
            userimg:res.data[0].userimg
          })
          console.log('姓名',res.data[0].name)
          console.log('图片',res.data[0].userimg)
        }
      })
    }
  },
  signzhuan() {//注册按钮
    wx.navigateTo({
      url: '/pages/sign/sign',
    })
  },
  loginzhuan() {//登录按钮
    wx.navigateTo({
      url: '/pages/login/login',
    })
  },
  photostop(){//上传按钮
    let that = this;
    if(that.data.username==null){
      wx.showModal({
        title: '提示',
        content: '请先登录！',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            that.loginzhuan();
          }
        }
      })
    }else{
      wx.navigateTo({//跳转上传界面
        url: '/pages/sc/sc',
      })
    }

  },
  wdsc(){//查看我的上传按钮
    let that = this;
    if(that.data.username==null){
      wx.showModal({
        title: '提示',
        content: '请先登录！',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            that.loginzhuan();
          }
        }
      })
    }else{
      wx.navigateTo({//跳转我的上传页面
        url: '/pages/wdsc/wdsc',
      })
    }

  },
  shoucangjia(){//查看收藏夹按钮
    let that = this;
    if(that.data.username==null){
      wx.showModal({
        title: '提示',
        content: '请先登录！',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            that.loginzhuan();
          }
        }
      })
    }else{
      wx.navigateTo({//跳转收藏夹界面
        url: '/pages/shoucangjia/shoucangjia',
      })
    }
  },
})