エクスプレス問い合わせ - WeChat ミニプログラム開発サンプルチュートリアル-ミニプログラム開発-php.cn

エクスプレス問い合わせ - WeChat ミニプログラム開発サンプルチュートリアル

PHPz

リリース： 2017-04-23 13:23:18

オリジナル

2527 人が閲覧しました

要約: 私たちの一連の段階的なチュートリアルに従っている友人は、ミニプログラムの基本的な内容をある程度理解しているはずです。今日は、実際に包括的なケースである速達の問い合わせについて学習します。

プロジェクトの要件: 1.WeChatアプレットは速達問い合わせ用のページを表示します 2. 特急注文番号を入力して注文プロセスを表示します。 ...

私たちの一連の段階的なチュートリアルに従っている友人は、ミニプログラムの基本的な内容をある程度理解しているはずです。今日は、速達の問い合わせという包括的な事例を実際に学習します。 プロジェクトの要件:
1. WeChat アプレットにエクスプレス照会用のページが表示されます。
2. エクスプレス注文番号を入力して注文プロセスを表示します。

速達問い合わせ WeChat アプレット開発コードの実装:

1. 以下に示すように、速達照会アプレットプロジェクトを作成します:

エクスプレス問い合わせ - WeChat ミニプログラム開発サンプルチュートリアル

エクスプレス問い合わせ - WeChat ミニプログラム開発サンプルチュートリアル

2. app.json ページのナビゲーションバーのタイトルを次のように変更します。以下の図に示すように、クエリを実行してindex.wxmlページに移動し、すべての個人情報を削除し、外部ビューのコンポーネントのみを保持します。
エクスプレス問い合わせ - WeChat ミニプログラム開発サンプルチュートリアル

index.wxmlのコードは次のとおりです:

3. ホームページで入力ボックスを追加します。入力ボックスを追加するにはどうすればよいですか? WeChat の公式 API にアクセスし、ミニプログラム開発ドキュメント ---コンポーネント --フォームコンポーネント --入力ボックス (入力) を見つけることができます。下の図に示すように:
エクスプレス問い合わせ - WeChat ミニプログラム開発サンプルチュートリアル

アイコンのコードをページにコピーします。コードは次のとおりです:

実行後、すでに特定の入力があることがわかります。以下に示すように、ホームページ上のボックス。
エクスプレス問い合わせ - WeChat ミニプログラム開発サンプルチュートリアル

この入力ボックスの色は非表示であることがわかります。そのため、この入力ボックスにスタイルを追加します。 Index.wxss のスタイルコードは次のとおりです:

input {

border: 1px Solid red;

width: 90%;

margin: 5%;

padding: 5px;

}

【注意】:入力のスタイルを定義するとき、一部の生徒は入力の前にピリオドを追加するかもしれませんが、その場合、そのスタイルがまったく呼び出されないことに気づくでしょう。これは、 . がクラススタイルの定義に使用されており、入力を追加する必要がないためです。
次に、ホームページにクエリボタンを追加する必要があります。クエリボタンを追加するにはどうすればよいですか?ミニプログラム開発ドキュメント---コンポーネント--フォームコンポーネント---ボタン（ボタン）、公式の例を参照して、wxmlページにコードを追加します

以上がエクスプレス問い合わせ - WeChat ミニプログラム開発サンプルチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。