必須情報：ミニプログラム開発ドキュメントと設計ガイドラインのポイントを詳しく解説

この記事では主に、WeChat が公式に公開している開発ドキュメントと設計ガイドラインについて詳しく説明します:

ミニプログラム開発ドキュメント

ミニプログラム開発方法の全体的な紹介と、公式のサンプルを提供します。体験するように招待された開発者は、コードをスキャンしてミニ プログラムを体験できます。

ミニ プログラム設計ガイド

ミニ プログラムの設計仕様に関する規定は、ユーザー エクスペリエンス、要素のスタイルからレイアウトに至るまで、非常に包括的です。これは、WeChat が小規模なプログラムとその巨大な機能を重視していることを反映しており、制限なしでむやみに公開すると、深刻な製品の断片化につながるのではないかと懸念しています。

次に、2つの文書の具体的な内容を紹介していきます。

1. ミニプログラム開発ドキュメント

ドキュメントの冒頭に記載されています:

ユーザー情報の取得、ローカルストレージ、支払い機能など、WeChat が提供する機能を簡単にアクティブ化できる WeChat ネイティブ API の呼び出しをサポートします。等

実際、ここにリストされている機能のいくつかは、以前のパブリック アカウントの開発で実装できます。私たちにとって、この文の重要な点は「ネイティブ」です。基本的に、ナビゲーション バーやボタンなどのコンポーネントは、実際には WeChat の中間層を介してネイティブ コンポーネントに変換され、レンダリング速度と Web の操作が効果的に向上すると判断できます。効率性を高め、ネイティブ アプリに近いエクスペリエンスを提供します。

デモ プログラムには、ドロップダウン、ナビゲーション バーなど、いくつかの新しいコンポーネントが表示されます。ミニ プログラムは、基本的に HTML+CSS に似た複合言語ツールも提供するため、新しいコンポーネントに驚くことはありません。考えられる限り、開発者は WeChat が提供する開発ツールを通じてより多くのコンポーネントを実装できるはずです。

2. ミニプログラム設計ガイド

今回のWeChatの設計仕様は、より具体的かつ奥深いものであり、公式が設計がWeChatの仕様に準拠する必要があると規定するかどうかはまだ明らかではありません。しかし個人的には、エコシステムが徐々に成熟していくにつれ、WeChat の厳しい経営スタイルに従うことも不可能ではないと感じています。

しかし、別の側面から見ると、WeChat は WXSS と呼ばれるスタイル定義言語 (CSS はそのサブセットです) を提供し、ユーザーに非常に強力なスタイルのカスタマイズ機能を提供します。

1. WeUI の更新

新しいデザイン スタイルとコンポーネントにより、WeChat の公式フロントエンド UI フレームワーク WeUI もメジャー アップデートを受け、独立した IO ドメイン名: https://weui.io を持ちます。

このアップデートでは以下も提供されます:

Sketch デザイン コントロール ライブラリ: https://github.com/weui/weui-...

Photoshop デザイン コントロール ライブラリ: https://wximg.gtimg .com/shake ...

デザインソースファイルを提供することで、デザイナーはより簡単にWeChatミニプログラムのデザインプロセスに参加できるようになります。

より一貫性のあるデザインを実現するために、最新のデザイン ソース ファイルには対応するフォント ファイルも提供されています。中国語フォントは Pingfang (iOS) と Siyuan Heidi (Android) を使用し、英語フォントは SF UI Display (iOS) と Robot (Android) を使用します。

2. ユーザーエクスペリエンス仕様

ユーザーエクスペリエンス仕様もドキュメント内で部分的に定義されており、ドキュメントの読み取りエクスペリエンスについても説明されています。

ミニ プログラムのいくつかの重要な視覚的特徴は、デザイン仕様から垣間見ることができます:

3. 階層仕様

WeChat の階層はシンプルで、クールなネイティブ アニメーションはありませんが、このページ レベルの仕様は、依然として Google マテリアル デザインを思い出させます。最初に発売されたときはすごいです。

WeChat 自体と同様に、WeChat ミニ プログラムの 4 つのレベルは理解しやすいです:

詳細情報: ミニ プログラム開発ドキュメントと設計ガイドラインの重要なポイントの詳細な説明 関連記事については、PHP 中国語に注目してください。 Webサイト！