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

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をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • WeChat アプレットのラジオチェックボックスコンポーネントの詳細な説明とサンプルコード
  • WeChat アプレット ピッカー コンポーネント ドロップダウン ボックスの選択入力入力ボックスの例
  • WeChatアプレットボタンコンポーネントの詳細な説明と簡単な例
  • WeChat アプレットカウントダウンコンポーネント実装コード
  • WeChat アプレット スワイパー コンポーネント カルーセルの詳細な説明と例
  • WeChatアプレット開発でvant uiコンポーネントを正しく使用する方法の詳細な説明
  • WeChatミニプログラム(10)スワイパーコンポーネントの詳細な紹介
  • WeChatミニプログラム(XIV)ボタンコンポーネントの詳細な紹介
  • WeChatアプレットが画像プリロードコンポーネントを実装
  • WeChatアプレット画像コンポーネント例の詳細な説明

<<:  MYSQL は、指定されたユーザーのランキングとクエリを実装します。ランキング関数 (並列ランキング関数) のサンプルコード

>>:  Linux nohup はプログラムをバックグラウンドで実行し、表示します (nohup と &)

推薦する

ReactプロジェクトにSCSSを導入する方法

まず依存関係をダウンロードします yarn sass-loader ノード sass を追加します次...

Dockerの基本的なネットワーク構成の詳細な説明

外部アクセスポートをランダムにマップする -P フラグを使用すると、Docker は 49000 か...

MySQLデータの重複チェックと重複排除の実装ステートメント

テーブル user があり、フィールドは id、nick_name、password、email、p...

MySQL ストアド プロシージャ (in、out、inout) の詳細な説明

1. はじめにバージョン 5.0 以降でサポートされています。特定の機能を実行するための SQL ス...

Linux のさまざまなロックメカニズムの使用方法と違いについて詳しく説明します

序文:この知識を理解する必要がある人は、すでにプロセス間通信とスレッド間通信の基本的な理解を持ってい...

MySql ビュー、トリガー、ストアド プロシージャに関する簡単な説明

ビュービューとは何ですか?ビューの役割は何ですか?ビューは仮想テーブルであり、データ自体を含まない論...

Vue コードの読みやすさに関するいくつかの提案

目次1. コンポーネントをうまく活用してコードを整理する1. UIコンポーネントを抽出する2. モジ...

JavaScript 初心者のための二分探索木アルゴリズムのチュートリアル

目次バイナリ検索木 (BST) とは何ですか?バイナリツリーの基本的な走査(インオーダー、ポストオー...

WeChatアプレットがシンプルな計算機機能を実装

WeChatアプレット:シンプルな計算機、参考までに、具体的な内容は次のとおりです。ミニプログラムに...

Reactコンポーネントをフルスクリーンにする方法

導入この記事は、 React + antdをベースにして、完全な全屏demoを紹介します。その理由は...

Linux でのファイル コンテンツの重複排除と交差と差異の実装

1. データ重複排除日常業務では、Hive や Impala を使用してクエリとエクスポートを行う際...

Linux のパスワードを紛失した場合にリセットする方法

1. スタートアップメニューでは、カーソルを最初の行に移動します - eを押します 2. UTF-8...

CSS で写真のスタッキング効果を実装するサンプルコード

成果を達成するステップ1. 初期index.html最初の写真、一番上の写真を作成します。写真の i...

クールなページング効果を実現するネイティブJS

この記事では、次のような効果を持つ JS ページング効果の例を紹介します。クールだと思いませんか? ...

MySQL サーバーにおける SSD パフォーマンスの問題の詳細な分析とテスト

【質問】 HP サーバーを使用しています。SSD が IOPS 約 5000 を書き込むと、%uti...