WeChat Mini Programme Bienvenue Exemple de développement d'interface Explication détaillée

Interface de bienvenue du mini programme WeChat

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

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

Réalisation de la mise en page

mise en œuvre de la logique

Implémentation de styles

1. Mise en œuvre 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 enveloppe 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. Mise en œuvre de la logique

Un tableau imgs est préparé dans les données et les adresses de trois images sont stockées dans le tableau. Il existe également une fonction de démarrage ici, 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. Mise en œuvre des styles

Le style de balayage 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 tout l'écran.

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

Le style .button-img est le style qui définit le bouton du bouton : la position est la mise en page absolue, à 90px 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;
}

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

Pour des exemples plus détaillés de développement d'interface de bienvenue d'applet WeChat et des articles connexes, veuillez prêter attention au site Web PHP chinois !