uniappハイブリッド開発でログイン機能を実装-uni-app-php.cn

uniappハイブリッド開発でログイン機能を実装

WBOY

リリース： 2023-05-26 10:02:36

オリジナル

1304 人が閲覧しました

モバイルデバイスの普及により、モバイルアプリケーションは人々の日常生活に欠かせないものになりました。ログイン機能の実装は、あらゆるアプリケーションの基本機能の 1 つです。今回はハイブリッド開発フレームワークuniappを利用してログイン機能を実装する方法を紹介します。

1. uniapp の概要

Uniapp は、Vue.js に基づくハイブリッド開発フレームワークであり、同じコードセットを使用して、iOS、Android、H5 などの複数のプラットフォーム向けのアプリケーションを開発できます。、小さなプログラムなど。さらに重要なのは、ローカルパッケージングおよびクラウドパッケージング機能もサポートしているため、アプリケーション開発効率とユーザーエクスペリエンスが大幅に向上します。

2. 実装プロセス

ログイン機能の実装プロセスは大まかに次のとおりです:

ユーザー名とパスワードの入力ボックスを含むログインインターフェイスを作成します。そしてログインボタン。
uniapp の vuex (Vue.js ステータスマネージャー) でユーザーのログインステータスを管理します。
ネットワークリクエストを通じて、検証のためにユーザーのログイン情報をサーバーに渡します。
検証が成功したら、ユーザーの関連情報をローカルキャッシュに保存し、vuex でユーザーのステータスを更新します。
ユーザーが関連機能を実装するためにアプリケーションにログインしているかどうかを確認します。

次に、上記のプロセスを段階的に実装していきます。

2.1 ログインインターフェイスを作成する

uniapp プロジェクトでは、インターフェイスは Vue コンポーネントを作成することによって実装されます。 Pages フォルダーに Login.vue ファイルを作成し、ログインインターフェイスのコードを次のように記述します。

<!-- Login.vue -->
<template>
  <view class="container">
    <view class="input-box">
      <input v-model="username" type="text" placeholder="用户名">
    </view>
    <view class="input-box">
      <input v-model="password" type="password" placeholder="密码">
    </view>
    <view class="btn-wrapper">
      <button @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      /* 登录验证 */
    }
  }
}
</script>

<style>
/* 样式 */
</style>

ログイン後にコピー

上記のコードでは、uniapp が提供する Vue コンポーネントといくつかの簡単なスタイルを使用して、ログインインターフェイス。入力ボックスとログインボタンを定義し、ログインボタンがクリックされたときに handleLogin メソッドを呼び出します。

2.2 ユーザーステータスの管理

uniapp では、アプリケーションのステータスを管理するツールは vuex です。まず、プロジェクト内にストアフォルダーを作成し (存在しない場合)、そのストアフォルダーの下にindex.js ファイルを作成する必要があります。次に、index.js でユーザーのステータスと操作を定義します。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userInfo: null, // 用户信息
    isLogin: false // 是否登录
  },
  mutations: {
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    },
    setIsLogin(state, isLogin) {
      state.isLogin = isLogin
    }
  },
  actions: {
    login({ commit }, userInfo) {
      /* 登录验证 */
    },
    logout({ commit }) {
      /* 退出登录 */
    }
  }
})

export default store

ログイン後にコピー

上記のコードでは、まず Vue.use() メソッドを通じて Vuex プラグインを使用し、次にストアオブジェクトを定義します。ストアオブジェクトでは、状態、突然変異、アクションなどの Vue.js の基本概念を使用します。状態はアプリケーションの状態を保存するために使用され、ミューテーションは状態を変更するために使用され、アクションはミューテーションを送信するために使用されます。 userInfo と isLogin という 2 つの状態を定義しました。これらは、それぞれユーザー情報とユーザーがログインしているかどうかを保存するために使用されます。次に、ログインとログアウトという 2 つの操作を定義します。これらの操作は変更であり、状態への提出です。

