Einführung in die Entwicklung der Willkommensschnittstelle des WeChat Mini-Programms

In diesem Artikel werden hauptsächlich relevante Informationen zu den detaillierten Beispielen für die Entwicklung der Begrüßungsschnittstelle des WeChat-Applets vorgestellt. Hier finden Sie ein einfaches Beispiel für die Begrüßungsschnittstelle, den Implementierungscode und die Implementierungsdarstellungen it

Willkommensschnittstelle des WeChat Mini-Programms

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

Das Folgende wird in der folgenden Reihenfolge vorgestellt:

Die Implementierung des Layouts

Logische Implementierung von

Stilimplementierung

1. Implementierung des Layouts

Das gesamte Layout wird mithilfe der Swiper-Slide-Ansicht implementiert. Der Block enthält 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. Logikimplementierung

Ein imgs-Array wird in Daten vorbereitet und die Adressen von 3 Bildern werden im Array gespeichert Die Startfunktion wird verwendet, um das Klickereignis der Schaltfläche auf der Schnittstelle zu überwachen.

Die Funktion von 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 Sprungschnittstelle anzugeben

    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. Stilimplementierung

Der Swiper-Stil ist der Stil, der das Schiebesteuerelement definiert: Die Position des Schiebesteuerelements ist ein absolutes Layout, und die Breite und Höhe sind um den gesamten Bildschirm einzunehmen

.Swiper-Image-Stil ist der Stil, der das Bildbild definiert: Breite und Höhe sollen den gesamten Bildschirm einnehmen und die Transparenz beträgt 0,9

.button- img-Stil ist der Stil, der die Schaltfläche definiert: Die Position ist das absolute Layout, 90 Pixel vom unteren Rand entfernt, Transparenz 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;
  }

4. Sehen Sie sich die Wirkung an

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist Achtung auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Implementierung des Pull-Up-Ladens und Pull-Down-Aktualisierens der WeChat-Applet-Liste

In WeChat Applet Bluetooth-Verbindung

Das obige ist der detaillierte Inhalt vonEinführung in die Entwicklung der Willkommensschnittstelle des WeChat Mini-Programms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!