uniappログ​​インジャンプページ

モバイル アプリケーションの開発では、多くの開発者が uniapp を使用してアプリケーション開発を選択します。uniapp の大きな特徴は、クロスプラットフォームをサポートしており、開発効率が向上するだけでなく、アプリケーションの運用と保守が容易になることです。より簡単に、より便利に。 uniapp アプリケーションでは、ログイン ジャンプ ページは一般的な機能ですが、uniapp ログイン ジャンプ ページを実装する方法の具体的な手順について説明します。

1. 最初にログイン ページを作成します。uniapp が提供するテンプレートを使用することも、独自のコードを作成して実装することもできます。
2. ログイン ページでは、uniapp が公式に提供するログイン コンポーネントを導入する必要があります。コードは次のとおりです:

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

上記のコードでは、基本的なログイン フォームを作成しましたフォームが送信されるとログイン インターフェイスが呼び出されます。ログインが成功するとホームページにジャンプします。ログインが失敗すると、ログインが失敗したことを示すポップアップ ウィンドウが表示されます。

3. ログイン インターフェイスでは、アカウントのパスワードを確認し、ユーザーが入力したアカウント番号とパスワードが正しいかどうかを確認する必要があります。正しい場合は、ログイン成功のステータス コードを返し、ユーザー情報、それ以外の場合は、ログインに失敗した場合のステータス コードとエラー メッセージを返します。

import request from '@/utils/request'

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

上記のコードでは、uniapp が公式に推奨しているネットワーク リクエスト ライブラリ リクエストを使用してリクエストを送信していますが、同時にバックエンドの要件に従ってデータを送信および暗号化する必要があります。エンドインターフェイス。

4. ホームページでは、ユーザーのログイン ステータスを確認する必要があります。ユーザーがログインしている場合は、ユーザーの情報が表示されます。ユーザーがログインしていない場合は、ログイン ページにジャンプしますログインします。

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

上記のコードでは、checkLogin メソッドを使用してローカル ストレージにログイン情報が存在するかどうかを確認します。存在する場合は、isLogin を true に設定し、userInfo をローカル ストレージのユーザー情報に設定します。それ以外の場合は、 isLogin を false に設定し、ユーザーがログインしていないことを示します。ユーザーがログインしていない場合は、gotoLogin メソッドを使用して、ログイン操作のためのログイン ページにジャンプできます。

5. ログインに成功したら、次回アプリケーションを開いたときに自動的にログインできるように、ログイン ステータスとユーザー情報をローカル ストレージに保存する必要があります。

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

上記のコードでは、uniapp が提供するローカル ストレージ API を使用して、e'setStorageSync' と 'getStorageSync' を例として、状態の保存と読み取りを行います。これにより、uniapp ログインジャンプページの機能を実現し、アプリケーション開発とユーザーエクスペリエンスをより良くサポートします。

以上がuniappログ​​インジャンプページの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。