WeChatアプレットコンポーネント開発：視覚的な映画座席選択機能

1. はじめに

恋人や彼氏と一緒に映画館に行った経験がある人は多いと思います。座席を選ぶとき、いつも恋人や彼氏の意見を聞きますか？それはなぜですか？勧誘しないんですか？ ！これで完了です！

市場に出回っている多くの映画チケット販売アプリやミニプログラムでは、観客がオンラインで好みの座席をより適切に選択できるようにするために、便利で視覚的な座席選択データが不可欠です。ここでは、この便利な視覚的な座席選択コンポーネントを見てみましょう。

ビュー効果は次のとおりです。

ご興味がございましたら、ぜひ読み進めてください！

1. コンポーネントデータ

まず、コンポーネントを表示するときに使用できるように、コンポーネントに 2 つのデータを渡す必要があります。1 つは映画館の番号で、もう 1 つは座席の配列です。

ホール番号: 大文字の数字文字列

座席データ：配列ドットマトリックス、左右の空白は0、一般席は1、優先席は2、他の視聴者が選択した席は3で表されます。初期データは次のとおりです。

渡されるデータは、コンポーネントの js ファイルで宣言する必要があります。ページ宣言方法とは異なり、コンポーネントのプロパティでデータを宣言するときには、データ型を記述する必要があります。

  プロパティ:
    座席: 配列、
    ホール番号: 文字列
  },

2. コンポーネントページのレイアウト

ページには移動可能な部分と移動不可能な部分があり、もちろんそれ自体で移動可能な部分もあります。このコンポーネントでは、上部のロゴ領域は静的な部分で、シート領域は移動可能で、2 本の指で拡大縮小できます。具体的な構造は次のとおりです。

1. ロゴエリアの構成

このエリアは主にプロンプ​​トとして機能し、通常エリアや優先エリアなどの座席情報を提供します。もちろん、コードは、signs_normal および seat_Excellent クラス名を使用して、座席エリアの座席の WXSS スタイルを直接盗むことができます。 もちろん、C ポジションが嫌いな人がいるでしょうか?

    <view class="signs_normal">
      <view class="seatNormal"></view> <text>通常エリア</text> 
    </ビュー>
    <view class="signs_excellent">
      <view class="seatExcellent"></view> <text>優先エリア</text> 
    </ビュー>
  </ビュー>

2. 座席エリアの構成

このセクションは、スクリーン、映画館の紹介、座席エリアの 3 つの小さな部分に分かれています。詳しくお話ししましょう。

2.1 映画スクリーン:

曲面スクリーン効果を実現するには、非常に便利なマスキング法を使用できます。まず、長方形のボックスを使用してスクリーンの長さと幅を構築し、楕円形のパイの端を使用して長方形のボックスに表示し、overflow: hidden属性を使用して残りの部分をカバーします。次に、背景色と境界線の色を調整して、スクリーン効果を実現します。

HTML は次のとおりです。

<view class="visual_screen">
   <view class="screen"></view>
</ビュー>

wxssは次のとおりです。

.ビジュアルスクリーン{
  高さ: 30rpx;
  幅: 100%;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  オーバーフロー: 非表示;
  下部マージン: 10rpx;
}
.スクリーン{
  上マージン: 0;
  パディング: 0;
  高さ：30vw;
  幅：100vw;
  ボックスのサイズ: 境界線ボックス;
  境界線: 15rpx 実線 #c9cdd3;
  境界線の半径: 50%;
}

2.2 映画館の紹介:

この部分は比較的簡単です。送信されたデータを挿入し、スタイルを微調整するだけです。

wxml:

wxml:
<view class="visual_title">ホール {{hallNumber}} - (身長1.3メートル以上のお子様はマスクの着用とチケットの購入をお願いいたします)</view>
色:
.ビジュアルタイトル{
  フォントサイズ: 23rpx;
  幅: 100%;
  高さ: 20rpx;
  テキスト配置: 中央;
  色: #6d6d6d;
  下部マージン: 30rpx;
}

