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

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

1. uniapp の概要

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

2. 実装プロセス

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

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

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

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