学んだことを応用する: Mobike WeChat アプレット開発テクノロジーの概要-見出し-php.cn

前書き

Mobike ミニプログラムは、WeChat ミニプログラムの初日に正式にリリースされ、友人の Weibo メディア界に広まりました。この記事では主に、WeChat アプレット開発の経験の概要と、学習して段階的に進める方法について説明します。

考え方の変更

WeChat アプレットには一般的な HTML タグはありませんが、ビュー、テキスト、マップなど、React に似た WeChat カスタムコンポーネントがあります。

ウィンドウ変数はありませんが、WeChat はwx グローバルメソッドセット

タグリンクはなく、iframe をネストすることはできません

イベントバインディングと条件付きレンダリングは Angular に似ており、すべて WXML で記述されています

データバインディングは Mustache 二重中括弧構文を使用します

によって DOM を操作することはできませんページデータ (React の状態と同様) を変更してビューの表示を変更します

したがって、上記のすべてのフロントエンドテクノロジースタックに精通していれば、WeChat ミニプログラムを快適に開発できるでしょう。

ミニプログラム開発マニュアル参照:WeChat ミニプログラム開発ドキュメント

ライフサイクル

ミニプログラムは単一ページの H5 Web ページであり、すべての要素が一度ロードされることが理解できます。これはライフサイクルの概念につながります:

学んだことを応用する: Mobike WeChat アプレット開発テクノロジーの概要

が初めて開かれ、アプレットが初期化されます

アプレットが初期化された後、onShow イベントがトリガーされます

アプレットはバックグラウンドに切り替わります (画面がオフになります) 、アプリの切り替えなど)、 onHide でトリガーされます

アプレットがバックグラウンドからフォアグラウンドに切り替わり、再び onShow がトリガーされます

アプレットでエラーが発生し、onError がトリガーされます

各ページには独自のライフサイクルもあります:

640.webp (1).jpg

注: WeChat バージョン 6.5.3 では、一部の Android マシンが onLoad イベントをトリガーできない場合は、代わりに onReady を使用できます。

イベントブロードキャスト

「単一ページ構造」WeChat アプレットでは、イベントブロードキャスト (統合イベントセンター) を使用してカスタムイベントを登録およびトリガーできます。そうしないと、後の段階でイベント管理がますます複雑になり、Toページ間でイベントを送信するには、このイベントトリガーメカニズムが必要です。broadcast.js を参照できます。たとえば、Mobike には次のようなシーンがあります。

コードのスキャンに成功すると、ロック解除ページ A でロック解除が成功したことが通知され、乗車ページ B にジャンプしてユーザーの乗車状況を確認する必要があります。

統合されたインシデント管理センターがなければ、このようなプロセスを完了することはほぼ不可能です。もちろん、Hack を使用して問題を解決することはできます。ページ B にジャンプすると B の onShow イベントがトリガーされるため、onShow にビジネスロジックを記述することができます:

学んだことを応用する: Mobike WeChat アプレット開発テクノロジーの概要

しかし、それを処理するにはイベントブロードキャストを使用する方が合理的です:

学んだことを応用する: Mobike WeChat アプレット開発テクノロジーの概要

Data Center

ルートディレクトリの app.js は非常に便利です、ルートディレクトリの app.js は非常に便利です、ルートディレクトリの app.js は非常に便利です。

内部に登録されている変数やメソッドはすべてのページで取得できるため、上記のクロスページイベントトリガー問題の処理にも使用できます。また、アクセスするすべてのページに対して globalData を登録できます。たとえば、systemInfo を globalData に直接登録できるため、すべてのページで取得する必要がなくなります。

パフォーマンスの最適化学んだことを応用する: Mobike WeChat アプレット開発テクノロジーの概要