2.3 座席エリア:

インフラストラクチャー：

基本単位：シートの幅を基本単位vwとして設定しておくと単位を統一して車種に合わせると便利なので、ここで高さもvwで設計します。

座席スタイル: 以前に送信された座席配列から、座席には 5 つのタイプがあることがわかります。つまり、seatNormal (通常の座席)、seatExcellent (優先座席)、seatNone (空白の座席)、seatChosen (選択できない座席)、selected (現在選択されている座席) です。ここでの座席の基本スタイルは同じであり、統一して、独自のスタイルを個別に記述することができます。空席の場合は、境界線の色を透明に設定するだけで効果が得られます。

.seatNormal、.seatExcellent、.seatNone、.seatChosen {
  高さ：4vw;
  幅: 4vw;
  マージン: 1vw;
  境界線の半径: 8rpx;
  ボックスのサイズ: 境界線ボックス;
}
.seatNormal{
  境界線: 1rpx 実線 #63c0c0;
}
.seatChosen{
  境界線: 1rpx 赤一色;
  背景色: 赤;
}
.選択された{
  境界線: 1rpx 実線 #05ca90;
  背景色: #05ca90;
}
.seatExcellent{
  境界線: 1rpx 実線 #f18e14;
}
.seatNone {
  境界線: 1rpx実線rgba(0, 0, 0, 0);
}

推奨される便利なスタイル: wxss では、非常に便利なスタイル「box-sizing: border-box;」を使用します。このスタイルは、要素の幅と高さを設定して、要素の境界ボックスを決定します。つまり、要素に指定されたパディングと境界線は、設定された幅と高さの範囲内で描画されます。コンテンツの幅と高さは、設定された幅と高さからそれぞれ境界線とパディングを減算することで取得できるため、要素のサイズを制御しやすくなります。

全体レイアウト: 座席エリアでは柔軟なレイアウト display: flex を使用し、座席が埋まったときに flex-wrap: wrap で自動的に座席をラップします。大きなボックスが別のボックスをラップすることで、内部のボックスを柔軟に中央に配置でき、全体的な中央配置効果が得られます。

.visual_seatings {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  幅: 100%;
  高さ：43vw;
}
.visual_seating{
  幅: 90%;
  高さ：43vw;
  ディスプレイ: フレックス;
  flex-wrap: ラップ;
}

移動可能で拡大縮小可能な領域: 座席の選択を容易にするために、座席領域を 2 本の指で移動および拡大縮小できるように設定しました。そのため、WeChat アプレットの API (movable-area と moving-view) を使用する必要があります。

moving-area: この領域には、width 属性と height 属性を設定する必要があります。設定されていない場合、デフォルト値は 10px です。同時に、movable-view が moving-area より小さい場合、movable-view の移動範囲は moving-area 内になります。movable-view が moving-area より大きい場合、movable-view の移動範囲には moving-area が含まれる必要があります (x 軸と y 軸方向は別々に考慮されます)。

moving-view: タグ属性は移動方向を設定します direction="all"; 2 本指ズームをサポートします scale="{{true}}"; 最大および最小ズームの倍数は scale-min="0.3" および scale-max="1.5" です。トリガー条件をバインドする場合は、バインド メソッドを追加して、バインド イベントをドラッグすることもできます: bindchange、ズーム バインド イベント bindscale など。

ちょっとしたヒント: 可動ビュー領域を拡大すると、x 座標と y 座標は変更されないため、ビュー領域が領域を超えてしまいます。可動ビュー領域が上部の要素をブロックしないようにするには、拡大率の上限を下げて上部に空白領域を追加し、ページの美観を高めることができます。

詳しい使い方については、WeChatミニプログラムの公式ウェブサイトのマニュアルを参照してください。
developer.weixin.qq.com/miniprogram…

3. コンポーネントビジネスロジック

