le développement hybride d'Uniapp implémente la fonction de connexion

Avec la popularité des appareils mobiles, les applications mobiles sont devenues un élément indispensable de la vie quotidienne des gens. L'implémentation de la fonction de connexion est l'une des fonctions de base de toute application. Dans cet article, nous présenterons comment utiliser le framework de développement hybride uniapp pour implémenter la fonction de connexion.

1. Introduction à uniapp

uniapp est un framework de développement hybride basé sur Vue.js. Il peut utiliser le même ensemble de code pour développer iOS, Android, H5, small. programmes, etc. applications de plate-forme. Plus important encore, il prend également en charge les fonctions d'empaquetage local et d'empaquetage cloud, ce qui peut améliorer considérablement l'efficacité du développement d'applications et l'expérience utilisateur.

2. Processus de mise en œuvre

Le processus de mise en œuvre de la fonction de connexion est à peu près le suivant :

1. Écrivez l'interface de connexion, y compris zones de saisie du nom d'utilisateur et du mot de passe, ainsi qu'un bouton de connexion.
2. Gérer le statut de connexion de l'utilisateur dans la vuex d'uniapp (gestionnaire de statut Vue.js).
3. Transmettez les informations de connexion de l'utilisateur au serveur pour vérification via une requête réseau.
4. Après une vérification réussie, les informations pertinentes de l'utilisateur sont stockées dans le cache local et le statut de l'utilisateur dans vuex est mis à jour en même temps.
5. Déterminez si l'utilisateur est connecté à l'application pour implémenter les fonctions associées.

Ensuite, nous mettrons en œuvre le processus ci-dessus étape par étape.

2.1 Écrire l'interface de connexion

Dans le projet uniapp, l'interface est implémentée en écrivant des composants Vue. Nous créons le fichier Login.vue sous le dossier pages et écrivons le code de l'interface de connexion comme suit :

<!-- Login.vue -->
<template>
  <view class="container">
    <view class="input-box">
      <input v-model="username" type="text" placeholder="用户名">
    </view>
    <view class="input-box">
      <input v-model="password" type="password" placeholder="密码">
    </view>
    <view class="btn-wrapper">
      <button @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      /* 登录验证 */
    }
  }
}
</script>

<style>
/* 样式 */
</style>

Dans le code ci-dessus, nous utilisons le composant Vue fourni par uniapp et quelques styles simples pour construire l'interface de connexion. Nous définissons la zone de saisie et le bouton de connexion, et appelons la méthode handleLogin lorsque vous cliquez sur le bouton de connexion.

2.2 Gestion du statut des utilisateurs

Dans uniapp, l'outil de gestion du statut des applications est vuex. Vous devez d'abord créer un dossier de magasin dans le projet (s'il n'existe pas) et créer le fichier index.js sous le dossier de magasin. Ensuite, nous définissons le statut et les opérations de l'utilisateur dans index.js :

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userInfo: null, // 用户信息
    isLogin: false // 是否登录
  },
  mutations: {
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    },
    setIsLogin(state, isLogin) {
      state.isLogin = isLogin
    }
  },
  actions: {
    login({ commit }, userInfo) {
      /* 登录验证 */
    },
    logout({ commit }) {
      /* 退出登录 */
    }
  }
})

export default store

Dans le code ci-dessus, nous utilisons d'abord le plug-in Vuex via la méthode Vue.use(), puis définissons le magasin objet. Dans l'objet store, nous utilisons les concepts de base de Vue.js tels que l'état, les mutations et les actions. L'état est utilisé pour enregistrer l'état de l'application, les mutations sont utilisées pour modifier l'état et les actions sont utilisées pour soumettre des mutations. Nous avons défini deux états : userInfo et isLogin, qui sont utilisés respectivement pour enregistrer les informations sur l'utilisateur et savoir si l'utilisateur est connecté. Ensuite, nous définissons deux opérations : la connexion et la déconnexion. Ces opérations sont des modifications et des soumissions à l'Etat.

2.3 Effectuer la vérification de connexion

