uniapp が正常にログインしたら、他のページにジャンプして更新します

インターネットの発展に伴い、モバイル端末の開発はますます重要になっています。これに基づいて、時代の要求に応じて uniapp が登場し、現在ではクロスプラットフォームのモバイル開発フレームワークとして人気があります。 uniapp では、ログインは非常に一般的な機能であり、更新の問題も開発プロセス中に考慮する必要がある問題です。この記事では、uniappでログイン成功後に他のページにジャンプして更新する方法を詳しく紹介します。

1. 前提知識

導入を始める前に、uniapp の前提知識を紹介する必要があります。

1. ルーティング

uniapp のルーティングは、uni-app の組み込みメソッド uni.navigateTo および uni.redirectTo によって実装されます。このうち、uni.navigateTo は次のページにジャンプし、前のページに戻ることができますが、uni.redirectTo は次のページにリダイレクトするために使用され、前のページに戻ることはできません。

さらに、uniapp には、すべてのページを閉じて現在のページを開くための uni.reLaunch、tabBar ページにジャンプするための uni.switchTab、および前のページに戻るための uni.navigateBack もあります。

2.vue.js フレームワーク

uniapp は vue.js フレームワークに基づいて実装されているため、開発プロセス中に vue.js の関連する基本的な構文と機能を習得する必要があります。コンポーネント開発、状態管理、ライフサイクルなど

3. 非同期リクエスト

ログイン機能を実装する場合、ユーザーのログイン情報が正しいことを確認するためにリクエストをバックグラウンドに送信する必要があります。したがって、uni.request 非同期リクエストの関連知識を習得する必要があります。

4. ローカル ストレージ

uniapp では、uni.setStorageSync と uni.getStorageSync を使用してローカル データを保存および読み取りできます。ローカル ストレージは、複数のページ間でデータを共有するのに役立ち、データの永続的なストレージを可能にします。

2. ソリューションの紹介

ログイン成功後に他のページにジャンプして更新するプロセスでは、次の 2 つのタスクを完了する必要があります:

1. ユーザー ログインを保存するステータス情報

2. 他のページのユーザーのログイン ステータス情報を確認し、ページを再レンダリングします

次に、これら 2 つのタスクの実装方法を詳しく紹介します。

1. ユーザーのログイン ステータス情報を保存する

ユーザーが正常にログインした後、ユーザーのログイン ステータス情報を保存する必要があります。実装計画は次のとおりです。

ステップ 1: ログイン成功のコールバック関数で、ユーザーのログイン ステータス情報を取得してローカルに保存するリクエストをバックグラウンドに送信します。

uni.request({
  url: 'http://www.example.com/login',
  data: {
    username: 'username',
    password: 'password'
  },
  success: (res) => {
    if(res.statusCode !== 200) {
      uni.showModal({
        content: '登录失败，请检查用户名和密码是否正确'
      })
    } else {
      // 保存用户登录状态信息
      uni.setStorageSync('isLogin', true)
      //跳转到其他页面
      uni.navigateTo({
        url: '/pages/other/other'
      })
    }
  }
})

ログイン成功のコールバック関数では、バックグラウンドでログイン リクエストを送信し、リクエストが成功すると、ユーザーのログイン ステータス情報をローカルに保存します。この例では、ユーザーのログイン ステータス情報のキー名を isLogin に設定し、その値を true に設定します。

2. ユーザーが他のページにログインしたかどうかを判断し、ページを再レンダリングする

ユーザーがログインして他のページにジャンプした後、ユーザーがログインしたかどうかを判断する必要があります。他のページにログインし、ログイン ステータス情報に基づいてページをレンダリングします。実装計画は次のとおりです。

Step1: 他のページの onLoad ライフサイクル関数で、ユーザーがログインしているかどうかを判断します。

onLoad() {
  if(!uni.getStorageSync('isLogin')) {
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
}

他のページの onLoad ライフサイクル関数では、uni.getStorageSync を通じてローカルに保存されているユーザーのログイン ステータス情報を取得します。 isLogin が存在しない場合、つまりユーザーがログインしていない場合は、ログイン ページにリダイレクトして、ユーザーが再度ログインできるようにします。

ステップ 2: 他のページの onShow ライフサイクル関数で、ユーザーがログインしたかどうかを判断し、ログイン ステータス情報に基づいてページをレンダリングします。

onShow() {
  if(uni.getStorageSync('isLogin')) {
    //重新渲染页面
    console.log('已经登录')
  } else {
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
}

他のページの onShow ライフサイクル関数では、uni.getStorageSync を通じてローカルに保存されているユーザーのログイン ステータス情報も取得します。 isLogin が存在する場合、つまりユーザーがログインしている場合、ページを再レンダリングできます。 isLogin が存在しない場合、つまりユーザーがログインしていない場合は、ログイン ページにリダイレクトして、ユーザーが再度ログインできるようにします。

3. 概要

この記事では、uniapp でログインに成功した後に他のページにジャンプして更新する解決策を紹介します。ユーザーのログインステータス情報を保存し、ユーザーが他のページにログインしたかどうかを判断し、ログインステータス情報に基づいてページを再レンダリングすることで、ユーザーのログイン機能をより適切に実装および管理できます。上記のソリューションは参照のみを目的としており、開発者は実際のニーズに応じて変更および最適化できます。

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