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

前言

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

开始

第一步，搭建基础页面。

<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;
    background-color: #c00000;
  }

  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 12px;
    color: gray;
  }
}
</style>

视图如下：

第二步，在store/user,js模块的state节点中，声明token字符串：

export default {
  // 开启命名空间
  namespaced: true,

  // state 数据
  state: () => ({
    // 收货地址
    address: JSON.parse(uni.getStorageSync('address') || '{}'),
    // 登录成功之后的 token 字符串
    token: '',
  }),

  // 省略其它代码
}

在my.vue页面中，通过mapState辅助函数，导入需要的token字符串：

import badgeMix from '@/mixins/tabbar-badge.js'
// 1. 从 vuex 中按需导入 mapState 辅助函数
import { mapState } from 'vuex'

export default {
  mixins: [badgeMix],
  computed: {
    // 2. 从 m_user 模块中导入需要的 token 字符串
    ...mapState('m_user', ['token']),
  },
  data() {
    return {}
  },
}

在my.vue中实现登录组件和用户信息页面组件的按需展示

<template>
  <view>

    <!-- 用户未登录时，显示登录组件 -->
    <my-login v-if="!token"></my-login>

    <!-- 用户登录后，显示用户信息组件 -->
    <my-userinfo v-else></my-userinfo>

  </view>
</template>

在my-login组件中定义如下UI结构

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

css样式

.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;
    background-color: #c00000;
  }

  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 12px;
    color: gray;
  }
}

点击登录按钮获取微信用户的基本信息
注意：

• 今年4月13号 getUsinfo 只能获取到匿名用户信息，
• uni.getUserProfile() 可以获取到用户的信息

 <button type="primary" class="btn-login" @click="getUserInfo" >一键登录</button>

在methods节点中声明 getUserInfo 事件函数如下

methods: {
  // 获取微信用户的基本信息
    async getUserInfo(e) {
				  
	 	// 今年4月13号getUsinfo只能获取到匿名用户信息，
		// uni.getUserProfile()可以获取到用户的信息
		// 获取用户信息
		const [err,succ]= await uni.getUserProfile({
			desc:'登录'
		})
		if(err) return uni.$showMsg('您取消了授权')
		// 保存用户的信息
		this.updateUserInfo(succ)
		// 3.调用uni.login接口登录code参数
		const [ere,loginSucc]=await uni.login()
		// console.log(res)
		if(ere) return uni.$showMsg('登录失败')
		// 真正的发送请求获取token
		// 4.准备登录必备的参数
		const params={
			code:loginSucc.code,
			encryptedData:succ.encryptedData,
			iv:succ.iv,
			rawData:succ.rawData,
			signature:succ.signature
		}
		// 发送请求获取token
		const {data:{message,meta}} =await uni.$http.post('/api/public/v1/users/wxlogin',params)
		console.log(meta)
		// 判断获取token是否成功
		if(meta.status!==200) return uni.$showMsg('登录失败')
			// 保存token
			this.updateToken(message.token)
		}
}

将登录的信息存储到vuex里，在store/user.js模块的state节点中，声明userinfo的信息对象如下：

// state 数据
state: () => ({
  // 收货地址
  // address: {}
  address: JSON.parse(uni.getStorageSync('address') || '{}'),
  // 登录成功之后的 token 字符串
  token: '',
  // 用户的基本信息
  userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}')
}),

在 store/user.js 模块

export default {
  // 开启命名空间
  namespaced: true,

  // state 数据
  state: () => ({
    // 收货地址
    address: JSON.parse(uni.getStorageSync('address')||'{}'),
    // 登录成功之后的 token 字符串
      token: uni.getStorageSync('token') || '',
      // 用户的基本信息
      userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}')
  }),

  // 方法
  mutations: {
	  // 更新token
	  updateToken(state,token){
		  state.token=token

		  uni.setStorageSync('token',token)
	  },
	  // 设置用户的·基本信息
	  updateUserInfo(state,userInfo){
		  state.userinfo=userInfo
		  // 通过this.commit方法调用m_user的方法
		    this.commit('m_user/saveUserInfoToStorage')
	  },
    // 更新收货地址
    updateAddress(state, address) {
      state.address = address
      this.commit('m_user/saveAddressToStorage')
    },
    saveAddressToStorage(state){
	    uni.setStorageSync('address',JSON.stringify(state.address))
    },
    // 将 userinfo 持久化存储到本地
      saveUserInfoToStorage(state) {
        uni.setStorageSync('userinfo', JSON.stringify(state.userinfo))
      }
  },

  // 数据包装器
  getters: {
	  addstr(state){
		  if(!state.address.provinceName) return''
		   // 拼接 省，市，区，详细地址 的字符串并返回给用户
		      return state.address.provinceName + state.address.cityName + state.address.countyName + state.address.detailInfo
	  }
  },
}
```