uniapp はローカルログインおよび登録機能をどのように実装しますか?-uni-app-php.cn

uniapp はローカルログインおよび登録機能をどのように実装しますか?

PHPz

リリース： 2023-04-19 14:35:28

オリジナル

2429 人が閲覧しました

モバイルインターネットの急速な発展に伴い、多数のアプリケーションが絶えず登場しています。これらのアプリケーションはすべてユーザーにログインして登録することを要求しており、ユーザーはモバイルデバイスでログインして登録する方法がますます増えています。これらの方法の中で、ローカルログイン登録は広く使用されており、その実装はユーザーを容易にするだけでなく、ユーザーのプライバシーとセキュリティを効果的に保護します。

この記事では、uniapp がローカルログイン登録を実装する方法について簡単に説明します。 uniapp は、一度開発するだけで複数のプラットフォーム (Android、iOS、H5 など) に公開できるクロスプラットフォームアプリケーションフレームワークです。 uniapp の最新バージョンを使用すると、開発者はローカルログインと登録機能を簡単に完了できます。

1. 事前知識の準備

uniapp ローカルログイン登録を実装する前に、uniapp と関連する技術用語を理解する必要があります。

uniapp: uniapp は、Vue.js に基づくクロスプラットフォームアプリケーションフレームワークで、ワンタイム開発とマルチエンドリリースを実現できます。 uniapp はコンポーネントベースの開発モデルを提供し、Vue.js の構文とライフサイクルをサポートします。詳細については、uni-app の公式ドキュメントをご覧ください。
Vuex: Vuex は、Vue.js 専用に設計された状態管理ライブラリであり、コンポーネント間で状態を共有できます。 Vuex を通じて、アプリケーション内のすべてのコンポーネントのデータフローを管理し、コンポーネント間のデータ共有を実現します。後続の実装では、Vuex の知識を適用します。
uni-app プラグイン: uni-app プラグインは、通常、Vue.js プラグインのカプセル化を通じて実装される uni-app の機能を拡張できます。 uni-login、uni-verify など、uni-app 用のプラグインが多数あります。実装プロセス中に適切なプラグインを選択して、ローカルログインおよび登録機能を実装します。

2. 実装手順

uniapp プロジェクトの作成: HBuilderX を使用して uniapp プロジェクトを作成し、開発環境を構成します。
uni-login プラグインをインストールします。プロジェクトのルートディレクトリにコマンドラインを入力し、npm install @dcloudio/uni-login を実行して、uni-login プラグインをインストールします。
uni-login プラグインを使用してログイン登録を実装する: ログインインターフェイスと登録インターフェイスで、uni-login プラグインが提供するテンプレートとメソッドを導入します。 uni-login プラグインから返される成功または失敗のコールバックを解析して、ログイン登録関数を実装します。
正常に取得したユーザー情報を Vuex に保存する: Vuex を使用してローカルログインステータスを管理し、正常に取得したユーザー情報を後で使用できるように Vuex に保存します。
ログアウト: ログアウト機能を実装し、Vuex に保存されているユーザー情報をクリアして、ログインインターフェイスに戻ります。
ログインおよび登録インターフェイスのレイアウトを改善する: テーマのスタイル、アイコン、ボタンなどを変更して、ログインおよび登録インターフェイスのレイアウトを改善します。

3. 実装方法

uniappプロジェクトの作成

HBuilderXでuniappプロジェクトを作成しますが、ここでは説明しません。

uni-login プラグインをインストールします

プロジェクトのルートディレクトリにコマンドラインを入力し、npm install @dcloudio/uni-login## を実行します。＃。インストールが成功すると、プロジェクトの package.json に uni-login プラグインが表示されます。

ログインページと登録ページで、uni-login テンプレートを追加します:

<template>
  <view>
    <login
      @login="login"
      passwordStyleType="password"
      :register-show-stop-propagation="false"
      :register-primary-text="&#39;注册（或通过以下方式登录）&#39;"
    />
  </view>
</template>

ログイン後にコピー

スクリプトで、uni-login テンプレートを登録します:

import login from '@/components/uni-login/uni-login.vue' // 引入uni-login模板

export default {
  components: {
    login
  },
  methods: {
    // 登录方法
    login(userinfo) {
      console.log(userinfo)
      // 这里可以将获取到的用户信息保存到Vuex中
    }
  }
}

ログイン後にコピー

登録ページは同じです。

スクリプトでは、ログインに成功すると、使用できるユーザー情報がログイン関数に渡されることがわかります。したがって、取得した情報を Vuex に保存して、後続のアプリケーションで簡単に取得して使用できるようにする必要があります。

Vuex でユーザー情報を作成および管理する:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
    user:{
      name:'匿名',
      age:0
    }
  },
  mutations:{
    setUser(state, payload) {
      state.user = payload.user
    },
    // 清除用户信息
    clearUser(state) {
      state.user = {}
    }
  }
})

export default store

ログイン後にコピー

ログイン方法では、Vuex を通じてユーザー情報を保存できます:

// 登录方法
login(userinfo) {
  console.log(userinfo)
  // 将获取到的用户信息保存到Vuex中，便于后续应用
  this.$store.commit('setUser',{user:userinfo})
  // 登录成功后，进行路由跳转
  $uni.navigateTo({
    url: '/pages/home/home'
  });
}

ログイン後にコピー

ホームページインターフェイスでは、次の情報を使用できます。 Vuex は、保存されたユーザー情報を取得して、異なるユーザー間のデータ分離を実現します。

export default {
  data() {
    return {
      user: {},
    }
  },
  mounted() {
    this.user = this.$store.state.user
  },
  methods: {},
}

ログイン後にコピー

ホームページインターフェイスにログアウト機能を実装するには、対応するイベントをログアウトボタンに追加し、Vuex Just でユーザー情報を実行するだけです。それをクリアしてください。

// 退出登录方法
logout() {
  // 清除Vuex中保存的用户信息
  this.$store.commit('clearUser')
  // 退出登录后，回到登录界面
  $uni.navigateTo({
    url: '/pages/login/login'
  });
}

ログイン後にコピー

uniapp が提供するコンポーネントやテンプレートなどを使用して、クールなログインおよび登録インターフェイスを簡単に構築できますCSS スタイル、ロゴ、タブバーなどを通じて、ユーザーエクスペリエンスを向上させることができます。

4. 概要

ここまでで、uniapp のローカルログインと登録機能の実装が完了しました。uni-login プラグインは、モバイル端末のログインと、その中核となる機能を実現しました。登録プロセスとそれは非常に簡単に使用できます。この記事の紹介を通じて、uniappの基礎知識、Vuexの使い方、uni-loginの使い方などを学びましたので、皆様のお役に立てれば幸いです。

実際のアプリケーションプロセスでは、要件や技術アーキテクチャが異なるため、実装方法も異なります。しかし、実際の状況を把握し、ローカルログインと登録の効果をより良く実現し、継続的に最適化および改善してユーザーエクスペリエンスを向上させることは可能です。

以上がuniapp はローカルログインおよび登録機能をどのように実装しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。