1. 程式人生 > >小程序短視頻項目———開發用戶信息之用戶退出註銷

小程序短視頻項目———開發用戶信息之用戶退出註銷

enter block console otto gin solid right 按鈕 tap

在用戶登陸成功或者註冊成功之後,應該讓用戶跳轉到個人信息頁面。所以接下來進行個人信息功能的開發記載

一、用戶個人信息界面的初始化

mine.wxml

技術分享圖片

<view>
  <view class=‘container‘>

    <block wx:if="{{isMe}}">
      <image src="{{faceUrl}}" class="face" bindtap=‘changeFace‘></image>
    </block>
    <block wx:if="{{!isMe}}">
<image src="{{faceUrl}}" class="face"></image> </block> <label class=‘nickname‘>{{nickname}}</label> <button size=‘mini‘ class=‘primary‘ bindtap=‘uploadVideo‘> 上傳作品</button> <button size=‘mini‘ type=‘‘ class=‘logout‘ bindtap=‘logout‘
>註銷</button> <view class=‘container-row‘> <label class=‘info-items‘>{{fansCounts}} 粉絲</label> <label class=‘info-items‘>{{followCounts}} 關註</label> <label class=‘info-items‘>{{receiveLikeCounts}} 獲贊</label> </view>
</view> </view> <view class="line"></view>

mine.wxss

page {
    font-size: 14px;
}

.container {
    background-color: whitesmoke;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-row {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    margin-top: 10px;
}

.info-items {
    margin-left: 30px;
}

.face {
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    margin-top: 20px;
}

.nickname {
    margin-top: 5px;
    font-weight: bold;
    font-size: 18px;
}

.logout {
    margin-top: 3px;
    float: right;
}

.follow {
    margin-top: 3px;
}

.line {
    width: 100%;
    height: 1px;
    background-color: gainsboro;
    margin-top: 1px;
}

.container-video {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    text-align: center;
    border: solid 1px;
    line-height: 30px;
}

.video-info {
    width: 100%;
}

.video-info-selected {
    background-color: gainsboro;
}

.container-video-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.videoImage {
    width: 250rpx;
    height: 180px;
}

二、開發註銷接口

在RegistLoginController類中新建註銷方法

技術分享圖片

三、小程序註銷與後端聯調

在小程序mine.js上新增註銷按鈕的綁定事件

const app = getApp()

Page({
  data: {
    faceUrl: "../resource/images/noneface.png",
    
  },

  onLoad: function(params){

  },

  logout: function(){
    var user = app.userInfo;

    var serverUrl = app.serverUrl;
    wx.showLoading({
      title: ‘請等待...‘,
    });
    // 調用後端
    wx.request({
      url: serverUrl + ‘/logout?userId=‘ + user.id,
      method: "POST",
      header: {
        ‘content-type‘: ‘application/json‘ // 默認值
      },
      success: function (res) {
        console.log(res.data);
        wx.hideLoading();
        if (res.data.status == 200) {
          //登錄成功跳轉 
          wx.showToast({
            title: ‘註銷成功‘,
            icon: ‘success‘,
            duration: 2000
          });
          app.userInfo = null;
          //頁面跳轉
          wx.navigateTo({
            url: ‘../userLogin/login‘,
          })
        } 
      }
    })
  }
  
})

小程序短視頻項目———開發用戶信息之用戶退出註銷