Comment uniapp implémente-t-il les fonctions de connexion et d'enregistrement locales ?

Avec le développement rapide de l'Internet mobile, un grand nombre d'applications émergent constamment. Ces applications nécessitent toutes que les utilisateurs se connectent et s'inscrivent, et les moyens permettant aux utilisateurs de se connecter et de s'inscrire sur des appareils mobiles deviennent de plus en plus nombreux. Parmi ces méthodes, l'enregistrement de connexion locale est largement utilisé. Sa mise en œuvre est non seulement pratique pour les utilisateurs, mais peut également protéger efficacement la confidentialité et la sécurité des utilisateurs.

Cet article décrira brièvement comment uniapp implémente la connexion et l'enregistrement locaux. uniapp est un framework d'application multiplateforme qui ne doit être développé qu'une seule fois et peut être publié sur plusieurs plateformes (Android, iOS, H5, etc.). Avec la dernière version d'uniapp, les développeurs peuvent facilement compléter les fonctions de connexion et d'enregistrement locales.

1. Préparation des connaissances préalables

Avant de mettre en œuvre l'enregistrement de connexion locale d'Uniapp, vous devez comprendre Uniapp et les termes techniques associés.

1. uniapp : uniapp est un framework d'application multiplateforme basé sur Vue.js, qui peut réaliser un développement unique et une version multi-fins. uniapp fournit un modèle de développement basé sur des composants et prend en charge la syntaxe et le cycle de vie de Vue.js. Plus de détails peuvent être obtenus dans la documentation officielle d'uni-app.
2. Vuex : Vuex est une bibliothèque de gestion d'état conçue spécifiquement pour Vue.js, qui peut partager l'état entre les composants. Grâce à Vuex, nous pouvons gérer le flux de données de tous les composants de l'application, réalisant ainsi le partage de données entre les composants. Dans les implémentations ultérieures, nous appliquerons les connaissances de Vuex.
3. Plug-in uni-app : le plug-in uni-app peut améliorer les fonctions d'uni-app, qui est généralement implémenté via l'encapsulation du plug-in Vue.js. Il existe de nombreux plug-ins pour uni-app, tels que : uni-login, uni-verify, etc. Nous sélectionnerons les plug-ins appropriés pendant le processus de mise en œuvre pour implémenter la fonction de connexion et d'enregistrement locale.

2. Étapes de mise en œuvre

1. Créer un projet uniapp : utilisez HBuilderX pour créer un projet uniapp et configurer l'environnement de développement.
2. Installez le plug-in uni-login : entrez la ligne de commande dans le répertoire racine du projet et exécutez npm install @dcloudio/uni-login pour installer le plug-in uni-login. npm install @dcloudio/uni-login ，安装uni-login插件。
3. 使用uni-login插件实现登录注册：在登录界面和注册界面中，引入uni-login插件提供的模板和方法。解析uni-login插件返回的成功或失败的回调，从而实现登录注册功能。
4. 将成功获取到的用户信息存储到Vuex中：使用Vuex管理本地登录状态，将成功获取到的用户信息存储到Vuex中，以便后续使用。
5. 退出登录：实现退出登录功能，将保存在Vuex中的用户信息清除，回到登录界面。
6. 完善登录注册界面布局：通过修改主题样式、图标、按钮等等来完善登录注册界面的布局。

三、实现方法

1. 创建uniapp项目

在HBuilderX中创建uniapp项目，这里不再赘述。

2. 安装uni-login插件

在项目根目录下进入命令行，运行npm install @dcloudio/uni-login

Utilisez le plug-in uni-login pour implémenter l'enregistrement de la connexion : dans l'interface de connexion et l'interface d'enregistrement, présentez les modèles et les méthodes fournis par le plug-in uni-login. Analysez le rappel de réussite ou d'échec renvoyé par le plug-in uni-login pour implémenter la fonction d'enregistrement de connexion.

3. Stockez les informations utilisateur obtenues avec succès dans Vuex : utilisez Vuex pour gérer le statut de connexion locale et stockez les informations utilisateur obtenues avec succès dans Vuex pour une utilisation ultérieure.

Déconnexion : implémentez la fonction de déconnexion, effacez les informations utilisateur enregistrées dans Vuex et revenez à l'interface de connexion.

Améliorez la présentation de l'interface de connexion et d'inscription : améliorez la présentation de l'interface de connexion et d'inscription en modifiant les styles de thème, les icônes, les boutons, etc.

