ミニプログラム開発カスタムコンポーネント

Dongguan アプレットは、カスタム コンポーネントを開発し、カスタム コンポーネントを作成し、Object 型のパラメータを受け入れます。生成されたコンポーネント インスタンスには、コンポーネントのメソッド、ライフサイクル関数、プロパティ オブザーバーで this を介してアクセスできます。コンポーネントにはいくつかの共通のプロパティとメソッドが含まれています。プロパティ値の変化はオブザーバーを使用して監視できます。現在、このフィールドは基本ライブラリの新しいバージョンでは推奨されていません。代わりに、より強力でパフォーマンスに優れた Component コンストラクターの observers フィールドを使用してください。

コンポーネント(オブジェクトオブジェクト)

オブジェクト タイプのパラメータを受け入れるカスタム コンポーネントを作成します。

パラメータ

オブジェクトオブジェクト

生成されたコンポーネント インスタンスには、コンポーネントのメソッド、ライフサイクル関数、プロパティ オブザーバーで this を介してアクセスできます。コンポーネントにはいくつかの共通のプロパティとメソッドが含まれています。

コード例:

開発者ツールで効果をプレビューする

成分（{
  行動: [],
  // プロパティ定義（詳細は下記を参照）
  プロパティ:
    myProperty: { // プロパティ名タイプ: String,
      価値： ''
    },
    myProperty2: String // 簡略化された定義方法 },
  data: {}, // プライベートデータ。テンプレートのレンダリングに使用できます。lifetimes: {
    // ライフサイクル関数。これは、添付のメソッド セクションで定義された関数またはメソッド名になります: function () { },
    移動: 関数 () { },
    分離: 関数 () { },
  },
  // ライフサイクル関数。メソッド セクションで定義された関数またはメソッド名になります。 attached: function () { }, // ここでの attached の宣言は、lifetimes フィールドの宣言によって上書きされます。 ready: function() { },
  ページの存続期間: {
    // コンポーネントが配置されているページのライフサイクル関数 show: function () { },
    非表示: 関数 () { },
    サイズ変更: 関数 () { },
  },
  メソッド: {
    onMyButtonTap: 関数(){
      this.setData({
        // プロパティとデータを更新する方法は、ページデータを更新する方法と似ています })
    },
    // 内部メソッドはアンダースコアで始まることを推奨します _myPrivateMethod: function(){
      // ここで data.A[0].B は 'myPrivateData' に設定されます
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: 関数(newVal, oldVal) {
    }
  }})

注: プロパティ定義セクションでは、プロパティ名はキャメルケース (propertyName) で記述されます。wxml では、プロパティ値を指定するときにハイフンが使用され (component-tag-name property-name="attr value")、データ バインディングに適用するときにキャメルケースが使用されます (attr="")。

プロパティの定義

プロパティ値の変化はオブザーバーを使用して監視できます。現在、このフィールドは基本ライブラリの新しいバージョンでは推奨されていません。代わりに、より強力でパフォーマンスに優れた Component コンストラクターの observers フィールドを使用してください。

コード例:

成分（{
  プロパティ:
    最小: {
      タイプ: 数値、
      値: 0
    },
    最小: {
      タイプ: 数値、
      値: 0,
      オブザーバー: 関数(newVal, oldVal) {
        // プロパティ値が変更されたときに実行されます }
    },
    最後のリーフ: {
      // このプロパティは、次の 3 つのタイプのいずれかになります: 数値、文字列、ブール型: 数値、
      オプションタイプ: [文字列、オブジェクト],
      値: 0
    }
  }
})

プロパティの型は、String、Number、Boolean、Object、Array のいずれか、または型制限がないことを示す null になります。

ほとんどの場合、プロパティの正確なタイプを指定するのが最適です。したがって、WXML で属性値をリテラルとして指定する場合、値には次のような正確な型を指定できます。

 <カスタムコンプ最小値="1" 最大値="5" />

このとき、カスタム コンポーネントの対応する属性は Number 型として指定されているため、min と max には "1" と "5" ではなく、1 と 5 が割り当てられます。つまり、次のようになります。

 this.data.min === 1 // 真 this.data.max === 5 // 真

バグとヒント:

• 内部データとプロパティ値を取得するには this.data を使用しますが、これを直接変更してもインターフェイスに変更は適用されないため、変更するには setData を使用する必要があります。
• ライフサイクル関数は、コンポーネント メソッドの this を通じてアクセスすることはできません。
• 属性名はデータで始まらないようにする必要があります。つまり、dataXyz の形式で名前を付けないでください。これは、WXML では、data-xyz="" はコンポーネント属性ではなくノード データセットとして処理されるためです。
• コンポーネントが定義されて使用される場合、コンポーネントの属性名とデータ フィールドは、(異なる定義セクションに配置されている場合でも) 互いに競合することはできません。
• 基本ライブラリ 2.0.9 以降では、オブジェクト タイプの属性とデータ フィールドに関数タイプのサブフィールドを含めることができるようになりました。つまり、関数はオブジェクト タイプの属性フィールドを介して渡すことができます。このバージョンより下の基本ライブラリはこの機能をサポートしていません。
• バグ: スロット内のカスタム コンポーネントは、pageLifetimes で宣言されたページ ライフサイクルをトリガーしません。この問題は 2.5.2 で修正されています。
• バグ: オブジェクトまたは配列型のプロパティの場合、プロパティ値のサブフィールドがコンポーネント自身の this.setData によって変更されると、プロパティ オブザーバーが引き続きトリガーされ、オブザーバーが受け取る newVal は変更されたサブフィールドの値になり、oldVal は空になり、changedPath にはサブフィールドのフィールド名に関する情報が含まれます。現在は、代わりにオブザーバー定義セグメントを使用することをお勧めします。