Uniapp-Login-Sprungseite

Bei der Entwicklung mobiler Anwendungen entscheiden sich viele Entwickler für die Verwendung von Uniapp für die Anwendungsentwicklung. Ein Hauptmerkmal von Uniapp ist die plattformübergreifende Unterstützung, was nicht nur die Entwicklungseffizienz verbessert, sondern auch den Betrieb und die Wartung von Anwendungen erleichtert. und Bequemlichkeit. In Uniapp-Anwendungen ist die Login-Sprungseite eine häufige Funktion. Lassen Sie uns die spezifischen Schritte zur Implementierung der Uniapp-Login-Sprungseite besprechen.

1. Erstellen Sie zunächst eine Anmeldeseite. Sie können die von uniapp bereitgestellte Vorlage verwenden oder Ihren eigenen Code schreiben, um sie zu implementieren.
2. Auf der Anmeldeseite müssen Sie die offiziell von uniapp bereitgestellte Anmeldekomponente eingeben. Der Code lautet wie folgt:

<template>
  <view>
    <form>
      <input type="text" v-model="account" placeholder="请输入账号"/>
      <input type="password" v-model="password" placeholder="请输入密码"/>
      <button type="submit" @click="login">登录</button>
    </form>
  </view>
</template>

<script>
  import { login } from '@/api/user'

  export default {
    data() {
      return {
        account: '',
        password: ''
      }
    },
    methods: {
      async login() {
        // 调用登录接口，接口返回登录状态
        const res = await login({ account: this.account, password: this.password })

        // 如果登录成功，就跳转到主页
        if (res.code === 200) {
          uni.switchTab({ url: '/pages/index' })
        } else {
          uni.showToast({
            title: '登录失败',
            icon: 'none'
          })
        }
      }
    }
  }
</script>

Im obigen Code haben wir Ich habe ein einfaches Anmeldeformular geschrieben und die Anmeldeschnittstelle wird aufgerufen, wenn die Anmeldung erfolgreich ist. Wenn die Anmeldung fehlschlägt, wird ein Popup-Fenster mit der Meldung angezeigt, dass die Anmeldung fehlgeschlagen ist.

3. In der Anmeldeschnittstelle müssen wir das Kontopasswort überprüfen und prüfen, ob die vom Benutzer eingegebene Kontonummer und das Passwort korrekt sind, einen Statuscode für die erfolgreiche Anmeldung zurückgeben und Übertragen Sie die Benutzerinformationen. Andernfalls werden der Statuscode und die Fehlermeldung eines Anmeldefehlers zurückgegeben.

import request from '@/utils/request'

// 登录接口
export function login(data) {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}

Im obigen Code verwenden wir die von Uniapp offiziell empfohlene Netzwerkanforderungsbibliotheksanforderung, um die Anforderung zu senden. Gleichzeitig müssen wir die Daten gemäß den Anforderungen von übertragen die Back-End-Schnittstelle.

4. Auf der Startseite müssen wir den Anmeldestatus des Benutzers beurteilen. Wenn der Benutzer angemeldet ist, werden die Informationen des Benutzers angezeigt die Anmeldeseite, um sich anzumelden. .

<template>
  <view>
    <text v-if="isLogin">欢迎你，{{ userInfo.name }}</text>
    <view v-else>
      <text>请先登录</text>
      <button @click="gotoLogin">去登录</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isLogin: false,
        userInfo: {}
      }
    },
    onLoad() {
      // 判断用户是否已登录
      this.checkLogin()
    },
    methods: {
      checkLogin() {
        // 检查本地存储中是否存在登录信息
        const loginInfo = uni.getStorageSync('loginInfo')
        if (loginInfo && loginInfo.isLogin) {
          this.isLogin = true
          this.userInfo = loginInfo.userInfo
        }
      },
      gotoLogin() {
        // 跳转到登录页面
        uni.navigateTo({ url: '/pages/login' })
      }
    }
  }
</script>

Im obigen Code prüfen wir mithilfe der checkLogin-Methode, ob die Anmeldeinformationen im lokalen Speicher vorhanden sind. Wenn vorhanden, setzen Sie isLogin auf true und setzen Sie userInfo auf den lokalen Speicher. Benutzerinformationen; andernfalls setzen Sie isLogin auf false, um anzuzeigen, dass der Benutzer nicht angemeldet ist. Wenn der Benutzer nicht angemeldet ist, kann er mit der Methode gotoLogin zur Anmeldeseite für Anmeldevorgänge springen.

5. Nach erfolgreicher Anmeldung müssen wir den Anmeldestatus und die Benutzerinformationen im lokalen Speicher speichern, damit wir uns beim nächsten Öffnen der Anwendung automatisch anmelden können.

async login() {
  // 调用登录接口，接口返回登录状态
  const res = await login({ account: this.account, password: this.password })

  // 如果登录成功，就跳转到主页
  if (res.code === 200) {
    // 保存登录状态和用户信息到本地存储中
    uni.setStorageSync('loginInfo', { isLogin: true, userInfo: res.data.userInfo })
    uni.switchTab({ url: '/pages/index' })
  } else {
    uni.showToast({
      title: '登录失败',
      icon: 'none'
    })
  }
}

Im obigen Code verwenden wir die von uniapp bereitgestellte lokale Speicher-API, um den Status zu speichern und zu lesen, wobei wir e'setStorageSync' und 'getStorageSync' als Beispiele nehmen. Auf diese Weise können wir die Funktion der Uniapp-Login-Sprungseite realisieren und eine bessere Unterstützung für die Anwendungsentwicklung und das Benutzererlebnis bieten.

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