WeChat Mini Program Welcome Interface Development

This article mainly introduces the relevant information on the detailed examples of the development of the welcome interface of the WeChat applet. Here is a simple example of the welcome interface and the implementation code and implementation renderings. Friends in need can refer to it

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 WeChat Mini Program.

The following will be introduced in the following order:

Implementation of layout

Logical Implementation

Style implementation

1. Layout implementation

The entire layout is implemented using swiper sliding view. Each item of the sliding view is wrapped by a block. Each item of the sliding view is wrapped in the block. 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. Logic implementation

An imgs array is prepared in data. The addresses of 3 pictures are stored in the array. There is also a start function here. This function is used to monitor the click event of the button on the interface.

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

    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. Style implementation

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

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

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

4. See the effect

##Thanks for reading, hope It can help everyone, thank you for your support of this site!

The above is the detailed content of WeChat Mini Program Welcome Interface Development. For more information, please follow other related articles on the PHP Chinese website!