Home >WeChat Applet >Mini Program Development >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!