WeChat ミニ プログラムの開発: 特急問い合わせ

高洛峰
リリース: 2017-02-24 14:45:59
オリジナル
3131 人が閲覧しました

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

コードの実装:

1. 以下に示すように、高速クエリ用の小さなプログラム プロジェクトを作成します:

WeChat ミニ プログラムの開発: 特急問い合わせ

2. app.json ページのナビゲーション バーのタイトルを次のように変更し、インデックスに移動します。 .wxml 以下の図に示すように、ページはすべての個人情報を削除し、外部ビュー コンポーネントのみを保持します。

WeChat ミニ プログラムの開発: 特急問い合わせ

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

<!--index.wxml-->
<view class="container">
 
</view>
ログイン後にコピー

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

WeChat ミニ プログラムの開発: 特急問い合わせ

アイコンに表示されているコードをページにコピーします。 コードは次のとおりです:

<!--index.wxml-->
<view class="container">
 <input placeholder="请输入运单号"  />
</view>
ログイン後にコピー

実行後、ホームページに特定の入力ボックスがすでに存在していることがわかります。 、下の図に示すように。

WeChat ミニ プログラムの開発: 特急問い合わせ

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

input {
  border: 1px solid red;
  width: 90%;
  margin: 5%;
  padding: 5px;
 
}
ログイン後にコピー

WeChat ミニ プログラムの開発: 特急問い合わせ

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

<!--index.wxml-->
<view class="container">
 <input placeholder="请输入运单号"  />
 
 <button type="primary"> 查询 </button>
</view>
ログイン後にコピー

デバッグされたページを次のように保存します:

WeChat ミニ プログラムの開発: 特急問い合わせ

次に、このコードを使用して、運送状番号を入力して [クエリ] をクリックすると、運送状の詳細情報を表示できるようにする必要があります。
WeChat の公式 API を通じてネットワーク リクエストを開始します

その他の WeChat アプレット開発: 速達クエリ関連記事については、PHP 中国語 Web サイトに注目してください。

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