ミニプログラムの高度な概念 第 4 章

ミニプログラムの高度な概念

オープニング

前の章では、ミニ。この章では、ミニ。

この章では、事例高度なコンテンツ全体の知識を実行します。

1. コンポーネント思考とは

コンポーネント思考については、実際の開発経験がないとすぐに理解するのは難しいかもしれません。

でもそんなことは関係ない！

コースについて徐々に詳しく学んでいくと、コンポーネント思考の概念が常に浸透していきます。

---

コンポーネントとは何かを理解したい場合は、まずそのコンポーネントがどのような種類の問題を解決するのかを理解する必要があります。すべてのテクノロジーには 1 つ以上の問題が解決されるため、価値があります。

シーン

上の 2 つのスクリーンショットは [Ele.me ミニ プログラム] 内のデータのスクリーンショットであり、2 つのスクリーンショットは 2 つの異なるページからのものです。

しかし、それらは異なるページからのものであるにもかかわらず、ストア内のitemアイテム。

そこで、次のようなシナリオを想像します。

あなたは現在 [Ele.me] で働いていますが、リーダーからこの 2 ページを完了するように頼まれました。では、どうしますか?

2 つのページを作成し、1 つのページでwx:forディレクティブを多数itemのページを作成しdom结构、それらをレンダリングしますwxss。

その後、別のページに移動して、この一連の操作を繰り返しますか?

もし、するなら？それならきっと3日間も[Ele.me]に居られないでしょうね。その理由は、コードが冗長すぎるためです。言い換えれば、保守性も拡張性もありません。

コードの場合、すべての。

ここでのカプセル化は現在のシーンに配置され、コンポーネントのカプセル化を指します。

コンポーネント化とは

したがって、コンポーネント化カプセル化の後で、コンポーネント化とは何かを見てみましょう。

[プロジェクト全体] をレゴの。

すると、【各コンポーネント】は【小さな構成要素の一つ】とみなすことができ、その小さな構成要素は現在のプロジェクトで使用したり、取り出して別のプロジェクトで使用したりすることができます。

大規模なプロジェクトは複数の小さなコンポーネントで構成され、それぞれが個別の [構造]、[スタイル]、[動作] をカプセル化します。

これが現在のコンポーネントの考え方です。

以前に開発経験がvue、react、angularある、コンポーネント化の意味をよく理解しているはずです。

html + css + js以前の開発経験しかない場合は、コンポーネントを[構造] と [スタイル] を含むモジュールとして理解できます。

最後に、このセクションの冒頭の言葉を無視しないでください。

コンポーネント思考については、実際の開発経験がないとすぐに理解するのは難しいかもしれません。

シナリオ

【はじめに】で述べたように、第4章の内容全体を貫く【ケース】を開発していきます。

それでは、このケースを実装してみましょう。

この場合、次の 2 つの部分に分割します。

1. 上部のタブ
2. 一番下のリスト

2 つのパートは、それぞれ 2 つのコンポーネントを通じて開発されます。

したがって、次に最初に行う必要があるのは、[これら 2 つのコンポーネントを作成し、ページ内で使用する] ことです。これがこのセクションの主要な内容です。

質問

1. コンポーネントはどのフォルダーに配置する必要がありますか?
2. ページ内で[カスタムコンポーネント]を使用するにはどうすればよいですか?

コンテンツ

1. コンポーネントの作成
   1. componentsフォルダを作成する
   2. 作成しtabsてlistフォルダーを作成する
   3. 右クリック新規Component
2. コンポーネントを使用する
   1. ページのindex.jsonファイル
   2. usingComponentsオプションでコンポーネントを登録します
      1. keyこのページの現在のコンポーネントのラベル名です。
      2. valueコンポーネントのコードパス
   3. ページのwxmlファイル、ラベル名としてregistered を使用し、コンポーネントを使用しますkey

答え

1. コンポーネントはどのフォルダーに配置する必要がありますか?
   1. コンポーネント
2. ページ内で[カスタムコンポーネント]を使用するにはどうすればよいですか?
   1. .jsonページusingComponentsのインデックスファイルに、次の方法で登録します。
   2. wxmlファイル内ではタグkey名として登録したものを使用します

2. コンポーネントのライフサイクル

シーン

次にtabs、tabsコンポーネントがレンダリングされた後にデータを取得してレンダリングします。

参考までに、前の章で説明したように列表案例、この関数を完了するには、前提条件。

つまり、コンポーネントのライフサイクル機能を明確にし、インターフェースデータをいつ取得するかを指定します。

質問

1. コンポーネントのライフサイクルとメソッドをどのノードに配置する必要がありますか?
2. created関数内で呼び出すことsetDataはできますか?
3. データを取得する操作はどの関数で実行する必要がありますか?

コンテンツ

コンポーネントlifetimesのライフサイクルはで定義し、メソッドは で記述する必要がありますmethods。

コンポーネントには 3 つのライフサイクルがあります。

