WeChatミニプログラム開発のためのコンポーネント設計仕様

WeChat ミニプログラム コンポーネント設計仕様

コンポーネントベースの開発という考え方は、私の開発および設計プロセスに貫かれています。私は長い間、このような考え方から恩恵を受けてきました。

1. 再利用可能なコンポーネント - 重複するコードの量を削減
2. コンポーネントは独立した機能ユニットとして、メンテナンスが容易
3. コンポーネントはテンプレートとして使用され、wxmlにwxsを導入する代わりにさまざまな属性を簡単に計算できます。
   

小さなプログラムのコンポーネントを日常的に開発する際、私は通常、次のルールに従います。

1. スタイルの独立性と依存関係の独立性

コンポーネントの開発中、コンポーネントはグローバル スタイルに依存できます。コンポーネントが導入されると、ページ スタイルとグローバル スタイルの両方を使用してレンダリングされます。

オプション:
    グローバルクラスを追加: true、
    複数スロット: true
}

ただし、コンポーネントの移植性に基づいて、各コンポーネントをグローバル スタイルに依存しないように構成することをお勧めします。

オプション:
    addGlobalClass: false、
    複数スロット: true
}

各コンポーネントの wxss 構成で、各コンポーネントに必要なスタイルを選択します。

コンポーネント開発中、app.jsにコンポーネントを導入することができます。

const app = getApp();

しかし、移植の利便性を考慮すると、コンポーネント内のグローバルデータを取得するには Storge を使用する方が適切です。

いくつかの js ファイルに依存する場合でも、ファイルをコンポーネント ディレクトリに配置してインポートできます。

プロパティ値設定リスナー

コンポーネントはページから渡された値を受け取ることができますが、コンポーネント内のデータ形式がページの表示要件と一致しない可能性があり、いくつかの調整が必要になります。これらの調整はコンポーネントに実装することをお勧めします。コンポーネント内のデータに変更を加えても、ページ内のデータには影響しません。

プロパティ:
    アクティブ：{
      タイプ:数値、
      オブザーバー:関数(newVal,oldVal){
        //データを前処理する}
    }
}

3. ページスタックを変更するすべての操作は、ページによって完了します。

ページAのコンポーネントCをクリックするとページEにジャンプします

ページBのコンポーネントCをクリックするとページFにジャンプします

この場合、クリック イベントは処理のためにページに渡され、コンポーネントはイベント通知のみを行います。特定のジャンプ イベントは、ページ内の関数によって実装されます。

コンポーネントでの使用:

this.triggerEvent('click',引数)

ページA:

<c-component bind:click="navtoPageE" />

ページ B:

<c-component bind:click="navtoPageF" />

コンポーネント内にコンポーネントを入れ子にしないようにしてください

コンポーネント内に読み込みコンポーネントを使用していましたが、読み込みコンポーネントの表示をパラメータで制御しており、非表示にできない問題が発生したため、特定のコンポーネントが見つけられませんでした。

コンポーネントは統一されたクラスを定義する

これは、テンプレートとしてよく使用されるコンポーネント内のメソッドの統一された呼び出しを容易にするためのものです。

acmp = this.selectAllComponents('.card') とします。
acmp.forEach(関数 (ele, インデックス) {
    ele.closeActionBar();
})

コンポーネントライフサイクルの使用

コンポーネントはライフサイクルをサポートします。一度だけ初期化する必要がある一部のデータまたはカウンター関数は、添付された状態で完了する必要があります。

生涯:
    添付（）{
      this.setData({
        オープンID:app.globalData.openid
      })
    }
}

参照ドキュメント

WeChat ミニプログラム - ページとコンポーネント間で情報を転送し、機能を呼び出す方法

WeChat ミニプログラム - ミニプログラムの開発をスピードアップするためのヒント

要約する

WeChatミニプログラム開発のコンポーネント設計仕様に関するこの記事はこれで終わりです。WeChatミニプログラムコンポーネントの関連コンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。