Bagaimana untuk melaksanakan halaman log masuk dalam uniapp langkah demi langkah

Uniapp ialah alat pembangunan silang berdasarkan rangka kerja Vue.js Ia menyokong penulisan satu kod dan boleh dijalankan pada berbilang platform seperti program mini, apl dan H5 pada masa yang sama . Melaksanakan halaman log masuk ialah langkah penting dalam membangunkan Apl Seterusnya, artikel ini akan memperkenalkan secara terperinci cara menggunakan Uniapp untuk melaksanakan halaman log masuk yang mudah secara langkah demi langkah.

1. Buat projek Uniapp

Muat turun versi terkini HBuilderX daripada tapak web rasmi Selepas pemasangan selesai, buka HBuilderX, klik Projek Baharu, pilih templat Uniapp, dan kemudian pilih untuk membuat projek baru.

2. Susun atur halaman

Mengikut keperluan, kami perlu melaksanakan halaman log masuk yang merangkumi kotak input nombor telefon mudah alih dan kata laluan serta butang log masuk. Semasa proses mencipta projek baharu, Uniapp mencipta halaman bernama "indeks" secara lalai, dan kami boleh susun aturnya pada halaman ini.

Pertama, kita perlu menulis sekeping kod HTML dalam halaman "indeks" untuk mencipta rangka kerja asas halaman log masuk. Seperti yang ditunjukkan di bawah:

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

Seterusnya, tambah kod gaya pada templat untuk menggayakan setiap elemen pada halaman. Seperti yang ditunjukkan di bawah:

<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. Laksana logik log masuk

Seterusnya, kita perlu melaksanakan logik log masuk, iaitu apabila mengklik butang log masuk, hantar permintaan ke antara muka bahagian belakang ke sahkan identiti pengguna , dan kembalikan halaman yang sepadan berdasarkan hasil pengesahan.

Pertama, dalam teg pada halaman "indeks", tambah kaedah "log masuk":

<script>
  export default {
    methods: {
      login() {
        console.log('login');
      }
    }
  };
</script>

Kemudian, dalam kaedah ini, panggil kaedah uni.request , Hantar permintaan ke antara muka bahagian belakang untuk mengesahkan identiti pengguna. Pelaksanaan khusus kaedah ini adalah seperti berikut:

<script>
  export default {
    methods: {
      login() {
        let phone = '13888888888'; //假设输入手机号为13888888888
        let password = '123456'; //假设输入密码为123456
        uni.request({
          url: 'https://www.example.com/login', //后端接口地址
          data: {
            phone: phone,
            password: password
          },
          success: function(res) {
            if (res.statusCode == 200) {
              uni.navigateTo({
                url: '/pages/home/home'
              });
            } else {
              uni.showToast({
                icon: 'none',
                title: '手机号或密码错误'
              });
            }
          },
          fail: function() {
            uni.showToast({
              icon: none,
              title: '请求失败'
            });
          }
        });
      }
    }
  };
</script>

Dalam kaedah ini, kami mula-mula mendapatkan nombor telefon bimbit dan kata laluan yang dimasukkan oleh pengguna dalam kotak input. Seterusnya, gunakan kaedah uni.request untuk menghantar permintaan, dengan medan url ialah alamat antara muka bahagian belakang dan medan data mengandungi data yang dihantar ke pelayan. Selepas permintaan berjaya, ia dinilai sama ada maklumat yang dimasukkan oleh pengguna adalah betul berdasarkan kod status yang dikembalikan oleh antara muka bahagian belakang. Jika betul, gunakan kaedah uni.navigateTo untuk melompat ke halaman utama jika tidak, gunakan kaedah uni.showToast untuk menggesa pengguna bahawa nombor telefon mudah alih atau kata laluan adalah salah. Jika permintaan gagal, gunakan kaedah uni.showToast untuk menggesa bahawa permintaan itu gagal.

5. Memperbaik interaksi halaman

Untuk meningkatkan pengalaman pengguna, kami perlu menambah beberapa kesan interaktif pada halaman log masuk. Di sini, kita boleh menambah kesan animasi pada kotak input untuk membolehkan pengguna memahami status kotak input dengan lebih intuitif.

Kami boleh menggunakan arahan v-bind yang disediakan dalam Vue.js untuk mencapai kesan ini. Seperti yang ditunjukkan di bawah:

<template>
  <view class="login">
    <view class="login-input">
      <input type="number" :placeholder="phonePlaceholder" v-bind:class="{&#39;input-focusing&#39;:isPhoneFocusing}" @focus="onFocus(&#39;phone&#39;)" @blur="onBlur(&#39;phone&#39;)" />
    </view>
    <view class="login-input">
      <input type="password" :placeholder="passwordPlaceholder" v-bind:class="{&#39;input-focusing&#39;:isPasswordFocusing}" @focus="onFocus(&#39;password&#39;)" @blur="onBlur(&#39;password&#39;)" />
    </view>
    <view class="login-btn" @click="login">
      登录
    </view>
  </view>
</template>

Dalam kod di atas, kami menggunakan arahan v-bind dalam kotak input untuk mengikat atribut HTML, dan menukar nama kelas yang memfokuskan input dengan menilai nilai ​​​​daripada isPhoneFocusing dan isPasswordFocusing dengan itu menukar gaya kotak input. Dalam arahan ini, kami juga menggunakan acara onFocus dan onBlur untuk mencetuskan kesan animasi apabila kotak input mendapat dan kehilangan fokus.

6. Ringkasan

Artikel ini memperkenalkan cara menggunakan Uniapp untuk melaksanakan halaman log masuk yang mudah, termasuk reka letak halaman, tetapan gaya, pelaksanaan logik log masuk dan interaksi halaman, dsb. Melaksanakan halaman log masuk ialah langkah penting dalam membangunkan Apl, dan Uniapp menyediakan penyelesaian pembangunan silang hujung yang sangat baik. Sudah tentu, terdapat penyelesaian pembangunan silang hujung lain yang boleh dipelajari dan dipilih oleh pembaca yang berminat. Saya harap artikel ini dapat membantu pembangun yang sedang mempelajari Uniapp.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan halaman log masuk dalam uniapp langkah demi langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!