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

PHPz
リリース: 2017-04-23 13:23:18
オリジナル
2439 人が閲覧しました

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

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

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

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

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

エクスプレス問い合わせ - 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;

}


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



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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!