WeChat 開発のための WXML、WXSS、および JS の詳細な紹介

この記事では主に WeChat アプレットの WXML、WXSS、JS の導入と詳細な説明に関する関連情報を紹介します。必要な友達は参考にしてください

数日前にたくさんの時間を費やしました。次に、参考のためにいくつかの実験結果をリストします。

開発ツールを使ったシミュレーションと実機にはまだ大きな違いがあります。また、信頼性が高いため、実機でデバッグすることをお勧めします。

1. WXML (HTML)

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

1.2 公式推奨の基本タグ はブロックタグ、テキストタグとして が使用されますが、p などの他のタグも使用でき、すべてインラインタグです。また、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 ビュー上のネイティブ コンポーネントをカバーするようなものです。

overflow

や要素ではカバーできないので、どんなに上位にz-indexを書いても上に置くことはできないと考えて良いでしょう。したがって、ページ上に弾性レイヤーやマスキング レイヤーを作成することはお勧めできません。キャンバスをスクロールビューに配置することはできず、スクロールは初期位置に配置されます。キャンバスの背景色を設定すると、背景色のブロックも一緒にスクロールしますが、画像はスクロールしません。

2. WXSS(CSS)

2.1 WXSS は基本的にすべての 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;} のような記述はサポートされており、after と before疑似クラス はサポートされていますが、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 ビューでカバーします。という感覚。しかしいずれにしても、オートフォーカスで自動的にキーボードを呼び出せるという事実は、すでに大絶賛です。

【関連推奨事項】

1. WeChatパブリックアカウントプラットフォームのソースコードダウンロード

2. WeChat投票ソースコード

3. WeChat Lala Takeaway 2.2.4の復号化されたオープンソースバージョンWeChatルービックキューブのソースコード

以上がWeChat 開発のための WXML、WXSS、および JS の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。