如何完成微信小程序的登录功能

前言

微信小程序是一个轻量级的，不用安装包，就可以打开的一个小工具，那我们就看一下，微信小程序是如何登录的

开始

第一步，搭建基础页面。

<template>
  <view class="login-container">
    <!-- 提示登录的图标 -->
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <!-- 登录按钮 -->
    <!-- open-type="getUserInfo" @getuserinfo="getUserInfo"使用不了 -->
    <button type="primary" class="btn-login" @click="getUserInfo" >一键登录</button>
    <!-- 登录提示 -->
    <view class="tips-text">登录后尽享更多权益</view>
  </view>
</template>

<style lang="scss">
.login-container {
     
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;

  // 绘制登录盒子底部的半椭圆造型
  &::after {
     
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    background-color: white;
    border-radius: 100%;
    transform: translateY(50%);
  }

  // 登录按钮的样式
  .btn-login {
     
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;