Introduction to 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 another one here. The start 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, away from the bottom 90px, transparency 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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Implementation of pull-up loading and pull-down refresh of WeChat applet list

In WeChat applet Bluetooth link

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