Code examples for mini program development welcome interface

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 imgsarray is prepared in data. The addresses of 3 pictures are stored in the array. There is also a startfunction, this function is used to monitor button click events 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. Implementation of style

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

.swiper-image style It is the style that defines the image picture: the width and height are to occupy 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, and 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;
  }

4. See the effect

[Related recommendations]

1. WeChat Mini program source code download

2. WeChat mini program demo: Yangtao

The above is the detailed content of Code examples for mini program development welcome interface. For more information, please follow other related articles on the PHP Chinese website!