Uniapp-Hybridentwicklung zur Implementierung der Anmeldefunktion

Mit der Popularität mobiler Geräte sind mobile Anwendungen zu einem unverzichtbaren Bestandteil des täglichen Lebens der Menschen geworden. Die Implementierung der Login-Funktion gehört zu den Grundfunktionen jeder Anwendung. In diesem Artikel stellen wir vor, wie Sie das Uniapp-Hybrid-Entwicklungsframework zum Implementieren der Anmeldefunktion verwenden.

1. Einführung in uniapp

uniapp ist ein hybrides Entwicklungsframework, das auf Vue.js basiert und den gleichen Codesatz für die Entwicklung von iOS, Android, H5 und Small verwenden kann Programme usw. Plattformanwendungen. Noch wichtiger ist, dass es auch lokale Verpackungs- und Cloud-Verpackungsfunktionen unterstützt, was die Effizienz der Anwendungsentwicklung und das Benutzererlebnis erheblich verbessern kann.

2. Implementierungsprozess

Der Prozess zum Implementieren der Anmeldefunktion ist ungefähr wie folgt:

1. Schreiben Sie die Anmeldeschnittstelle, einschließlich Eingabefelder für Benutzername und Passwort sowie eine Anmeldeschaltfläche.
2. Verwalten Sie den Anmeldestatus des Benutzers im Vuex (Vue.js-Statusmanager) von Uniapp.
3. Übergeben Sie die Anmeldeinformationen des Benutzers zur Überprüfung über eine Netzwerkanfrage an den Server.
4. Nach erfolgreicher Verifizierung werden die relevanten Informationen des Benutzers im lokalen Cache gespeichert und gleichzeitig der Benutzerstatus in vuex aktualisiert.
5. Stellen Sie fest, ob der Benutzer in der Anwendung angemeldet ist, um verwandte Funktionen zu implementieren.

Als nächstes werden wir den oben genannten Prozess Schritt für Schritt umsetzen.

2.1 Schreiben Sie die Anmeldeschnittstelle

Im Uniapp-Projekt wird die Schnittstelle durch Schreiben von Vue-Komponenten implementiert. Wir erstellen die Datei „Login.vue“ im Ordner „pages“ und schreiben den Code für die Anmeldeschnittstelle wie folgt:

<!-- 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>

Im obigen Code verwenden wir die von uniapp bereitgestellte Vue-Komponente und einige einfache Stile Erstellen Sie die Anmeldeschnittstelle. Wir definieren das Eingabefeld und die Anmeldeschaltfläche und rufen die Methode handleLogin auf, wenn auf die Anmeldeschaltfläche geklickt wird.

2.2 Benutzerstatus verwalten

In uniapp ist vuex das Tool zum Verwalten des Bewerbungsstatus. Sie müssen zunächst einen Store-Ordner im Projekt erstellen (sofern dieser nicht vorhanden ist) und die Datei index.js unter dem Store-Ordner erstellen. Als Nächstes definieren wir den Status und die Vorgänge des Benutzers in 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

Im obigen Code verwenden wir zunächst das Vuex-Plug-In über die Methode Vue.use() und definieren dann den Store Objekt. Im Store-Objekt verwenden wir die Grundkonzepte von Vue.js wie Status, Mutationen und Aktionen. Der Status wird verwendet, um den Status der Anwendung zu speichern, Mutationen werden verwendet, um den Status zu ändern, und Aktionen werden verwendet, um Mutationen zu übermitteln. Wir haben zwei Zustände definiert: userInfo und isLogin, die dazu dienen, Benutzerinformationen zu speichern bzw. ob der Benutzer angemeldet ist. Als nächstes definieren wir zwei Vorgänge: Anmelden und Abmelden. Bei diesen Vorgängen handelt es sich um Änderungen und Unterwerfungen an den Staat.

2.3 Anmeldeüberprüfung durchführen

Als nächstes müssen wir die Anmeldeüberprüfungslogik implementieren. In Aktionen definieren wir die Anmeldemethode. Bei dieser Methode können wir einen asynchronen Vorgang durchführen, um den Server zur Überprüfung aufzufordern.

// 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'
      })
    }
  }
}

Bei der Anmeldemethode senden wir zunächst eine POST-Anfrage über die uni.request-Methode an den Server und übergeben die Benutzerinformationen. Nachdem wir Feedback vom Server erhalten hatten, haben wir ein einfaches Urteil gefällt. Wenn die Anmeldeüberprüfung erfolgreich ist, werden die vom Server zurückgegebenen Benutzerinformationen im lokalen Cache gespeichert und die Benutzerinformationen und der Anmeldestatus in vuex werden aktualisiert. Wenn die Überprüfung fehlschlägt, wird eine entsprechende Meldung angezeigt.

2.4 Abmelden

In der Datei store/index.js definieren wir auch die Abmeldemethode, um das Abmeldeverhalten des Benutzers zu verwalten:

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

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

#🎜🎜 # In der Abmeldemethode können wir die Methode uni.removeStorageSync verwenden, um lokale Cache-Informationen zu löschen. Gleichzeitig müssen auch die Benutzerinformationen und der Anmeldestatus in vuex aktualisiert werden.

2.5 Ermittlung des Benutzer-Anmeldestatus in der Anwendung

In der Anwendung muss ermittelt werden, ob der Benutzer angemeldet ist. Wenn Sie nicht angemeldet sind, müssen Sie zur Anmeldeseite springen. Wir verwenden den globalen Routing-Hook beforeEach in Vue.js, um zu bestimmen, ob eine Anmeldung erfolgen soll. Der Code lautet wie folgt:

// 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'
        })
      }
    }
  })
})

Im obigen Code verwenden wir die uni.$on-Methode, um zuzuhören Aktualisierungsereignis der Route. Beurteilen Sie, wann Änderungen auftreten. Zuerst erhalten wir die Benutzerinformationen im lokalen Cache über die Methode uni.getStorage. Wenn die Benutzerinformationen erfolgreich abgerufen wurden, bedeutet dies, dass sich der Benutzer angemeldet hat und wir den Benutzerstatus in vuex aktualisieren können. Andernfalls wird zur Anmeldeseite gesprungen.

3. Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie Sie das Uniapp-Hybrid-Entwicklungsframework zum Implementieren der Anmeldefunktion verwenden. Zuerst haben wir die Anwendungsschnittstelle erstellt, indem wir eine Anmeldeschnittstelle geschrieben haben. Anschließend haben wir den Anwendungsstatus verwaltet und den Benutzeranmeldestatus aufgezeichnet und verwaltet. Anschließend haben wir die Benutzeranmeldeinformationen über Netzwerkanforderungen in der Anwendung überprüft und Local verwendet Die Caching-Technologie zeichnet den Benutzerstatus auf. Schließlich verwenden wir den Routing-Hook-Mechanismus, um den Benutzer-Anmeldestatus zu ermitteln und zu springen.

Das obige ist der detaillierte Inhalt vonUniapp-Hybridentwicklung zur Implementierung der Anmeldefunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!