WeChat Mini Program Welcome Interface Development Example Detailed Explanation

WeChat Mini Program Welcome Interface

Most apps on the market will have a welcome interface. The following will demonstrate how to implement a welcome interface through a WeChat applet.

The following will be introduced in the following order:

Implementation of layout

implementation of logic

Implementation of styles

1. Implementation of layout

The entire layout is implemented using swiper sliding view. Each item of the sliding view is wrapped by a block. The block wraps each item of the sliding view. The item contains image pictures and button buttons.

<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. Implementation of logic

An imgs array is prepared in data, and the addresses of three images are stored in the array. There is also a start function here, which is used to monitor the click event of the button on the interface.

The function of the wx.navigateTo API is to realize the jump of the interface and have a return button. The url is used to specify the interface to jump to.

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. Implementation of styles

The swiper style is the style that defines the sliding control: the position of the sliding control is absolute layout, and the width and height are to occupy the entire screen.

The .swiper-image style is the style that defines the image picture: the width and height are to fill the entire screen, and the transparency is 0.9

The .button-img style is the style that defines the button button: the position is absolute layout, 90px from the bottom, the transparency is 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;
}

Thanks for reading, I hope this helps everyone, and thank you for your support of this site!

For more detailed examples of WeChat applet welcome interface development and related articles, please pay attention to the PHP Chinese website!