uniapp怎麼手把手實現登入頁面-uni-app-PHP中文網

首頁

web前端

uni-app

uniapp怎麼手把手實現登入頁面

PHPz

Apr 23, 2023 am 09:13 AM

Uniapp是一款基於Vue.js框架的跨端開發工具，支援編寫一份程式碼，可同時在小程式、App、H5等多個平台上運行，受到了眾多開發者的青睞。實現一個登入頁面是開發App不可或缺的一步，接下來本文將透過手把手的方式，詳細介紹如何使用Uniapp實作一個簡單的登入頁面。

一、建立Uniapp項目

在官網下載最新版的HBuilderX，安裝完成後開啟HBuilderX，點選新建項目，選擇Uniapp模板，然後選擇建立新項目。

二、頁面佈局

根據需求，我們需要實作一個包含手機號碼和密碼輸入框以及登入按鈕的登入頁面。在新專案的過程中，Uniapp預設會建立一個名為"index"的頁面，我們可以在該頁面進行佈局。

首先，我們需要在"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>

登入後複製

三、頁面樣式

接著，在範本中加入樣式程式碼，來為頁面中的每個元素進行樣式設定。如下所示：

<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>

登入後複製

四、實作登入邏輯

接下來，我們需要實作登入邏輯，即在點擊登入按鈕時，向後端介面發送請求，驗證使用者身份，並根據驗證結果傳回相應的頁面。

首先，在"index"頁面的