Utilisez uniapp pour rédiger une page d'inscription simple et pratique

Avec le développement de l'Internet mobile, l'utilisation d'applications mobiles devient de plus en plus populaire. Pour les développeurs, comment concevoir une application simple et facile à utiliser est une tâche qui ne peut être ignorée. Parmi eux, la page d'inscription est l'un des éléments les plus fondamentaux du processus d'utilisation de l'APP. Cet article se concentrera sur la façon d'utiliser uniapp pour rédiger une page d'inscription simple et pratique.

1. Concevoir la page d'inscription

Tout d'abord, nous devons concevoir une page d'inscription qui répond aux exigences du produit. Faites attention au style de conception de la page et placez les informations de rappel clés dans un endroit bien en vue afin que les utilisateurs puissent remplir clairement le processus de formulaire d'inscription.

2. Écrivez la page uniapp

1. Créez le projet uniapp

Ouvrez HBuilderX, sélectionnez un nouveau projet, sélectionnez le type de projet uni-app, remplissez le nom du projet, le chemin, la sélection de modèle (vue) et d'autres informations de base. pour créer le projet.

2. Créer une page d'inscription

Créez un nouveau fichier .vue dans le projet Le code pour créer la page d'inscription est le suivant :

<template>
  <view class="container">
    <view class="title">注册</view>
    <form class="form-box" @submit.prevent="onSubmit">
      <view class="input-box">
        <input class="input" type="text" placeholder="请输入邮箱/手机号" v-model="account" />
      </view>
      <view class="input-box">
        <input class="input" type="password" placeholder="请输入密码" v-model="password1" />
      </view>
      <view class="input-box">
        <input class="input" type="password" placeholder="请再次输入密码" v-model="password2" />
      </view>
     
      <button class="button" type="submit">注册</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      account: "",
      password1: "",
      password2: "",
    };
  },
  methods: {
    onSubmit() {
      const { account, password1, password2 } = this;

      if (!account) {
        return uni.showToast({
          title: "请输入邮箱/手机号",
          icon: "none",
        });
      }

      if (!password1) {
        return uni.showToast({
          title: "请输入密码",
          icon: "none",
        });
      }

      if (!password2) {
        return uni.showToast({
          title: "请再次输入密码",
          icon: "none",
        });
      }

      if (password1 !== password2) {
        return uni.showToast({
          title: "两次输入的密码不一致",
          icon: "none",
        });
      }

      // 注册成功后跳转到首页
      uni.reDirectTo({
        url: "/pages/home/index",
      });
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100rpx;
  padding: 50rpx;
}

.form-box {
  width: 80%;
  border: 1px solid #ccc;
  border-radius: 5rpx;
  padding: 30rpx;
  margin-top: 20rpx;
}

.title {
  font-size: 36rpx;
  margin-bottom: 30rpx;
}

.input-box {
  margin-bottom: 20rpx;
}

.input {
  width: 100%;
  padding: 20rpx;
  font-size: 28rpx;
  border: 1px solid #ccc;
  border-radius: 5rpx;
}

.button {
  width: 100%;
  padding: 20rpx;
  font-size: 28rpx;
  background-color: #00aeef;
  border: none;
  border-radius: 5rpx;
  color: white;
  cursor: pointer;
}
</style>

3 Explication du code

1. Dans le modèle, nous avons d'abord mis en place un formulaire. formulaire, qui contient l'utilisateur Deux cases pour saisir votre email et votre mot de passe, une case pour saisir à nouveau votre mot de passe, et enfin un bouton d'inscription. Nous avons écouté l'événement de soumission sur le formulaire et, lors de la soumission du formulaire, avons appelé la méthode onSubmit pour gérer l'événement d'inscription.
2. Dans le script, nous définissons l'attribut data pour stocker les informations d'e-mail et de mot de passe saisies. En même temps, la méthode onSubmit liée au formulaire est définie. Dans cette méthode, nous utilisons l'instruction if pour vérifier l'intégrité des informations renseignées par l'utilisateur, si les deux mots de passe saisis sont égaux, et accédons à la page d'accueil après une inscription réussie.
3. Avec style, nous avons amélioré la beauté et la convivialité de la page en ajoutant des styles de conteneurs, des styles de formulaire, des styles de zone de saisie, des styles de boutons, etc.

4. Conclusion

Grâce aux étapes ci-dessus, nous avons créé une page d'inscription Uniapp simple et pratique. Pendant le processus de développement de l'APP, nous devons prêter attention à la conception de l'interface utilisateur et à l'amélioration de l'expérience utilisateur, afin que les utilisateurs puissent exécuter plus facilement les fonctions requises.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!