座席データの出力：前回も述べたように、座席データは配列に格納されており、座席ごとに異なる番号で表現されるため、データを出力する際に​​は判断が必要になります。ここでは、配列データをループさせてブロックタグで出力し、その後、配列データを判断して異なる形式で出力します。

座席の選択: ユーザーが座席をクリックすると、座席のスタイルが変わり、座席データが記録されます。まず、ループ内のインデックス データを wx:for="{{seatings}}" wx:key="Index" data-index="index" で送信する必要があります。選択されたイベントは各座席のビューにバインドされ、インデックス データは js ファイルの selected メソッドで受信されます。

選択された座席の合計数 (6 に制限) とインデックス配列 (クリックされた座席を格納するため) を使用する必要があるため、データで selectedIndex: []、selectedNum: 0 を宣言し、methods; でメソッドを宣言します。

選択メソッドのロジック: 最初に添え字インデックスを保存し、次に添え字配列に要素が存在するかどうかを確認します (配列の indexOf() メソッドを使用)。存在する場合は、以前に選択されたことを意味し、もう一度 [キャンセル] をクリックします。削除する必要がある場合は、添え字配列から添え字を削除し、選択された座席の合計数を 1 つ減らします。存在しない場合は、選択された座席の合計数が 6 未満かどうかを確認します。少ない場合は、データを配列に挿入し、選択された座席の合計数を 1 つ増やします。少なくない場合は、最大 6 つのチケットを選択できることを示します。

この時点で、次の表のようなデータが得られ、より複雑な業務操作を実行できるようになります。 ！

ヒント: 配列には要素を削除するメソッドがないため、最初に要素のインデックスを取得してから削除するための remove() メソッドが別途宣言されます。

選択された(e) {
      インデックスを e.currentTarget.dataset.index とします。
      if(this.data.selectedIndex.indexOf(index) != -1){
        selectedIndex = this.remove(this.data.selectedIndex, index); とします。
        selectedNum = this.data.selectedNum - 1 とします。
        this.setData({
          選択されたインデックス、
          選択数
        })
      }それ以外{
        if(this.data.selectedNum < 6){
        selectedNum = this.data.selectedNum + 1 とします。
        selectedIndex = this.data.selectedIndex.concat(index); とします。
            this.setData({
              選択されたインデックス、
              選択数
            })
        }それ以外{
            wx.showToast({
              タイトル: 「最大6枚のチケットを選択」
              })
            }
        }
    },
    削除(arr, ele) {
      var インデックス = arr.indexOf(ele); 
      （インデックス＞-1）の場合{ 
      arr.splice(インデックス、1); 
        }
        arr を返します。
      }

選択されたスタイルの変更: 座席ビューでは、三項演算子を使用してデータを判断します: class="{{tools.indexOf(selectedIndex, index)?'selected': ''}}" 前の結果が true の場合、つまりこのデータのインデックスが配列内に存在する場合は、選択されたクラス名と座席スタイルの変更を追加します。それ以外の場合は、空のクラス名を追加します。

ヒント: 配列の indexOf メソッドは wxml では無効であるため、三項演算を呼び出すページと同じディレクトリの util フォルダーで indexOf 関数を宣言し、自分で実行する必要があります。 使用する際は、wxs src="../../util/indexof.wxs" module="tools" で宣言するだけで、配列に付属する indexOf メソッドと同じ効果を持つ tools.indexOf メソッドを使用できます。

// indexOf メソッド関数 indexOf(arr, value) {
  （arr.indexOf（値）<0）の場合{
      false を返します。
  } それ以外 {
      true を返します。
  }
}
module.exports.indexOf = indexOf;

特定のコンポーネントのソースコードが必要な場合は、gitee で入手してください。
gitee.com/jensmith/so…

要約する

WeChatミニプログラムコンポーネントが開発した視覚的な映画座席選択機能に関するこの記事はこれで終わりです。より関連性の高いミニプログラム視覚的な映画座席選択コンテ​​ンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後も123WORDPRESS.COMを応援してください。