uniappログインジャンプページ-uni-app-php.cn

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

WBOY

リリース： 2023-05-25 21:08:35

オリジナル

591 人が閲覧しました

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

最初にログインページを作成します。uniapp が提供するテンプレートを使用することも、独自のコードを作成して実装することもできます。
ログインページでは、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>

ログイン後にコピー

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

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

import request from '@/utils/request'

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

ログイン後にコピー

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

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

<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 メソッドを使用して、ログイン操作のためのログインページにジャンプできます。

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

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 サイトの他の関連記事を参照してください。