モバイル デバイスの普及により、モバイル アプリケーションは人々の日常生活に欠かせないものになりました。ログイン機能の実装は、あらゆるアプリケーションの基本機能の 1 つです。今回はハイブリッド開発フレームワークuniappを利用してログイン機能を実装する方法を紹介します。
Uniapp は、Vue.js に基づくハイブリッド開発フレームワークであり、同じコード セットを使用して、iOS、Android、H5 などの複数のプラットフォーム向けのアプリケーションを開発できます。 、小さなプログラムなど。さらに重要なのは、ローカル パッケージングおよびクラウド パッケージング機能もサポートしているため、アプリケーション開発効率とユーザー エクスペリエンスが大幅に向上します。
ログイン機能の実装プロセスは大まかに次のとおりです:
次に、上記のプロセスを段階的に実装していきます。
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 メソッドを呼び出します。
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 つの操作を定義します。これらの操作は変更であり、状態への提出です。
次に、ログイン検証ロジックを実装する必要があります。アクションでは、ログイン方法を定義します。このメソッドでは、サーバーに検証を要求するために非同期操作を実行できます。
// 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 のユーザー情報とログイン ステータスが更新されます。検証が失敗した場合は、プロンプトメッセージがポップアップ表示されます。
store/index.js ファイルでは、ユーザーのログアウト動作を処理するためのログアウト メソッドも定義します。
// store/index.js
actions: {
// ...省略上文中的代码
async logout({ commit }) {
// 清除本地缓存信息
uni.removeStorageSync('userInfo')
// 清除App Store
commit('setUserInfo', null)
commit('setIsLogin', false)
}
}ログアウト メソッドでは、次のことができます。 uni.removeStorageSync メソッドを使用して、ローカル キャッシュ情報をクリアします。同時に、vuex のユーザー情報とログインステータスも更新する必要があります。
アプリケーションでは、ユーザーがログインしているかどうかを確認する必要があります。ログインしていない場合は、ログインページに移動する必要があります。 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 でユーザーのステータスを更新できます。それ以外の場合は、ログインページにジャンプします。
この記事では、uniapp ハイブリッド開発フレームワークを使用してログイン機能を実装する方法を紹介しました。まず、ログイン インターフェイスを記述してアプリケーション インターフェイスを構築し、次に vuex を使用してアプリケーションのステータスを管理し、ユーザーのログイン ステータスを記録および管理し、次にアプリケーション内のネットワーク リクエストを通じてユーザーのログイン情報を検証し、Localキャッシュ テクノロジはユーザー ステータスを記録し、最後にルーティング フック メカニズムを使用してユーザーのログイン ステータスを特定し、そこにジャンプします。
以上がuniappハイブリッド開発でログイン機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
