uniapp にログインページを段階的に実装する方法-uni-app-php.cn

ホームページ

ウェブフロントエンド

uni-app

uniapp にログインページを段階的に実装する方法

PHPz

Apr 23, 2023 am 09:13 AM

Uniapp は、Vue.js フレームワークに基づくクロスエンド開発ツールです。1 つのコードの記述をサポートし、ミニプログラム、アプリ、H5 などの複数のプラットフォームで同時に実行できます。多くの開発者に愛用されています。。アプリ開発においてログインページの実装は欠かせませんが、次にこの記事ではUniappを使って簡単なログインページを実装する方法を段階的に詳しく紹介していきます。

1. Uniapp プロジェクトの作成

公式 Web サイトから HBuilderX の最新バージョンをダウンロードします。インストールが完了したら、HBuilderX を開き、[新しいプロジェクト] をクリックして、Uniapp テンプレートを選択し、新しいプロジェクトを作成します。

2. ページレイアウト

要件に従って、携帯電話番号とパスワードの入力ボックスとログインボタンを含むログインページを実装する必要があります。新しいプロジェクトを作成するプロセス中に、Uniapp はデフォルトで「index」という名前のページを作成し、このページにレイアウトできます。

まず、「インデックス」ページに HTML コードを記述して、ログインページの基本フレームワークを作成する必要があります。以下に示すように:

<template>
  <view class="login">
    <view class="login-input">
      <input type="number" placeholder="请输入手机号" />
    </view>
    <view class="login-input">
      <input type="password" placeholder="请输入密码" />
    </view>
    <view class="login-btn" @click="login">
      登录
    </view>
  </view>
</template>

ログイン後にコピー

3. ページスタイル

次に、ページ上の各要素のスタイルを設定するためのスタイルコードをテンプレートに追加します。以下に示すように:

<style>
  .login {
    margin: 0 auto;
    margin-top: 60px;
    width: 80%;
  }
  .login-input {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
  }
  input {
    width: 100%;
    border: none;
    font-size: 16px;
    height: 40px;
  }
  .login-btn {
    background-color: #007aff;
    color: #fff;
    font-size: 18px;
    padding: 10px;
    text-align: center;
    margin-top: 20px;
    border-radius: 5px;
  }
</style>

ログイン後にコピー

4. ログインロジックの実装

次に、ログインロジックを実装する必要があります。つまり、ログインボタンをクリックすると、バックエンドインターフェイスにリクエストを送信し、ユーザーの身元を確認し、検証結果に基づいて対応するページを返します。

まず、「index」ページの