Implementierung einer einfachen Login-Seite für das WeChat-Applet (mit Quellcode)

<view class="v1" style="Höhe:{{clientHeight?clientHeight+'px':'auto'}}">
 
 <!-- v2-Unteransicht des übergeordneten Containers verwendet absolutes Layout -->
   <Klasse anzeigen="v2">
     <view class="dltext" style="width: 232rpx; height: 92rpx; display: block; box-sizing: border-box; left: 0rpx; top: -2rpx">Anmelden</view>
  
     <!-- Telefonnummer-->
     <Ansichtsklasse="phoneCs">
       <!-- <image src="/images/zhang.png" class="ph"></image> -->
       <input placeholder="Bitte geben Sie Ihre Kontonummer ein" type="number" bindinput="content" />
     </Ansicht>
     <!-- Passwort -->
     <Ansichtsklasse=PasswortCs">
       <!-- <image src="/images/mi.png" class="ps"></image> -->
       <input placeholder="Bitte geben Sie Ihr Passwort ein" type="password" bindinput="password" />
     </Ansicht>
     <!-- Anmeldeschaltfläche-->
     <Ansichtsklasse="denglu">
       <button class="btn-dl" type="primary" bindtap="goadmin">Anmelden</button>
     </Ansicht>
   </Ansicht>
 </Ansicht>

/* Seiten/Login/Login.wxss *//* Das größte übergeordnete Element*/
.v1{
  Anzeige: Block;
  Position: absolut;
  Breite: 100 %;
  Hintergrundfarbe: RGB (250, 248, 248);
}
/* Weißer Bereich */
.v1 .v2{
  Position: relativ;
  Rand oben: 150rpx;
  links: 100rpx; 
  Breite: 545rpx;
  Höhe: 600rpx;
  Hintergrundfarbe: RGB (250, 248, 248);
  Randradius: 50rpx;
}
/* Login-Text im weißen Bereich*/
.v1 .v2 .dltext{
  Rand oben: 50rpx;
  Position: absolut;
  Rand links: 50rpx;
  Breite: 150rpx;
  Höhe: 100rpx;
  Schriftgröße: 60rpx;
  Schriftfamilie: Helvetica;
  Farbe: #000000;
  Zeilenhöhe: 100rpx;
  Buchstabenabstand: 2rpx;
}
/* Handybild + Eingabefeld + übergeordnete Containeransicht unterstreichen */
.v1 .v2 .phoneCs{
  Rand oben: 200rpx;
  Rand links: 25rpx;
  Position: absolut;
  Anzeige: Flex;
  Breite: 480rpx;
  Höhe: 90rpx;
  Hintergrundfarbe: weiß;
  
}
/* Mobiltelefonsymbol */
.v1 .v2 .phoneCs .ph{
  Rand oben: 5rpx;
  Rand links: 30rpx;
  Breite: 55rpx;
  Höhe: 55rpx;
}
/* Telefonnummer-Eingabefeld*/
.v1 .v2 .phoneCs Eingabe{
  Breite: 400rpx;
  Schriftgröße: 30rpx;
  Rand oben: 25rpx;
  Rand links: 30rpx;
}
/* Passwortsymbol + Eingabefeld + kleines Augensymbol + übergeordnete Containeransicht unterstreichen */
.v1 .v2 .passwordCs{
  Rand oben: 350rpx;
  Rand links: 25rpx;
  Position: absolut;
  Anzeige: Flex;
  Breite: 480rpx;
  Höhe: 90rpx;
  Hintergrundfarbe: weiß;

}
/* Passwortsymbol */
.v1 .v2 .passwordCs .ps{
  Rand oben: 5rpx;
  Rand links: 30rpx;
  Breite: 55rpx;
  Höhe: 55rpx;
}
/* Augensymbol */
.v1 .v2 .passwortCs .auge{
  Rand oben: 5rpx;
  Rand links: 65rpx;
  Breite: 55rpx;
  Höhe: 55rpx;
}
/* Passwort-Eingabefeld*/
.v1 .v2 .passwordCs Eingabe{
  Breite: 400rpx;
  Schriftgröße: 30rpx;
  Rand oben: 25rpx;
  Rand links: 30rpx;
}
/* Containeransicht der Anmeldeschaltfläche */
.v1 .v2 .denglu{
  Breite: 480rpx;
  Höhe: 80rpx;
  Position: absolut;
  Rand oben: 515rpx;
  Rand links: 25rpx;
  
}
/* Anmeldeschaltfläche */
.v1 .v2 .denglu-Schaltfläche{
  Polsterung: 0rpx;
  Zeilenhöhe: 70rpx;
  Schriftgröße: 30rpx;
  Breite: 100 %;
  Höhe: 100%;
  Rahmenradius: 5rpx;
}

//index.js
//Anwendungsinstanz abrufen const app = getApp()
 let Benutzername=''
 let password=''
Seite({
  Daten: {
    Benutzername: '',
    Passwort: '',
    Kundenhöhe:''
  },
  beim Laden(){
    var das=dies
    wx.getSystemInfo({ 
      Erfolg: Funktion (res) { 
        Konsole.log(Res.Fensterhöhe)
          dass.setData({ 
              Clienthöhe:res.windowHeight
        }); 
      } 
    }) 
  },
  //Protokoll goxieyi(){
   wx.navigateTo({
     URL: '/pages/oppoint/oppoint',
   })
  },
  //Den Eingabeinhalt abrufen content(e){
    Benutzername=e.detail.Wert
  },
  Passwort(e){
    Passwort=e.detail.value
  },
  //Anmeldeereignis goadmin(){
    let flag = false // zeigt an, ob das Konto existiert, false ist der Anfangswert, wenn (Benutzername=='')
    {
      wx.showToast({
        Symbol: „keine“,
        Titel: „Konto darf nicht leer sein“,
      })
    }sonst wenn(Passwort==''){
      wx.showToast({
        Symbol: „keine“,
        Titel: 'Das Passwort darf nicht leer sein',
      })
    }anders{
      wx.cloud.database().collection('adminShop')
      .erhalten({
        Erfolg:(res)=>{
          konsole.log(res.daten)
          let admin = res.data
          for (let i = 0; i < admin.length; i++) { //Datenbankobjektsammlung durchlaufen if (username === admin[i].username) { //Konto ist bereits vorhanden flag=true;
              if (password !== admin[i].password) { //Beurteilen, ob das Passwort richtig ist oder nicht wx.showToast({ //Informationen zum Passwortfehler anzeigen title: 'Falsches Passwort!!',
                  Symbol: „Fehler“,
                  Dauer: 2500
                });
               brechen;
              } anders {
                wx.showToast({ //Informationen zur erfolgreichen Anmeldung anzeigen Titel: ‚Anmeldung erfolgreich!‘,
                  Symbol: „Erfolg“,
                  Dauer: 2500
                })
                Flagge=wahr;
                wx.setStorageSync('admin', Passwort)
               wx.navigateTo({
                 URL: '/Seiten/Administrator/Administrator',
               })
                brechen;
              }
            }
          };
          if(flag==false)//Nach dem Durchlaufen der Daten wird festgestellt, dass es kein solches Konto gibt {
            wx.showToast({
              Titel: 'Dieser Benutzer existiert nicht',
              Symbol: „Fehler“,
              Dauer: 2500
            })
          }
        }
      })
    }
  },
})