WeChatミニプログラムの完全な開発概要

WeChat で使用される開発言語とファイルは非常に「特殊」です。

#ミニ プログラム使用されるプログラム ファイルの種類は、次のカテゴリに大別されます。

①WXML (WeiXin Mark Language、WeChat マークアップ言語)

②WXSS (WeiXin スタイルシート、WeChat スタイルシート)

③JS (Java、小さい)プログラムの本体)

言語の観点から見ると、ミニ プログラムは一連の標準を再定義するようです。しかし実際には、HTML、CSS、Java の「フロントエンド 3 点セット」と大きな違いはありません。

関連する学習の推奨事項: 小さなプログラム開発チュートリアル

さあ、比較してみましょう小規模プログラム開発言語と「3 要素のフロントエンド セット」の類似点と相違点を見てみましょう:

HTML と WXML: この 2 つには大きな違いがありますこれまで Android 開発に携わったことがない場合は、頭が痛いと感じるかもしれません。実際、WXML は Android 開発におけるインターフェース XML 記述ファイルに似ており、プログラム インターフェースの構築に適していますが、HTML は記事の表示 (これは HTML の歴史に関係します) やインターネット ページの構築に向いています。

WXSS と CSS: この 2 つの言語にはほとんど違いがなく、直接使用できます。

JS ファイル: ミニ プログラムの JS ファイルは、フロントエンド開発で使用される JS とほぼ同じで、ミニ プログラムの JS にいくつかの API インターフェイスが追加されているだけです。 WeChat の一部の不要な機能 (DOM など) を削除します。

言語の点では、小規模なプログラムは学習コストを最小限に抑えながらフロントエンド開発と完全に連携していますが、これはすべてのフロントエンド開発者がシームレスに移行できることを意味するわけではありません。

フロントエンド開発から小規模プログラムに切り替える場合は、次の 2 つの点に注意する必要があります。

HTML および WXML ファイルの構築上の考え方は次のとおりです。私がこれまでフロントエンド開発しか経験したことがない場合、WXML の記述方法に慣れるまでに時間がかかると思います。

ミニ プログラムではフロントエンド言語を使用していますが、フロントエンド開発のアイデアを引き続き開発に使用できるわけではありません。小規模プログラムのフロントエンド開発の要件は、「インターフェースの構築」から「完全なアプリケーションの開発」へとグレードアップしており、フロントエンド開発には意識改革が求められています。

インターフェースの構築

1. 基本ロジック

WXML および WXSS ファイルは小さなプログラム インターフェースです要素宣言とスタイル記述ファイル。

WXML の最大の特徴は、ビューの形式でインターフェイス要素を接続し、プログラム ロジック (AppService) を通じて情報の更新をリアルタイムでビュー層に伝達することです。

view は、HTML の p 要素に似ています。構築時に、ビューを複数のレベルでネストでき、任意の視覚要素をビュー内に配置できます。

要素が画面の外に出てしまうと、ユーザーはそれを見ることができなくなります。これは HTML とはまったく異なります。

たとえば、私たちは携帯電話の画面を舞台として想像しますが、舞台の外の俳優は観客からは見えません。

アプレットにはスクロール用の専用ビューがあります。

インターフェイスを自由にスクロールできるインターフェイス (リストなど) にしたい場合は、スクロールビュー ビューを使用して、そのサイズを画面全体に合わせて調整できます。 WXSS で、scroll-y (上下にスクロール) または roll-x (左右にスクロール) を設定すると true になります。

#DOM を直接使用してアプレット内の WXML 要素を制御することはできません。データを更新する必要がある場合は、WXML が提供するデータ バインディングおよび要素レンダリング メソッドを使用する必要があります。

もう 1 つ注意すべきことは、ミニ プログラムのグリッド タイプセット システムは、2009 年に W3C によって提案されたタイプセット標準である Flex レイアウトを使用していることです。

2. データのバインド

単一フィールドの場合、開発者はデータ バインディング メソッドを使用して情報を更新できます。

バインドされたデータはロード時に更新されるだけでなく、JS メインプログラム内の関数の形で更新することもできます。インターフェース。 。

3. 条件付きレンダリングとリスト (ループ) レンダリング

条件付きレンダリングは、予期しない状況のプロンプト (失敗など) があるページに適しています。リストまたは詳細のロード、プロンプトの作成など)。

そのレンダリングにはトリガー条件があります。つまり、条件が満たされるとページがレンダリングされ、そうでない場合は無視されるか、別のコードがレンダリングされます。

#2 つの中括弧内に含まれる判定条件の変数は、次の JS コード内のデータです。メインプログラムのステートメント。

インターフェイスでリストを作成する必要がある場合は、WXML のループ レンダリングを使用して、同じ要素のレンダリング コードを収集できます。ループされたデータは、WXML アクセス用の配列形式でデータに書き込むことができます。

#レンダリング完了後、レンダリングの判定条件を変更すると、インターフェイスの変更に影響を与える可能性があります。

4. テンプレートと参照

WXML は、コード サイズを削減するためのテンプレートと参照の使用をサポートしています。

テンプレートは、WXML コードで同じコードを再利用する方法です。

複数のテンプレートを同じファイルに書き込み、インポートを使用して他のファイルでそれらを参照できます。

ページ全体を参照する必要がある場合は、include を使用する必要があります。

##5. スタイル

WXSS スタイル シートを通じて、開発者はWXML で要素のスタイルを定義できます。

WXSS CSS コードと同様に、セレクターを使用して要素を直接選択できます。 WXML では、要素の ID とクラスを直接定義して、WXSS ファイルでのスタイル定義を容易にすることもできます。

