Share example code for WeChat applet welcome interface development

This article mainly shares relevant information about the example code for 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 the following

微信小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

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

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

The above is the detailed content of Share example code for WeChat applet welcome interface development. For more information, please follow other related articles on the PHP Chinese website!