WeChatアプレットのウェルカムインターフェイス開発の詳細な例

市場に出回っているほとんどのアプリにはウェルカムインターフェイスがあります。以下は、WeChatアプレットを介してウェルカムインターフェイスを実装する方法を示しています。

以下を次の順序で紹介します。

レイアウトの実装
ロジックの実現
スタイルの実現

1.レイアウトの実現

レイアウト全体は、スワイプスライドビューを使用して実装されます。スライドビューの各アイテムはブロックブロックでラップされ、スライドビューの各アイテムはブロックでラップされます。アイテムには画像画像とボタンボタンが含まれます。

wxmlは次のとおりです。

   <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配列が用意されており、3枚の画像のアドレスが配列に格納されています。また、インターフェース上のボタンのクリックイベントを監視するための起動機能もあります。

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" })
            // url用双引号
        },


     })

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;
    }

4.効果は次のとおりです。

元のリンク：http：//blog.csdn.net/u012987546/article/details/53034082