Express-Anfrage – Beispiel-Tutorial zur WeChat Mini-Programmentwicklung

Zusammenfassung: Freunde, die unsere Reihe von Schritt-für-Schritt-Anleitungen verfolgt haben, sollten ein gewisses Verständnis für den grundlegenden Inhalt von Miniprogrammen haben. Heute werden wir tatsächlich einen umfassenden Fall untersuchen: eine Express-Lieferanfrage.

Projektanforderungen: 1.WeChat-Applet zeigt eine Seite für Express-Lieferanfragen an 2. Geben Sie die Express-Bestellnummer ein, um den Bestellvorgang anzuzeigen. ...

Freunde, die unsere Reihe von Schritt-für-Schritt-Anleitungen verfolgt haben, sind Sie sind mit den grundlegenden Inhalten des Miniprogramms vertraut. Sie sollten über ein gewisses Verständnis verfügen. Heute werden wir tatsächlich einen umfassenden Fall untersuchen: eine Express-Lieferanfrage.

一直跟着我们手把手系列教程的朋友，对小程序的基础内容应该有一定的了解了。今天我们来实在学习一个综合案例：快递查询。项目要求：
1.微信小程序显示一个快递查询的页面
2.输入快递订单编号可以查看订单的流程。

快递查询微信小程序开发代码实现：

1，创建一个快递查询的小程序项目，如下所示：


2，在app.json页面里面修改导航栏标题显示为：快递查询，并到index.wxml页面将个人信息全部删除，仅保留外部view组件，如下图所示：

index.wxml的代码如下：

3.在首页添加一个输入框。怎样添加一个输入框呢？可以到微信的api官方，找到小程序开发文档---组件--表单组件---输入框(input)。如下图所示：

拷贝图示的代码到我们的页面当中去，代码如下所示：

 

运行后我们会发现首页已经有一定输入框，如下图所示。


我们会发现这个输入框的颜色看不见，我们给这个输入框加一个样式。index.wxss的样式代码如下：

input {

  border: 1px solid red;

  width: 90%;

  margin: 5%;

  padding: 5px;

}

【注意】：我们再定义input的样式时，有的同学可能会在input前面加个点号. 然后会发现样式根本没有调用。那是因为.是用来定义类样式，input不用加！
接下来我们要在首页添加一个查询按钮。怎么样添加查询按钮呢？小程序开发文档---组件--表单组件---按钮(button），参照官方示例，我们在wxml页面新增代码

 

  查询

保存调试后页面的如下：


接下来，我们就要编写一个方法，通过这个代码，我们输入一个运单单号后，点击查询我们就可以查看的运单的详细信息。
通过微信官方的API发起网络请求

Projektvoraussetzungen:
1. Das WeChat-Applet zeigt eine Seite zur Express-Anfrage an
2. Geben Sie die Express-Bestellnummer ein, um den Bestellvorgang anzuzeigen.

Implementierung des WeChat-Applet-Entwicklungscodes für Express-Lieferanfragen:

1 Erstellen Sie ein Applet-Projekt für Express-Lieferanfragen, wie unten gezeigt:

2. Ändern Sie den Titel der Navigationsleiste auf der Seite „app.json“ in „Express-Abfrage“ und gehen Sie zum Index . Die WXML-Seite löscht alle persönlichen Informationen und behält nur die externen Ansichtskomponenten bei, wie unten gezeigt:

index. wxml Der Code lautet wie folgt:

3 . Auf der Startseite ein Eingabefeld hinzufügen. Wie füge ich ein Eingabefeld hinzu? Sie können zur offiziellen API von WeChat gehen und die Mini-Programmentwicklungsdokumentation ---Komponenten--Formularkomponenten---Eingabefeld (Eingabe) finden. Wie unten gezeigt:

Kopieren Sie den Code des Symbols auf unsere Seite. Der Code lautet wie folgt:

Nach dem Ausführen werden wir feststellen, dass auf der Homepage bereits ein bestimmtes Eingabefeld vorhanden ist, wie in der folgenden Abbildung dargestellt.


Wir werden feststellen, dass die Farbe dieses Eingabefelds unsichtbar ist, und fügen einen Stil hinzu. Der Stilcode von index.wxss lautet wie folgt:
input { border: 1px solid red; width: 90%; Marge: 5 %; Polsterung: 5 Pixel;}

[Hinweis]:Wenn wir den Eingabestil definieren , Es gibt möglicherweise einen Punkt vor der Eingabe. Dann werden sie feststellen, dass der Stil überhaupt nicht aufgerufen wird. Das liegt daran, dass . zum Definieren von Klassenstilen verwendet wird und keine Eingaben erforderlich sind!
Als nächstes müssen wir eine Abfrageschaltfläche auf der Startseite hinzufügen. Wie füge ich eine Abfrageschaltfläche hinzu? Mini-Programmentwicklungsdokument ---Komponente--Formularkomponente---Schaltfläche (Schaltfläche), siehe offizielles Beispiel, wir fügen Code zur WXML-Seite hinzu

QueryDie Seite nach dem Speichern des Debuggings sieht wie folgt aus:


Als nächstes schreiben wir eine Methode über diesen Code, nachdem wir eine Frachtbriefnummer eingegeben haben , Klicken Sie auf Abfrage und wir können die detaillierten Informationen des Frachtbriefs anzeigen.
Initiieren Sie eine Netzwerkanfrage über die offizielle API von WeChat

Das obige ist der detaillierte Inhalt vonExpress-Anfrage – Beispiel-Tutorial zur WeChat Mini-Programmentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!