Beispiel für die Entwicklung einer Willkommensschnittstelle des WeChat Mini-Programms, ausführliche Erläuterung

Begrüßungsoberfläche des WeChat Mini-Programms

Die meisten Apps auf dem Markt verfügen über eine Willkommensschnittstelle. Im Folgenden wird gezeigt, wie eine Willkommensschnittstelle über ein WeChat-Applet implementiert wird.

Folgendes wird in der folgenden Reihenfolge eingeführt:

Umsetzung des Layouts

Implementierung der Logik

Umsetzung von Stil

1. Umsetzung des Layouts

Das gesamte Layout wird mithilfe der Swiper-Slide-Ansicht implementiert. Der Block umschließt jedes Element der Sliding-Ansicht. Das Element enthält Bildbilder und Schaltflächen.

<swiper indicator-dots="true">
  <block wx:for="{{imgs}}" wx:for-index="index">
   <swiper-item class="swiper-items" >
    <image class="swiper-image" src="{{item}}"></image>
    <button class="button-img" bindtap="start" wx:if="{{index == imgs.length - 1}}" >立即体验</button>
   </swiper-item>
  </block>
</swiper>

2. Implementierung der Logik

In den Daten wird ein imgs-Array vorbereitet, in dem die Adressen von drei Bildern gespeichert werden. Hier gibt es auch eine Startfunktion, mit der das Klickereignis der Schaltfläche auf der Schnittstelle überwacht wird.

Die Funktion der wx.navigateTo-API besteht darin, den Sprung der Schnittstelle zu realisieren und über eine Zurück-Schaltfläche zu verfügen. Die URL wird verwendet, um die Schnittstelle anzugeben, zu der gesprungen werden soll.

Page({
 data:{
   imgs:[
     "http://img.kaiyanapp.com/5edbf92b929f9174e3b69500df52ee21.jpeg?imageMogr2/quality/60",
     "http://img.kaiyanapp.com/f2c497cb520d8360ef2980ecd0efdee7.jpeg?imageMogr2/quality/60",
     "http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
   ],
 
   img:"http://img.kaiyanapp.com/7ff70fb62f596267ea863e1acb4fa484.jpeg",
 },
 
 start(){
    wx.navigateTo({
     url: '../home/home'
   })
   // wx.redirectTo({ url: '../index/index' })
 },
 
 
})

3. Umsetzung des Stils

Der Swiper-Stil ist der Stil, der das Schiebesteuerelement definiert: Die Position des Schiebesteuerelements ist das absolute Layout, und Breite und Höhe sollen den gesamten Bildschirm einnehmen.

Der .swiper-image-Stil ist der Stil, der das Bild definiert: Breite und Höhe sollen den gesamten Bildschirm ausfüllen, und die Transparenz beträgt 0,9

Der .button-img-Stil ist der Stil, der die Schaltflächenschaltfläche definiert: Die Position ist das absolute Layout, 90 Pixel von unten, die Transparenz beträgt 0,6, ...

swiper {
 /*这个是绝对布局*/
 position: absolute;
 height: 100%;
 width: 100%;
}
 
 
.swiper-image {
 height: 100%;
 width: 100%;
 /*透明度*/
 opacity:0.9;
}
 
 
.button-img{  
  /*这个是绝对布局*/
  position: relative;
  bottom: 90px;
  height: 40px;
  width: 120px;
  opacity:0.6;
}

Vielen Dank fürs Lesen, ich hoffe, das hilft allen und vielen Dank für Ihre Unterstützung dieser Website!

Ausführlichere Beispiele für die Entwicklung der WeChat-Applet-Willkommensschnittstelle und verwandte Artikel finden Sie auf der chinesischen PHP-Website!