WeChatミニプログラムに関する知識ポイントのまとめ

subPackages サブパッケージの読み込み

ミニ プログラムのメイン パッケージ サイズは 2M 制限を超えないため、サブパッケージを使用することをお勧めします。サブパッケージの合計サイズは超えません。 8M. 複数のサブパッケージを追加できます。サブパッケージの読み込みにより、ミニ プログラムが最初に開始されるときのダウンロード時間を最適化できます。サブパッケージ ページに入ってダウンロードすると、このオンデマンドの読み込みにより、大量の

rpx ユニット、

モバイル端末で最も一般的に使用される適応方法は、rem または vw を使用することです。を調整のユニットとして使用するため、WeChat アプレットは rpx を提供します。このユニットは

Authorization ポップアップ ウィンドウ

wx.getUserInfo インターフェイスの調整を調整します。認証ポップアップ ウィンドウを直接呼び出して表示します。ここで、 をクリックしてユーザーを認証に誘導します。wx.getUserInfo インターフェイスの正式バージョンミニプログラムの調整を行っておりますが、体験版、開発版は従来通りの方法でご利用いただけます。

ネイティブ コンポーネントの z-index

ネイティブ コンポーネントのレベルが最も高いため、z-index がどのように設定されていても、他のコンポーネントはページ内でネイティブ コンポーネントをカバーできない場合は、カバービューで解決できますが、スワイパーやポップアップ ウィンドウなどの特定の環境では、ネイティブ コンポーネントを非表示にして非表示にする必要があります。

を使用するには、hidden を使用する必要があります。

pseudo-elements

