Express-Anfrage – Beispiel-Tutorial zur WeChat Mini-Programmentwicklung-Mini-Programmentwicklung-php.cn

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

PHPz

Freigeben： 2017-04-23 13:23:18

Original

2526 Leute haben es durchsucht

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，创建一个快递查询的小程序项目，如下所示：

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

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

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

index.wxml的代码如下：

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

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

运行后我们会发现首页已经有一定输入框，如下图所示。
Express-Anfrage – Beispiel-Tutorial zur WeChat Mini-Programmentwicklung

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

input {

border: 1px solid red;

width: 90%;

margin: 5%;

padding: 5px;

}

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

保存调试后页面的如下：
Express-Anfrage – Beispiel-Tutorial zur WeChat Mini-Programmentwicklung

接下来，我们就要编写一个方法，通过这个代码，我们输入一个运单单号后，点击查询我们就可以查看的运单的详细信息。
通过微信官方的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:
Express-Anfrage – Beispiel-Tutorial zur WeChat Mini-Programmentwicklung

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:
Express-Anfrage – Beispiel-Tutorial zur WeChat Mini-Programmentwicklung

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:
Express-Anfrage – Beispiel-Tutorial zur WeChat Mini-Programmentwicklung

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.
Express-Anfrage – Beispiel-Tutorial zur WeChat Mini-Programmentwicklung

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;}
Express-Anfrage – Beispiel-Tutorial zur WeChat Mini-Programmentwicklung

[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

Die Seite nach dem Speichern des Debuggings sieht wie folgt aus:
2017 -02-20_182632.jpg

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!