1. created: コンポーネント インスタンスが作成されました。現時点では電話できませんsetData
2. attached: コンポーネントが完全に初期化され、ページ ノード ツリーに入った後。初期化作業のほとんどはこの時点で実行できます
3. detached: コンポーネントがページ ノード ツリーを離れた後

    /**
     * 组件的初始数据
     */
    data: {
    
    
        // 数据源
        listData: [],
        // 选中项
        active: -1
    },
	/**
     * 生命周期函数
     */
    lifetimes: {
    
    
        attached() {
    
    
            this.loadTabsData()
        }
    },
    /**
     * 组件的方法列表（组件中的方法必须定义到 methods 中）
     */
    methods: {
    
    
        /**
         * 获取数据的方法
         */
        loadTabsData() {
    
    
            wx.request({
    
    
                url: 'https://api.imooc-blog.lgdsunday.club/api/hot/tabs',
                success: (res) => {
    
    
                    this.setData({
    
    
                        listData: res.data.data.list,
                        active: 0
                    })
                }
            })
        }
    }

<scroll-view class="tabs-box" scroll-x>
    <view wx:for="{
   
   { listData }}" wx:key="index" class="tab {
   
   { active === index ? 'active' : '' }}">
        {
   
   {item.label}}
    </view>
</scroll-view>

.tabs-box {
    /* 指定宽度 + 不换行 */
    width: 750rpx;
    white-space: nowrap;
    border-bottom: 1px solid #cccccc;
}

.tab {
    /* 指定 display */
    display: inline-block;
    padding: 12px 22px;
}

.active {
    color: #f94d2a;
}

答え

1. コンポーネントのライフサイクルとメソッドをどのノードに配置する必要がありますか?
   1. ライフサイクルは次lifetimesのように
   2. メソッドmethodsを入れる
2. created関数内で呼び出すことsetDataはできますか ?
   1. できない
3. データを取得する操作はどの関数で実行する必要がありますか?
   1. attached

3. データリスナー

シーン

インターフェイスドキュメントを通じて、それを取得したい場合はパラメータを渡す必要があり、これはユーザーによって選択されたものであることlistがわかります。typetypetab 项id

次に、ユーザーの選択を監視し、ユーザーの選択に応じて下部のデータを切り替える必要があります。tabtablist

質問

1. アプレットでデータ リスナーを宣言するために使用されるオプション
2. データリスナーの使用シナリオは何ですか?

コンテンツ

目標:ユーザーの選択を聞き、tabユーザーの選択tabに従って下部のlistデータを切り替える

複雑な要件に直面した場合、その複雑な

これを見ると、上記の要件をどのように分解できるかを考えることができます...

---

手順は次のように分解されます。

1. ユーザーが選択した項目の変更をリッスンする
2. ユーザーが選択したデータを取得しますid
3. コンポーネントにid渡すlist
4. listコンポーネントは受信したメッセージに従って対応するデータidを取得します

<view wx:for="{
     
     { listData }}" wx:key="index" class="tab {
     
     { active === index ? 'active' : '' }}" bindtap="onItemClick" data-index="{
     
     {index}}">
        {
   
   {item.label}}
    </view>

        /**
         * 1. 监听用户选中项的变化
         * item 点击事件处理
         */
        onItemClick(e) {
    
    
            // 1.1：获取用户选中的 下标
            const {
    
    
                index
            } = e.target.dataset;
            // 1.2：修改选中项
            this.setData({
    
    
                active: index
            })
        }


	/**
     * 1.3：监听 active 的变化
     * 通过 observers 定义数据监听器
     */
    observers: {
    
    
        // key 为要监听的数据
        // value 为当数据发生变化时，调用的函数
        active: function (active) {
    
    
            // 2：获取用户选中的数据的 `id`
            const {
    
    id} = this.data.listData[active]
        }
    }

これまでのところ、要件の最初の 2 つのステップは実現しましたが、次の 2 つのステップはどうなるでしょうか?

次の章「コンポーネント間の関係と通信」をご覧ください。

答え

1. アプレットでデータ リスナーを宣言するために使用されるオプション
   1. observers
2. データリスナーの使用シナリオは何ですか? （生徒自身が考える必要があります）
   1. データの変更を監視する必要がある
   2. データ変更後、何らかの操作を実行するとき

4. コンポーネント間の関係と通信

シーン

1. ユーザーが選択した項目の変更をリッスンする
2. ユーザーが選択したデータを取得しますid
3. コンポーネントにid渡すlist
4. listコンポーネントは受信したメッセージに従って対応するデータidを取得します

前のセクションでは、最初の 2 つのステップを実装しましたが、その後コンポーネントにid渡そうとしたときに、いくつかの問題が発生しました。あるコンポーネントから別のコンポーネントにデータを渡す方法listがわからないため、このセクションでこの問題を解決します。

質問

1. コンポーネント間のデータ転送関係にはどのような種類がありますか?
2. 兄弟コンポーネント間でデータを渡すにはどのような方法がありますか?

