WeChat 애플릿 환영 인터페이스 개발의 자세한 예

WeChat Mini 프로그램 시작 인터페이스

시중에 나와 있는 대부분의 앱에는 환영 인터페이스가 있습니다. 다음은 WeChat 애플릿을 통해 환영 인터페이스를 구현하는 방법을 보여줍니다.

다음의 내용을 순서대로 소개하겠습니다.

레이아웃 구현

논리의 구현

스타일의 구현

1. 레이아웃 구현

전체 레이아웃은 스와이퍼 슬라이딩 뷰를 사용하여 구현됩니다. 슬라이딩 뷰의 각 항목은 슬라이딩 뷰의 각 항목을 래핑합니다. 항목에는 이미지 그림과 버튼 버튼이 포함됩니다.

<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. 논리 구현

imgs 배열이 데이터로 준비되고 세 개의 이미지 주소가 배열에 저장됩니다. 여기에는 인터페이스 버튼의 클릭 이벤트를 모니터링하는 데 사용되는 시작 기능도 있습니다.

wx.navigateTo API의 기능은 인터페이스의 점프를 실현하고 복귀 버튼을 갖는 것입니다. URL은 점프할 인터페이스를 지정하는 데 사용됩니다.

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. 스타일 구현

스와이퍼 스타일은 슬라이딩 컨트롤을 정의하는 스타일입니다. 슬라이딩 컨트롤의 위치는 절대 레이아웃이고 너비와 높이는 전체 화면을 차지합니다.

.swiper-image 스타일은 이미지 그림을 정의하는 스타일입니다. 너비와 높이는 전체 화면을 채우고 투명도는 0.9입니다.

.button-img 스타일은 버튼 버튼을 정의하는 스타일입니다. 위치는 절대 레이아웃이고 하단에서 90px이고 투명도는 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;
}

읽어 주셔서 감사합니다. 이 내용이 모든 사람에게 도움이 되기를 바라며 이 사이트를 지원해 주셔서 감사합니다!

WeChat 애플릿 환영 인터페이스 개발 및 관련 기사에 대한 자세한 예를 보려면 PHP 중국어 웹사이트를 주목하세요!