uniapp如何实现本地登录注册功能

1. uniapp简介

uniapp是一个基于Vue.js的开发框架，可以开发出跨多个平台（包括iOS、Android、Web、小程序等）的应用程序，它具有以下特点：

基于Vue.js开发，遵循MVVM模式

支持多种平台的快速开发

提供了丰富的组件和API

兼容原生API，可以进行原生插件的开发

由于uniapp可以进行跨平台开发，所以对于开发者而言，它可以降低开发成本，提高开发效率。

2. uniapp本地登录注册功能

2.1 需求分析

在进行uniapp本地登录注册功能开发之前，我们需要先明确我们的需求，常见的本地登录注册功能需要满足以下几个要求：

用户可以使用账号和密码进行登录

新用户可以进行注册，注册成功后账号和密码将会被保存在本地

用户可以选择记住密码，下次登录时会直接使用已保存的账号和密码

用户可以修改个人信息，包括密码等

2.2 实现步骤

2.2.1 安装uni-storage

uni-storage是uniapp提供的本地存储插件，可以轻松地将数据保存在本地中。我们可以使用以下命令进行安装：

npm install --save uni-storage

2.2.2 实现注册功能

在实现注册功能时，我们需要实现以下几个步骤：

获取用户输入的账号和密码

将账号和密码保存在本地存储中

提示注册成功信息，并跳转到登录页面

以下代码演示了如何实现注册功能：

import { setStorageSync } from '@/utils/uni-storage.js'
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    signup () {
      const { username, password } = this
      const userList = getStorageSync('userList') || []
      if (userList.some(item => item.username === username)) {
        uni.showToast({
          icon: 'none',
          title: '当前用户名已存在'
        })
        return
      }
      const newUser = { username, password }
      userList.push(newUser)
      setStorageSync('userList', userList)
      uni.showToast({
        icon: 'success',
        title: '注册成功'
      })
      uni.navigateTo({
        url: '../login/login'
      })
    }
  }
}

我们首先从输入框中获取到用户输入的账号和密码，接着从本地存储中获取到已有的用户列表。如果当前用户输入的账号已存在，则提示用户当前用户名已存在，否则将新用户添加到用户列表中并保存到本地存储中，接着提示注册成功信息，并跳转到登录页面。

2.2.3 实现登录功能

在实现登录功能时，我们需要实现以下几个步骤：

获取用户输入的账号和密码

从本地存储中获取到已有的用户列表

检查输入的账号和密码是否与已有的用户信息一致

如果一致，则提示登录成功，并跳转到首页

以下代码演示了如何实现登录功能：

import { getStorageSync } from '@/utils/uni-storage.js'
export default {
  data () {
    return {
      username: '',
      password: '',
      remember: false
    }
  },
  onShow () {
    const user = getStorageSync('currentUser') || {}
    this.username = user.username || ''
    this.password = user.password || ''
    this.remember = user.remember || false
  },
  methods: {
    login () {
      const { username, password, remember } = this
      const userList = getStorageSync('userList') || []
      const currentUser = userList.find(item => item.username === username)
      if (!currentUser) {
        uni.showToast({
          icon: 'none',
          title: '当前用户不存在'
        })
        return
      }
      if (currentUser.password !== password) {
        uni.showToast({
          icon: 'none',
          title: '密码错误'
        })
        return
      }
      setStorageSync('currentUser', {
        username: currentUser.username,
        password: remember ? currentUser.password : '',
        remember
      })
      uni.showToast({
        icon: 'success',
        title: '登录成功'
      })
      uni.switchTab({
        url: '../home/home'
      })
    }
  }
}

我们首先从输入框中获取到用户输入的账号和密码，接着从本地存储中获取到已有的用户列表。如果当前用户不存在，则提示用户当前用户不存在；如果密码错误，则提示密码错误。如果账号和密码输入正确，则保存当前用户信息到本地存储中，接着提示登录成功信息，并跳转到首页。

2.2.4 实现修改密码功能

在实现修改密码功能时，我们需要实现以下几个步骤：

获取用户输入的旧密码、新密码和确认密码

从本地存储中获取到已有的用户信息

检查输入的旧密码是否正确

如果正确，则修改密码并更新本地存储中的用户信息

以下代码演示了如何实现修改密码功能：

import { getStorageSync, setStorageSync } from '@/utils/uni-storage.js'
export default {
  data () {
    return {
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
  },
  methods: {
    changePassword () {
      const { oldPassword, newPassword, confirmPassword } = this
      const currentUser = getStorageSync('currentUser') || {}
      if (!currentUser.username) {
        return
      }
      if (newPassword !== confirmPassword) {
        uni.showToast({
          icon: 'none',
          title: '两次输入的密码不一致'
        })
        return
      }
      if (currentUser.password !== oldPassword) {
        uni.showToast({
          icon: 'none',
          title: '旧密码不正确'
        })
        return
      }
      const userList = getStorageSync('userList') || []
      const index = userList.findIndex(item => item.username === currentUser.username)
      userList[index].password = newPassword
      setStorageSync('userList', userList)
      setStorageSync('currentUser', {
        ...currentUser,
        password: newPassword
      })
      uni.showToast({
        icon: 'success',
        title: '修改密码成功'
      })
    }
  }
}

我们首先从输入框中获取到用户输入的旧密码、新密码和确认密码，接着从本地存储中获取到已有的用户信息。如果新密码和确认密码不一致，则提示两次输入的密码不一致。如果旧密码不正确，则提示旧密码不正确。如果输入的信息无误，则修改密码，更新本地存储中的用户信息，并提示修改密码成功。

2.3 总结

通过本文的介绍，我们了解了uniapp的基本特点和本地登录注册功能的实现步骤。通过对uniapp的学习，我们可以更加轻松地进行跨平台应用程序的开发。