ミニ プログラムの疑似要素属性は、WeChat 開発者ツールの CSS 属性では確認できないため、一部のコンポーネント スタイルをオーバーライドできない場合 (ボタンの境界線や一部の行の設定など）、疑似要素 ::after が設定されているため、

#ページ スタック をカバーするために疑似要素を使用する必要があります。 #An application can only open 5 page stacks at the time. 5 つまで開かれた場合 ページを開いた後 (現在の制限は 10 レベル)、新しいページが正常に開けなくなる場合があります。 wx.navigateTo ジャンプは現在のページを保持しますが、wx.redirectTo は保持しないため、ジャンプ メソッドを適切に使用するためにマルチレベルの対話を避けてください

コンポーネント化emplate モジュールとコンポーネント コンポーネントは小さなプログラムのコンポーネントですが、両者の違いは、テンプレート モジュールは主に表示用であり、テンプレートを使用してページ内でメソッドを定義する必要があることです。コンポーネント コンポーネントには独自の js ファイルがあり、コンポーネント コンポーネント全体がページに似ています。簡単に言うと、表示用です。テンプレートを使用することをお勧めします。コンポーネントには多くのロジックが含まれています。コンポーネント

#Debug

## を使用することをお勧めします。

# 1. 開発者ツールのソース ブレーク [デバッグ]、[console.log] をクリックしてデータを出力し、[AppData] をクリックしてデータを表示します2. ミニ プログラムは、互換性とバグの問題をデバッグするために、現在のデバッグ基本ライブラリのバージョンに注意を払います。

3. ミニ プログラムは最初に開発版にあります。または、試用版の右上隅にあるデバッグ表示 vConsole を開いてから、正式版に切り替えて vConsole モードを確認します。

データ転送

1. データ キャッシュ、wx.setStorage を使用します。 wx.getStorage では、保存されたデータは文字列形式のみであるため、通常は JSON.stringfy を使用してデータを変換する必要があります。設定時にオブジェクトを文字列に変換し、取得時に JSON.parse を使用してオブジェクトに復元します。

二、wx.navigateTo はパラメータを渡すためにジャンプし、ジャンプした後に文字列を接合しますurl。onLoad() 関数では、options.parameter name を通じて渡されたパラメータを取得します。特殊文字 (?# など) がある場合は、encodeURIComponent と decodeURIComponent を使用してエンコードとデコードができることに注意してください。

3. getCurrentPages() 関数は、現在のページ スタックのインスタンスを取得するために使用されます。ページ スタックを取得するか、変更することができます。ページ スタック データ

#4. getApp() はグローバル オブジェクトとメソッドを取得できます

#ナビゲーション バー カプセルの配置調整

ナビゲーション バーは一般にカスタマイズされており、より柔軟で制御可能です。まず、app.json で NavigationStyle:custom を設定し、次にミニ プログラム wx.getMenuButtonBoundingClientRect() を使用して、上部のカプセル メニューの位置情報を取得する必要があります。右隅にありますが、このインターフェイスは不安定です。一部のモデルでは取得に失敗するバグがあるため、wx.getSystemInfo を使用してデバイスのステータス バーの高さ (つまり、携帯電話の時刻とバッテリーの列の高さ) を取得します。 、タイトル バーの高さ (つまり、ナビゲーションのリターン キー、タイトル、およびカプセルの高さを含む) デフォルト設定は、Android の場合は 48、iOS の場合は 44 です (アプレットのデフォルトのカプセルは、Android のタイトル バーの中央で 48 ピクセルです。 Androidはカテゴリが多いので多少の違いはありますが、iosはタイトルバーの中心が44px） ナビゲーションバーの合計の高さ タイトルバーの高さがステータスバーの高さ パディング-トップの高さはステータス バーの高さです。タイトル バーの要素は、カプセルに合わせて垂直方向に配置されます。コンテンツの高さを設定するときは、calc (100vh - ナビゲーション バーの合計の高さ) を使用して、スタイルを変更して、グローバル app.wxss

uniionid 識別 に配置します。

Unionid はミニ プログラム ユーザーのプログラム間 ID です。unionid は分散されているため、unionid を取得するには、まず WeChat オープン プラットフォーム (WeChat オープン プラットフォーム - 管理プラットフォーム - ミニ プログラム - バインド ミニ プログラム) をバインドする必要があります。 WeChat オープン プラットフォームによるミニ プログラムが WeChat オープン プラットフォームにバインドされている場合、unionid はありません。異なるミニ プログラムの Unionid が異なる場合、ミニ プログラムは同じサブジェクトにマウントする必要があります。同じユーザーの場合、同じ WeChat オープン プラットフォーム上の異なるアプリケーションでは、unionid は同じです。

バックグラウンドはフロントエンドに Unionid を返します。最初に wx.login がユーザーのログイン資格情報コードを取得し、次に wx.getSetting がそれを確認します。が許可されている場合、wx.getUserInfo はユーザー情報を取得し、ユーザー情報の暗号化されたフィールドを通じてバックグラウンドに送信します WeChat サーバーは、代わりに UnionID を返します。リクエストによって返されるデータは Page.onLoad の後に返される可能性があるため、通常コールバックが追加されます（通常、unionidの取得はapp.jsのonLaunchに配置されるため、それとページのデータをonLoadで処理するにはコールバックが必要です。取得）

Interface request

すべてのリクエストを同じ api.js に抽出することをお勧めします。これにより、後の変更とトラブルシューティングが容易になります。ミニ プログラム リクエストは、WeChat バックエンドを通じて行われ、バックエンド マッピング用のバックエンド アドレスをリクエストします。リクエストしたインターフェイスは次のとおりです。実際には WeChat バックエンドにマッピングされます。WeChat バックエンドは、wx.request によって呼び出される URL を取得し、そのバックエンドを使用してバックエンドをリクエストします。そのため、クロスドメインの問題は発生しません

#入力キーボード

ユーザー エクスペリエンスを向上させるために、テキスト キーボードや数字キーボードなど、さまざまなシナリオで異なるタイプの使用を検討します

wux-weapp

Wux-weapp小規模なプログラム コンポーネントに特に推奨されます。豊富なコンポーネントと柔軟な拡張機能を備えています。

推奨チュートリアル: 「

WeChat ミニ プログラム 」

以上がWeChatミニプログラムに関する知識ポイントのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。