コンテンツ

コンポーネント間の関係:

コンポーネント間の関係は、実際にはhtmlタグ。

1. 父と子の関係
   

2. 兄弟愛
   

異なる関係間でデータを受け渡す方法:

1. 父と子の関係

   1. パラメータを親から子に渡します。

      // 子组件：通过 properties 声明要从父组件中接收的数据
          /**
           * 组件的属性列表
           */
          properties: {
              
              
              tabId: String
          },
      
      // 父组件：通过自定义属性的形式传递数据，以子组件中定义的 key 为属性名，以要传递的数据为属性值
         <list tabId="{
              
              {tabSelectId}}">
      

   2. 子から親にパラメータを渡す:

      // 子组件：通过 triggerEvent 方法发送一个通知，通知父组件接收数据。
      // 方法的第一个参数为：通知名
      // 方法的第二个参数为：要传递的数据
      this.triggerEvent('change', {
              
              
          id
      })
      
      // 父组件：通过 bind 监听子组件中发送的通知
      // bind 后的内容为 子组件发送的通知名，表达式为接收到该通知时所触发的方法
      <tabs bind:change="onTabChange"></tabs>
      // 方法被触发后可以通过 e.detail 的形式获取子组件传递过来的数据对象
      onTabChange (e) {
              
              
          const {
              
              id} = e.detail;
          this.setData({
              
              
              tabSelectId: id
          })
      }
      

2. 兄弟愛

   1. 兄弟コンポーネント間でのパラメータの受け渡し:兄弟関係 === 関係なし。兄弟コンポーネントは便宜上の名前にすぎません。
      

      したがって、兄弟コンポーネント間のパラメータ転送を完了するには、以下を行う必要があります。それらの関係を確立する。

      率直に言えば、関係を確立するということは、両方の要素を理解している「仲介者」を見つけることです。

      この仲介者は通常、統合された親コンポーネントです。

      最後に、兄弟コンポーネント間でデータを転送したい場合は、「転送する仲介者」を使用する必要があります。つまり、次のようになります。

      1. 【ブラザーAコンポーネント】親コンポーネント（仲介者）にデータを渡す
      2. 次に、親コンポーネント (仲介者) がデータを [兄弟 B コンポーネント] に渡します。

答え

1. コンポーネント間のデータ転送関係にはどのような種類がありますか?
   1. 親から子にデータを渡す
   2. 子が親にデータを渡す
   3. 兄弟コンポーネント間でデータを渡す
2. 兄弟コンポーネント間でデータを渡すにはどのような方法がありますか?

5. コンポーネント用ソケット

シーン

この場合、最後に 1 つの関数が残っています。それは、リストの先頭と末尾にそれぞれテキストを表示することです。

この関数には追加の要件があります。親コンポーネントで表示されるテキストとスタイルを指定する必要があります。

コンポーネントは再利用できるため、listコンポーネントがindex、表示されるテキストとスタイルは、他のページに表示したいテキストとスタイルであるとは限りません。したがって、このテキストとスタイルlistは に。

したがって、この機能を実現するには、スロットの知識を使用する必要があります。

質問

1. スロットを使用する必要があるのはいつですか?
2. アプレット内で複数のスロットを定義するにはどうすればよいですか?

コンテンツ

1: 定義:

1.1: 単一スロットを定義します。

コンポーネントはコンポーネントslot内でスロットを定義するために使用されます。

表現: このスペースを占有し、親コンポーネントがそのスペースを埋めるのを待ちます。

1.2: 複数のスロットを定義します。

アプレットはデフォルトで 1 つのスロットのみを定義できます。複数のスロットを定義したい場合は、次の操作を行う必要があります:コンポーネントでオプションを指定しますoptions。multipleSlotsオプションは次のとおりです。true

slot次に、nameのプロパティを使用してスロットに名前を付けます。例えば：<slot name="header"></slot>

2: 使用:

2.1: 単一ソケットの使用:

コンポーネントが使用されるときinnerHTML のコンテンツを挿入します。

<component>
    <view>单一插槽插入的 DOM</view>
</component>

2.2: 複数のスロットの使用:

コンポーネントが使用される場合、コンテンツは次innerHTML の、slot属性は現在のものがどのスロットにDOM挿入されるか。

<component>
    <view slot="header">该元素将被插入到 name=header 的插槽中</view>
    <view slot="footer">该元素将被插入到 name=footer 的插槽中</view>
</component>

答え

1. スロットを使用する必要があるのはいつですか?
   1. 親コンポーネントが子コンポーネントの特定の部分に表示されるコンテンツとスタイルを指定する場合
2. アプレット内で複数のスロットを定義するにはどうすればよいですか?
   1. としてoptions指定されますmultipleSlotstrue

章のまとめ

1. コンポーネントの考え方
2. コンポーネントの作成
3. コンポーネントのライフサイクル
4. データリスナー
5. コンポーネントの関係
6. コンポーネント通信
7. コンポーネントスロット