WeChat ミニプログラム コンポーネント設計仕様 コンポーネントベースの開発という考え方は、私の開発および設計プロセスに貫かれています。私は長い間、このような考え方から恩恵を受けてきました。
小さなプログラムのコンポーネントを日常的に開発する際、私は通常、次のルールに従います。 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をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MYSQL は、指定されたユーザーのランキングとクエリを実装します。ランキング関数 (並列ランキング関数) のサンプルコード
>>: Linux nohup はプログラムをバックグラウンドで実行し、表示します (nohup と &)
まず依存関係をダウンロードします yarn sass-loader ノード sass を追加します次...
外部アクセスポートをランダムにマップする -P フラグを使用すると、Docker は 49000 か...
テーブル user があり、フィールドは id、nick_name、password、email、p...
1. はじめにバージョン 5.0 以降でサポートされています。特定の機能を実行するための SQL ス...
序文:この知識を理解する必要がある人は、すでにプロセス間通信とスレッド間通信の基本的な理解を持ってい...
ビュービューとは何ですか?ビューの役割は何ですか?ビューは仮想テーブルであり、データ自体を含まない論...
目次1. コンポーネントをうまく活用してコードを整理する1. UIコンポーネントを抽出する2. モジ...
目次バイナリ検索木 (BST) とは何ですか?バイナリツリーの基本的な走査(インオーダー、ポストオー...
WeChatアプレット:シンプルな計算機、参考までに、具体的な内容は次のとおりです。ミニプログラムに...
導入この記事は、 React + antdをベースにして、完全な全屏demoを紹介します。その理由は...
1. データ重複排除日常業務では、Hive や Impala を使用してクエリとエクスポートを行う際...
1. スタートアップメニューでは、カーソルを最初の行に移動します - eを押します 2. UTF-8...
成果を達成するステップ1. 初期index.html最初の写真、一番上の写真を作成します。写真の i...
この記事では、次のような効果を持つ JS ページング効果の例を紹介します。クールだと思いませんか? ...
【質問】 HP サーバーを使用しています。SSD が IOPS 約 5000 を書き込むと、%uti...