Ensuite, nous devons implémenter une logique de vérification de connexion. Dans les actions, nous définissons la méthode de connexion. Dans cette méthode, nous pouvons effectuer une opération asynchrone afin de demander une vérification au serveur.

// store/index.js
actions: {
  async login({ commit }, userInfo) {
    const res = await uni.request({
      url: 'http://api.example.com/login',
      method: 'POST',
      data: userInfo
    })

    if(res.data.code === 0) {
      // 登录成功
      const userInfo = res.data.userInfo

      // 更新本地存储信息
      uni.setStorageSync('userInfo', userInfo)

      // 更新Vuex状态
      commit('setUserInfo', userInfo) // 存储用户信息
      commit('setIsLogin', true) // 修改登录状态
    } else {
      // 登录失败
      uni.showToast({
        title: '登录失败',
        icon: 'none'
      })
    }
  }
}

Dans la méthode de connexion, nous envoyons d'abord une requête POST au serveur via la méthode uni.request et transmettons les informations utilisateur. Après avoir reçu les commentaires du serveur, nous avons porté un jugement simple. Si la vérification de connexion réussit, les informations utilisateur renvoyées par le serveur sont stockées dans le cache local et les informations utilisateur et l'état de connexion dans vuex sont mis à jour. Si la vérification échoue, un message d'invite apparaîtra.

2.4 Déconnexion

Dans le fichier store/index.js, nous définissons également la méthode de déconnexion pour gérer le comportement de déconnexion de l'utilisateur :

// store/index.js
actions: {
  // ...省略上文中的代码
  async logout({ commit }) {
    // 清除本地缓存信息
    uni.removeStorageSync('userInfo')

    // 清除App Store
    commit('setUserInfo', null)
    commit('setIsLogin', false)
  }
}

#🎜🎜 # Dans la méthode de déconnexion, nous pouvons utiliser la méthode uni.removeStorageSync pour effacer les informations du cache local. Dans le même temps, les informations utilisateur et l'état de connexion dans vuex doivent également être mis à jour.

2.5 Détermination du statut de connexion de l'utilisateur dans l'application

Dans l'application, il est nécessaire de déterminer si l'utilisateur est connecté. Si vous n'êtes pas connecté, vous devez accéder à la page de connexion. Nous utilisons le hook de routage global beforeEach dans Vue.js pour déterminer s'il faut se connecter. Le code est le suivant :

// main.js
import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  store,
  ...App
})

app.$mount()

// 全局路由钩子
uni.$on('routeUpdate', function() {
  uni.getStorage({
    key: 'userInfo',
    success: function(res) {
      // 用户已登录，更新Vuex状态
      store.commit('setIsLogin', true)
      store.commit('setUserInfo', res.data)
    },
    fail: function() {
      // 用户未登录，跳转到登录页
      if(uni.getStorageSync('isLogin') !== 'true' && uni.getStorageSync('isLogin') !== true) {
        uni.navigateTo({
          url: '/pages/Login'
        })
      }
    }
  })
})

Dans le code ci-dessus, nous utilisons la méthode uni.$on pour écouter le événement de mise à jour de l'itinéraire Lorsque l'itinéraire juge lorsque des changements se produisent. Tout d’abord, nous obtenons les informations utilisateur dans le cache local via la méthode uni.getStorage. Si les informations utilisateur sont obtenues avec succès, cela signifie que l'utilisateur s'est connecté et nous pouvons mettre à jour le statut de l'utilisateur dans vuex. Sinon, il passera à la page de connexion.

3. Résumé

Dans cet article, nous avons présenté comment utiliser le framework de développement hybride uniapp pour implémenter la fonction de connexion. Tout d'abord, nous avons construit l'interface de l'application en écrivant l'interface de connexion ; ensuite, nous avons utilisé vuex pour gérer l'état de l'application et enregistrer et gérer l'état de connexion de l'utilisateur, puis nous avons vérifié les informations de connexion de l'utilisateur via des requêtes réseau dans l'application, et utilisé Local ; la technologie de mise en cache enregistre le statut de l'utilisateur ; enfin, nous utilisons le mécanisme de hook de routage pour déterminer et accéder au statut de connexion de l'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!