Développement de l'interface de bienvenue du mini programme WeChat

Cet article présente principalement les informations pertinentes sur les exemples détaillés de développement de l'interface de bienvenue de l'applet WeChat. Voici un exemple simple de l'interface de bienvenue, du code d'implémentation et des rendus d'implémentation auxquels les amis dans le besoin peuvent se référer. it

Interface de bienvenue du programme WeChat Mini

La plupart des applications sur le marché auront une interface de bienvenue. Ce qui suit montrera comment implémenter une interface de bienvenue via le programme WeChat Mini.

Les éléments suivants seront introduits dans l'ordre suivant :

La mise en œuvre de la mise en page

Implémentation logique de

Implémentation du style

1. Implémentation de la mise en page

L'ensemble de la mise en page est implémenté à l'aide de la vue coulissante Swiper. Chaque élément de la vue coulissante est enveloppé par un bloc. Le bloc contient chaque élément de la vue coulissante. L'élément contient des images et des boutons

  <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. Implémentation logique

Un tableau imgs est préparé en données, et les adresses de 3 images sont stockées dans le tableau. commencez ici Fonction, qui est utilisée pour surveiller l'événement de clic du bouton sur l'interface.

La fonction de l'API wx.navigateTo est d'implémenter le saut d'interface et d'avoir un bouton de retour. L'url est utilisée pour spécifier l'interface de saut

<. 🎜>

    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. Implémentation du style

Le style swiper est le style qui définit le contrôle coulissant : la position du contrôle coulissant est une disposition absolue, et la largeur et la hauteur doivent occuper la écran entier

Le style .swiper-image est le style qui définit l'image de l'image : la largeur et la hauteur doivent occuper tout l'écran et la transparence est de 0,9

.Le style Button-img est le style qui définit le bouton bouton : la position est une disposition absolue, 90px à partir du bas, la transparence est de 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. effet

Merci d'avoir lu, j'espère que cela aidera tout le monde, et merci pour votre soutien à ce site !

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!