3. Méthode d'implémentation

Créer un projet uniapp

Créer un projet uniapp dans HBuilderX, qui ne sera pas décrit ici.

Installez le plug-in uni-login

4. Entrez la ligne de commande dans le répertoire racine du projet et exécutez npm install @dcloudio/uni-login. Après une installation réussie, vous pouvez voir le plug-in uni-login dans le package.json du projet.

Utilisez le plug-in uni-login pour implémenter l'enregistrement de la connexion

5. Dans la page de connexion et la page d'inscription, ajoutez le modèle d'uni-login :

<template>
  <view>
    <login
      @login="login"
      passwordStyleType="password"
      :register-show-stop-propagation="false"
      :register-primary-text="&#39;注册（或通过以下方式登录）&#39;"
    />
  </view>
</template>

Dans Script, enregistrez le modèle d'uni-login :

import login from '@/components/uni-login/uni-login.vue' // 引入uni-login模板

export default {
  components: {
    login
  },
  methods: {
    // 登录方法
    login(userinfo) {
      console.log(userinfo)
      // 这里可以将获取到的用户信息保存到Vuex中
    }
  }
}

Idem pour la page d'inscription.
Dans Script, nous pouvons constater qu'après une connexion réussie, les informations utilisateur que nous pouvons utiliser sont transmises à la fonction de connexion. Par conséquent, nous devons enregistrer les informations obtenues sur Vuex afin qu'elles puissent être facilement obtenues et utilisées dans des applications ultérieures.
Créer et gérer les informations utilisateur dans Vuex :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
    user:{
      name:'匿名',
      age:0
    }
  },
  mutations:{
    setUser(state, payload) {
      state.user = payload.user
    },
    // 清除用户信息
    clearUser(state) {
      state.user = {}
    }
  }
})

export default store

Dans la méthode de connexion, nous pouvons enregistrer les informations utilisateur via Vuex : 🎜

// 登录方法
login(userinfo) {
  console.log(userinfo)
  // 将获取到的用户信息保存到Vuex中，便于后续应用
  this.$store.commit('setUser',{user:userinfo})
  // 登录成功后，进行路由跳转
  $uni.navigateTo({
    url: '/pages/home/home'
  });
}

🎜Dans l'interface de la page d'accueil, nous pouvons utiliser Vuex pour obtenir les informations utilisateur enregistrées, réalisant ainsi l'isolation des données. entre différents utilisateurs. 🎜

export default {
  data() {
    return {
      user: {},
    }
  },
  mounted() {
    this.user = this.$store.state.user
  },
  methods: {},
}

🎜🎜Déconnexion🎜🎜🎜Pour implémenter la fonction de déconnexion dans l'interface de la page d'accueil, ajoutez simplement l'événement correspondant au bouton de déconnexion et effacez les informations utilisateur dans Vuex. 🎜

// 退出登录方法
logout() {
  // 清除Vuex中保存的用户信息
  this.$store.commit('clearUser')
  // 退出登录后，回到登录界面
  $uni.navigateTo({
    url: '/pages/login/login'
  });
}

🎜🎜Améliorez la présentation de l'interface de connexion et d'enregistrement🎜🎜🎜En utilisant les composants, modèles, etc. fournis par uniapp, vous pouvez facilement créer une interface de connexion et d'enregistrement sympa et améliorer les utilisateurs grâce à des styles CSS, des logos, des barres d'onglets, etc. expérience. 🎜🎜4. Résumé🎜🎜Jusqu'à présent, nous avons terminé la mise en œuvre de la fonction de connexion et d'enregistrement locale d'uniapp. Le plug-in uni-login implémente nos fonctions de base dans le processus de connexion et d'enregistrement mobile, et c'est très simple. à utiliser. Grâce à l'introduction de cet article, nous avons découvert les connaissances de base d'uniapp, l'utilisation de Vuex, l'utilisation d'uni-login, etc. Nous espérons que cela sera utile à tout le monde. 🎜🎜Dans le processus de candidature lui-même, en raison des différentes exigences et architectures techniques, les méthodes de mise en œuvre sont également différentes. Cependant, nous pouvons comprendre la situation réelle, mieux obtenir l'effet de la connexion et de l'enregistrement locaux, et l'optimiser et l'améliorer continuellement pour améliorer l'expérience utilisateur. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!