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 と &)

推薦する

ico ミラー コードを HTML に追加します (favicon.ico はルート ディレクトリに配置されます)

コード:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC &...

Vue の自動書式設定の改行保存の詳細な説明

ネットで変更方法をいろいろ調べたのですが、うまくいきませんでした。後で大物から見て削除しました。フォ...

MYSQL ログとバックアップおよび復元の問題の詳細な説明

この記事では、参考までにMYSQLログとバックアップとリストアについて紹介します。具体的な内容は以下...

Dockerコンテナの個別展開のためのLNMPの実装

1. 環境整備各コンテナの IP アドレス: nginx: 172.16.10.10マイSQL: 1...

MySQLはOracleシーケンスに似たソリューションを実装しています

MySQLはOracleのようなシーケンスを実装しているOracle は通常、主キー フィールドを処...

jQueryのanimateアニメーションメソッドとアニメーションキューイング問題の解決方法の詳しい説明

目次animate() アニメーションメソッドアニメーションキューイングdelay() メソッドアニ...

bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorException の解決方法

bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorExce...

HTML+CSSを使用してTG-visionホームページを作成する方法

今回はHTML+CSSレイアウトを使用して、TG-vision Shuanghui Mediaのホー...

React で複数の setStates が何回呼び出されるのでしょうか?

目次1. 2 つの setState を何回呼び出すのですか? 2. 2 つの setState の...

Win10 インストール Linux システム チュートリアル ダイアグラム

Windows システムに仮想マシンをインストールするには、 VMware Workstationソ...

CSS 線形グラデーション凹型長方形遷移効果の実装

この記事では、線形グラデーションの凹四角形の遷移効果の難しさやアイデアについて説明します。主に、凹四...

jQuery ステップ進行軸プラグインの実装コード

毎日のjQueryプラグイン - ステップ進捗軸 ステップ進捗軸ツール系のサイトでは入門チュートリア...

MySQL は低速クエリを可能にします (EXPLAIN SQL ステートメントの使用の概要)

今日、データベース操作はますますアプリケーション全体のパフォーマンスのボトルネックになりつつあり、こ...

ウェブサイトのフッター沈下現象に対する3つの解決策を詳しく解説

背景多くのウェブサイトのデザインは、一般的にコンテンツ+フッターの2つの部分で構成されています。コン...

CSS3で実装されたサムネイルホバー効果

成果を達成する実装コードhtml <ヘッダー> <h1><em>...