How to implement the login page in uniapp step by step

Uniapp is a cross-end development tool based on the Vue.js framework. It supports writing one code and can run on multiple platforms such as mini programs, apps, and H5 at the same time. It is favored by many developers. Implementing a login page is an essential step in developing an App. Next, this article will introduce in detail how to use Uniapp to implement a simple login page in a step-by-step manner.

1. Create a Uniapp project

Download the latest version of HBuilderX from the official website. After the installation is complete, open HBuilderX, click New Project, select the Uniapp template, and then choose to create a new project.

2. Page layout

According to the requirements, we need to implement a login page that includes mobile phone number and password input boxes and login buttons. During the process of creating a new project, Uniapp creates a page named "index" by default, and we can layout it on this page.

First, we need to write a piece of HTML code in the "index" page to create the basic framework of the login page. As shown below:

<template>
  <view>
    <view>
      <input>
    </view>
    <view>
      <input>
    </view>
    <view>
      登录
    </view>
  </view>
</template>

3. Page style

Next, add style code to the template to style each element on the page. As shown below:

<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. Implement login logic

Next, we need to implement login logic, that is, when clicking the login button, send a request to the backend interface, verify the user's identity, and Return the corresponding page based on the verification results.

First, in the <script> tag of the "index" page, add a method "login": </script>

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

Then, in this method, call the uni.request method, backward Send a request through the end interface to verify the user's identity. The specific implementation of this method is as follows:

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

In this method, we first obtain the mobile phone number and password entered by the user in the input box. Next, use the uni.request method to send a request, where the url field is the backend interface address, and the data field contains the data sent to the server. After the request is successful, it is judged whether the information entered by the user is correct based on the status code returned by the backend interface. If it is correct, use the uni.navigateTo method to jump to the home page; otherwise, use the uni.showToast method to prompt the user that the mobile phone number or password is incorrect. If the request fails, use the uni.showToast method to prompt that the request failed.

5. Improve page interaction

In order to improve the user experience, we need to add some interactive effects to the login page. Here, we can add animation effects to the input box to allow users to understand the status of the input box more intuitively.

We can use the v-bind directive provided in Vue.js to achieve this effect. As shown below:

<template>
  <view>
    <view>
      <input>
    </view>
    <view>
      <input>
    </view>
    <view>
      登录
    </view>
  </view>
</template>

In the above code, we use the v-bind directive in the input box to bind HTML attributes. By judging the values ​​​​of isPhoneFocusing and isPasswordFocusing, we switch the input-focusing class name, thereby changing The style of the input box. In this instruction, we also use onFocus and onBlur events to trigger the animation effect when the input box gains and loses focus.

6. Summary

This article introduces how to use Uniapp to implement a simple login page, including page layout, style setting, implementation of login logic and page interaction, etc. Implementing a login page is an essential step in developing an App, and Uniapp provides a very good cross-end development solution. Of course, there are other cross-end development solutions that interested readers can learn about and choose from. I hope this article can help developers who are learning Uniapp.

The above is the detailed content of How to implement the login page in uniapp step by step. For more information, please follow other related articles on the PHP Chinese website!