托管小程序云开发-032-前后端交互 - 用户登录页实现

一、用户登录页的功能需求

1、点击

1、用户点击登录 ，

弹出授权对话框，将用户信息提交到云端，

并保存云端返回的用户信息和当前时间到缓存，

设置app里面的用户信息，和islogin为true，

完成后返回上一页，用户信息页

二、封装api_user.js

在前端 service 文件夹新建 api_user.js

import { myCloudRequest } from '../utils/cloudRequest.js'
//  用户登录
const userLogin=(userInfo)=>{  
   
    let data={userInfo}  //传递的是一个对象
  //返回的是一个promise对象 
  return myCloudRequest.request("user/userLogin",data)
}

module.exports = {
  userLogin
}           

三、用户登录页实现

0、效果图

1、login.wxml

<!--pages/login/login.wxml-->
<!-- 页面内容区 -->
<view class="container">
   <view class="img-container">
    <image class="avatar" src="../../images/logo.png"></image>
   </view>
   <view class="title-container">
      <text>电子商城</text>
   </view>
   <view class="tip-container">
    <view >1、同意当前小程序获取我的微信头像；</view>
    <view >2、同意当前小程序获取我的微信昵称等其他信息；</view>
   </view>
   <view class="button-container">
    <button  class="mybutton" type="primary "  open-type="getUserProfile" bindtap="handleGetUserInfo">获取用户授权</button>
   </view>
</view>



           

2、login.js

// pages/login/login.js
import {   getUserProfile, showModal} from '../../utils/asyncwx'
import {userLogin} from '../../service/api_user'
let app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    nickName: '', //昵称
    avatarUrl: '',    //头像地址
    gender: '', //性别    

  },
  async handleGetUserInfo() { // 获取用户信息点击事件
    //1、前端取得微信用戶信息    
    try {
      let res = await getUserProfile()      
      const userInfo = res.userInfo //解构获取用户信息     
      console.log('userInfo=',userInfo) 
      this.setData({
        nickName: userInfo.nickName,
        avatarUrl: userInfo.avatarUrl,       
        gender: userInfo.gender,
      });     
      //2、携带token将解构出来的用户信息提交到后台数据库
     this.userLogin()     
    } catch (error) {
      console.log(error)
      //授权失败
      await showModal({
        content: '请允许授权!',
        showCancel: false
      })
    }
  },

  
  async userLogin() {
    //3、携带token将解构出来的用户信息提交到后台数据库    
    let data = {
     // cid: this.data.cid,
      nickName: this.data.nickName,
      avatarUrl: this.data.avatarUrl,    
      gender: this.data.gender,
    }    
    let res= await userLogin( data)   
    console.log('res=',res)  
    wx.setStorageSync("userInfo", res.data) //将后端返回的用户信息保存到缓存中
    
    app.globalData.userInfo = res.data  //将后端返回的用户信息保存到app中
    app.globalData.isLogin = true   //app中设置登录状态为true
    wx.navigateBack({
       delta: 1
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  }  
})           

3、login.wxss

/* pages/login/login.wxss */
.container{
  width:750rpx;
  min-height: 100%;
  display:flex;
  flex-direction: column;
    background-color: #fff;
    align-items: center;
}
.img-container{
  padding-top: 30rpx;
}
.avatar {
 
  width: 180rpx;
  height: 120rpx;
  margin: 10px;  
  border-radius: 50%;
  border: 2rpx solid #ffffff;
}
.title-container{
  padding-top: 20rpx;
  font-size: 36rpx;
  font-weight: bold;
  color:#515151;
}
.tip-container{
  padding-top: 60rpx;
  font-size: 28rpx;
  
  color:#8a8a8a;
}
.button-container{
    width: 700rpx;
    height: 100rpx;
    margin-top: 40rpx;
    
  
}
  
.mybutton
{
  width: 300rpx;
  height:68rpx;
  background:#ff4444;
  border-top-left-radius: 34rpx;
  border-radius: 34rpx;
    text-align: center;
    color:#FFFFFF;
    font-size: 28rpx !important;
}