2.3 ログイン検証の実行

次に、ログイン検証ロジックを実装する必要があります。アクションでは、ログイン方法を定義します。このメソッドでは、サーバーに検証を要求するために非同期操作を実行できます。

// store/index.js
actions: {
  async login({ commit }, userInfo) {
    const res = await uni.request({
      url: 'http://api.example.com/login',
      method: 'POST',
      data: userInfo
    })

    if(res.data.code === 0) {
      // 登录成功
      const userInfo = res.data.userInfo

      // 更新本地存储信息
      uni.setStorageSync('userInfo', userInfo)

      // 更新Vuex状态
      commit('setUserInfo', userInfo) // 存储用户信息
      commit('setIsLogin', true) // 修改登录状态
    } else {
      // 登录失败
      uni.showToast({
        title: '登录失败',
        icon: 'none'
      })
    }
  }
}

ログイン後にコピー

login メソッドでは、まず uni.request メソッドを通じてサーバーに POST リクエストを送信し、ユーザー情報を渡します。サーバーからのフィードバックを受けて簡易判定を行いました。ログイン検証に合格すると、サーバーから返されたユーザー情報がローカルキャッシュに保存され、vuex のユーザー情報とログインステータスが更新されます。検証が失敗した場合は、プロンプトメッセージがポップアップ表示されます。

2.4 ログアウト

store/index.js ファイルでは、ユーザーのログアウト動作を処理するためのログアウトメソッドも定義します。

// store/index.js
actions: {
  // ...省略上文中的代码
  async logout({ commit }) {
    // 清除本地缓存信息
    uni.removeStorageSync('userInfo')

    // 清除App Store
    commit('setUserInfo', null)
    commit('setIsLogin', false)
  }
}

ログイン後にコピー

ログアウトメソッドでは、次のことができます。 uni.removeStorageSync メソッドを使用して、ローカルキャッシュ情報をクリアします。同時に、vuex のユーザー情報とログインステータスも更新する必要があります。

2.5 アプリケーションでのユーザーのログイン状態の確認

アプリケーションでは、ユーザーがログインしているかどうかを確認する必要があります。ログインしていない場合は、ログインページに移動する必要があります。 Vue.js でグローバルルーティングフック beforeEach を使用して、ログインするかどうかを決定します。コードは次のとおりです。

// main.js
import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  store,
  ...App
})

app.$mount()

// 全局路由钩子
uni.$on('routeUpdate', function() {
  uni.getStorage({
    key: 'userInfo',
    success: function(res) {
      // 用户已登录，更新Vuex状态
      store.commit('setIsLogin', true)
      store.commit('setUserInfo', res.data)
    },
    fail: function() {
      // 用户未登录，跳转到登录页
      if(uni.getStorageSync('isLogin') !== 'true' && uni.getStorageSync('isLogin') !== true) {
        uni.navigateTo({
          url: '/pages/Login'
        })
      }
    }
  })
})

ログイン後にコピー

上記のコードでは、uni.$on メソッドを使用して更新イベントをリッスンします。ルート変更時はその時の判断。まず、uni.getStorage メソッドを通じてローカルキャッシュ内のユーザー情報を取得します。ユーザー情報が正常に取得できれば、ユーザーはログインしていることになり、vuex でユーザーのステータスを更新できます。それ以外の場合は、ログインページにジャンプします。

3. まとめ

この記事では、uniapp ハイブリッド開発フレームワークを使用してログイン機能を実装する方法を紹介しました。まず、ログインインターフェイスを記述してアプリケーションインターフェイスを構築し、次に vuex を使用してアプリケーションのステータスを管理し、ユーザーのログインステータスを記録および管理し、次にアプリケーション内のネットワークリクエストを通じてユーザーのログイン情報を検証し、Localキャッシュテクノロジはユーザーステータスを記録し、最後にルーティングフックメカニズムを使用してユーザーのログインステータスを特定し、そこにジャンプします。

以上がuniappハイブリッド開発でログイン機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。