6. ユーザー操作とイベント応答

WeChat は HTML を使用しないため、ハイパーリンク (要素) イベントを追加してユーザーのクリックを監視することはできません。

クリック イベントをリッスンする必要がある要素については、WXML の bindingtap 属性または catchtap 属性を使用してバインドする必要があります。

WeChat では、ワンクリックに加えて、長押し、タッチ開始、そして解放します。

WXML でイベントをバインドすると、メイン プログラムの JS で使用できるようになります。

他の API にも対応するイベントがあります。これらのイベントは、次の公式ドキュメントで見つけることができます。 WeChat アプレットをチェックしてください。

ミニ プログラムのページ間を移動する必要がある場合は、wx.navigateTo() メソッドを使用する必要があります。

ページ レベルのジャンプに関しては、WeChat ではレベル ジャンプが 5 つのレイヤーに制限されていることに注意してください。開発時には、対応する制限を超えていないか注意する必要があります。

#ネットワーク アクセス

アプレットは 3 つのリクエスト メソッドをサポートしています。

1 つは直接 HTTP 接続リクエストで、リクエストの直後に結果が返され、接続が終了します。もう 1 つはソケット永続接続で、一方が積極的に接続を閉じると、接続は終了します。

WeChat は、プレーン テキストを送受信するための上記 2 つの接続方法に加えて、ファイル送受信インターフェイスも提供します。ミニプログラムで録音した音声と選択した写真をこの方法でアップロードする必要があります。

ミニ プログラムを通じてネットワークにアクセスするには、サーバーが HTTPS セキュア接続をサポートし、ポート番号が 443 である必要があります。

同時に、ミニ プログラムは、ミニ プログラムの登録時に開発者が設定したサーバー アドレスにのみアクセスできます。

マルチメディアとストレージ

マルチメディア (オーディオやビデオを含む) を再生する必要がある場合、またはミニ プログラムにデータを保存する必要がある場合は、 HTML 5 提供される標準では、WeChat が提供するミニ プログラム マルチメディア再生制御インターフェイスとストレージ インターフェイスを使用する必要があります。

サウンドインターフェイスに関しては、オーディオ再生と音楽再生の2種類があります。

オーディオ再生には、再生、一時停止、再生停止の 3 つのインターフェイスが用意されていますが、特定の再生時点にジャンプする機能や、現在の再生進行状況を取得する機能はありません。

音楽再生インターフェイスでは、上記の基本的な再生制御に加え、音楽状態の確認やモニタリングなどの機能が提供されます。

アプレットは、写真とビデオのデータ交換インターフェイスを提供します。このインターフェイスを通じて、アプレットはユーザーが選択または撮影した写真やビデオにアクセスできます。

オーディオ録音およびビデオ写真インターフェイスを通じて取得されるマルチメディア情報は一時的なものであり、ファイルはミニ プログラム ストレージ ファイル インターフェイスを通じて永続的に保存する必要があります。

テキスト データの場合、アプレットはこのタイプのデータを保存するためのインターフェイスも提供します。 Android または他のアプリ プラットフォームから切り替える開発者は、ミニ プログラムがデータベース スタイルのローカル データ ストレージ形式を提供せず、「フィールド値」の 1 対 1 形式で保存することに注意する必要があります。

ハードウェア関連

ミニ プログラムは WeChat に依存しており、多くのハードウェア関連 API を提供します。

アプレットは API を通じて次のデータを取得できます:

システム関連情報 (ネットワーク ステータス、デバイス モデル、ウィンドウ サイズなどを含む) .)

重力感知データ

コンパス データ

上記の API を通じて、 「Shake」やその他のインタラクティブなページを簡単に作成できます。

ただし、注意してください: これらのデータはアクティブにのみ取得でき、これらの値の変更のコールバックを通じてリアルタイムで取得することはできません。

プッシュ サービス

ミニ プログラムはプッシュ サービスを提供し、いつでもユーザーに必要な通知を送信できます。ただし、プッシュサービスは通知リマインダーのみに使用でき、一括送信には使用できませんのでご注意ください。

ミニ プログラムでは、プッシュ サービスは「テンプレート メッセージ」と呼ばれます (以前にサービス アカウントを開発したことがある開発者は、これに精通しているはずです)。開発者は、ミニ プログラムでテンプレート メッセージ プッシュ サービスを使用する前に、新しいテンプレート プッシュ メッセージ (購入成功通知など) を WeChat ミニ プログラム バックグラウンドで登録し、承認する必要があります。具体的なレビュー基準については、対応するドキュメントを参照することをお勧めします。

テンプレート メッセージが承認された後、開発者はまず WeChat サーバーからアクセス トークンを取得し、次に値、テンプレート番号、および動的変数をテンプレートに追加する必要があります (例:注文番号、価格など) が WeChat に送信され、ユーザーにプッシュ通知が送信されます。

ユーザー情報とWeChat決済

ミニプログラムはユーザーの同意を得てユーザーの情報を取得することができます。

まず、ミニ プログラムでは、ユーザーが WeChat ログイン インターフェイスを介してログインを承認できるようにする必要があります。その後、アプレットはユーザー情報を表示および使用できるようになります。

WeChat を使用してログインする場合、データが改ざんされていないことを確認するために、メッセージの整合性を確認するためにメッセージに署名する必要があることに注意してください。

ミニプログラムでは WeChat 決済も利用できます。支払いリクエストを送信する場合、メッセージの完全性を確認するために送信メッセージに署名を追加する必要があることに注意してください。

関連する学習の推奨事項: WeChat ミニ プログラム チュートリアル

以上がWeChatミニプログラムの完全な開発概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。