WeChat ミニ プログラム WXML、WXSS、JS の概要と詳細な説明

数日前まで苦労していました。次に、参考のためにいくつかの実験結果をリストします。

0. 開発ツールを使用したシミュレーションと実機の違いは依然として比較的大きいです。また、実機でデバッグする方がより信頼性が高いことをお勧めします。

1.WXML(HTML)

1.1 ミニ プログラムの WXML は HTML ほど寛容ではないため、単一のタグは /> で終わる必要があります。それ以外の場合は、エラーが報告されます。

1.2 公式推奨の基本タグはブロックタグ、テキストタグはですが、divなど他のタグも使用可能で、いずれもインラインタグです。また、wxml パーサーは、ホワイトリストにないタグの属性をすべて削除します。クラス、ID、データはすべてホワイトリストに含まれている必要がありますが、href などは存在しないため、従来の HTML タグを使用する場合は、理論的にはページを構築することは可能ですが、これらはインラインタグであるため、表示を自分で設定する必要があります。

1.3 スクロールビューのスクロールトップとスクロール左は、スクロールビューのスクロール位置を変更できます。ただし、ユーザーがスクロールした後、アプレットはスクロールトップとスクロール左の割り当てを変更しません (これは双方向同期ではありません)。この時点で setData を使用して変更すると、scroll-top とscroll-left の割り当ては前回の値と同じになり、アプレットはこの変更を適用しないため、設定は有効になりません。現時点では、最初に別の値を設定してから、それを元に戻すことしかできません (setData メソッドが同期であることを反映することもできます)。 scroll-viewはスクロール位置を取得しますが、これはbindscrollコールバック関数でのみ取得できるため、スクロール位置を取得する必要がある場合は、自分で保存してください。スクロールビューには、WebView のスクロールという厄介な問題がまだあります。最初のアクションが上部の位置で下にスクロールする場合、scroll-top を 0 に設定しないと、手がスクロールできなくなります。でも 1. わかりました。

1.4 入力は現在、左側のテキストのみをサポートしており、他の入力はできません (シミュレーターは可能です)。フォームを作成する場合、トリガーから送信されると、すべての内部フォーム要素の名前と値が返されるので、フォームに入力およびその他のフォーム要素を配置することをお勧めします。そうしないと、すべてのフォーム要素の変更イベントをバインドするしか取得できず、非常に面倒です。

1.5 チェックボックスグループのみに変更イベントがあり、単一のチェックボックスにはありません。チェックボックスが 1 つしかなく、その外側にチェックボックスグループがあるのが面倒で見苦しいと思われる場合は、代わりに switch type="checkbox" を使用できます。 (WeChat ミニ プログラム アプリケーション アカウント コミュニケーション グループ 563752274)

1.6 マップ コンポーネントは現在、アプリの最初のページに直接ロードするとロードに失敗します。 onLoad の後に追加する必要があります。最初に wx:if="false" を使用し、onLoad の後に true に変更できます。

1.7 マップでは、キャンバスは Web ビューの上にネイティブ コンポーネントをカバーしているように感じられます。要素をオーバーフローしたり、要素で覆ったりすることはできません。z インデックスがどんなに高くても、その上に配置することはできないと考えてください。したがって、ページ上に弾性レイヤーやマスキング レイヤーを作成することはお勧めできません。キャンバスをスクロールビューに配置することはできず、スクロールは初期位置に配置されます。キャンバスの背景色を設定すると、背景色のブロックも一緒にスクロールしますが、画像はスクロールしません。

2.WXSS(CSS)

2.1 WXSS は CSS と非常に似ており、基本的にすべての CSS がサポートされています。ミニ プログラムは rpx ユニットも提供します。 1画面幅は750rpxです。レイアウトとして使用することをお勧めします。ただし、いくつかの小さな違いがありますので、以下にリストします。

2.2 WXSS は、ネストされた中括弧 ({{}}) をサポートしていません。したがって、キーフレームと CSS アニメーションは使用できませんが、トランジションは使用できます。

2.3 現在、テストで導入されたフォントは利用できず、以前 WXML で言及されていた内容は SVG では使用できません。したがって、アイコンは現在、画像の形でのみ作成できます。

2.4 ローカル リソースを WXSS に導入することはできません。使用できるのはオンライン リソースのみです (シミュレーターは利用可能ですが、信じないでください)。また、base64 も使用できます。 (WeChat ミニ プログラム アプリケーション アカウント コミュニケーション グループ 563752274)

2.5 WXSS ルールはセットの関連付けをサポートしていません。したがって、このように body .main {background:#000;} を記述することはできません。なので、書くのはかなり面倒です。各クラスは非常に長いため、名前が重複する恐れがあります。ただし、li.current {color: red;} などのメソッドの記述をサポートし、疑似クラスの前後をサポートしますが、first-child last-child nth-child などの疑似クラスはサポートしません。

2.6 app.wxss と各ページの wxss の間のカバレッジ関係は次のとおりです。同じ名前のルールがある場合、ページはマージではなくアプリを上書きします。

3.JS

3.1 JSの実行環境とViewの実行環境は分離されています。 JSではイベント取得タイミングとsetDataメソッドによるデータ変更のみでビューを変更できます。

3.2 JS には現在、ページの px レベルの幅と高さを取得できないという大きな問題があります。すべてのイベント コールバックの単位は rpx ではなく px レベルですが、現在の rpx と px の間の変換関係は一致しません。知られています。たとえば、キャンバスを使用して絵を描くとします。境界線がどこにあるのかさえ分からず、本当に迷惑です。

3.3 前述したように、前の値と次の値が同じ場合、setData メソッドはビューの変更をトリガーしません (1.3 を参照)

3.4 navigate を使用してジャンプする場合、queryString を使用して相対アドレスを追跡できますが、onLoad イベントは入力パラメーターで渡されます (オブジェクトに変換されます)。ただし、戻るときの正式なデータ通信メカニズムはありません。 getApp() を使用してグローバル オブジェクトを取得し、それに何かを追加して、自分で実装することができます。ナビゲートの最大数 5 については説明しません。

3.5 Canvas getActions が呼び出された後、アクションはクリアされます。つまり、getActions は 2 回続けて呼び出され、2 回目は空の配列になります。

3.6 開発者ツールは nw によって作成されています。開発者ツールの WXML にはパーサーと再アセンブリのプロセスが含まれています。ただし、CSS のサポートから Web ビューのいくつかのバグの類似性まで、ガジェットがネイティブであることを意味するわけではありません。それでも、マップやキャンバスなどのコンポーネントはネイティブ ビューを使用し、それを Web ビューでカバーします。という感覚。とにかく、オートフォーカスが自動的にキーボードを呼び出すことができるという事実は、すでに大きな褒め言葉です。

読んでいただきありがとうございます。これが皆さんのお役に立てば幸いです。そしてこのサイトへのサポートに感謝します。

WeChat ミニ プログラムの WXML、WXSS、および JS の紹介と詳細な説明に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。