Tutoriel d'exemple de développement de programme Express Inquiry-WeChat Mini

Résumé : Les amis qui ont suivi notre série de tutoriels étape par étape doivent avoir une certaine compréhension du contenu de base des mini-programmes. Aujourd’hui, nous allons en fait étudier un cas global : la demande de livraison express.

Exigences du projet : 1.L'applet WeChat affiche une page pour les demandes de livraison express 2. Entrez le numéro de commande express pour afficher le processus de commande. ...

Les amis qui ont suivi notre série de tutoriels étape par étape sont familier avec le contenu de base du mini-programme. Vous devez avoir une certaine compréhension. Aujourd’hui, nous allons en fait étudier un cas global : la demande de livraison express.

一直跟着我们手把手系列教程的朋友，对小程序的基础内容应该有一定的了解了。今天我们来实在学习一个综合案例：快递查询。项目要求：
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发起网络请求

Exigences du projet :
1. L'applet WeChat affiche une page de demande express
2. Entrez le numéro de commande express pour afficher le processus de commande.

Implémentation du code de développement de l'applet WeChat de demande de livraison express :

1. Créez un projet d'applet de demande de livraison express, comme indiqué ci-dessous :

2. Modifiez le titre de la barre de navigation dans la page app.json pour lire : Express Query, puis accédez à l'index. . La page wxml supprime toutes les informations personnelles et conserve uniquement les composants de vue externe, comme indiqué ci-dessous :

index. wxml Le code est le suivant :

3 . Sur la page d'accueil, ajoutez une zone de saisie. Comment ajouter une zone de saisie ? Vous pouvez accéder à l'API officielle de WeChat et trouver la documentation de développement du mini-programme --- Composants - Composants de formulaire --- Zone de saisie (saisie). Comme indiqué ci-dessous :

Copiez le code de l'icône sur notre page, le code est le suivant :

Après l'exécution, nous constaterons qu'il existe déjà une certaine zone de saisie sur la page d'accueil, comme le montre la figure ci-dessous.


Nous constaterons que la couleur de cette zone de saisie est invisible, nous ajoutons un style. Le code de style de index.wxss est le suivant :
input { border : 1px solid red; width : 90%; marge : 5 %; remplissage : 5px;}

[Note] :Lorsque nous définissons le style de saisie , il y a Les étudiants peuvent ajouter un point devant l'entrée. Ils constateront alors que le style n'est pas du tout appelé. C'est parce que . est utilisé pour définir les styles de classe et qu'il n'est pas nécessaire d'ajouter une entrée !
Ensuite, nous devons ajouter un bouton de requête sur la page d'accueil. Comment ajouter un bouton de requête ? Document de développement du mini programme---Composant--Composant de formulaire---Bouton (bouton), référez-vous à l'exemple officiel, nous ajoutons du code à la page wxml

QueryLa page après avoir enregistré le débogage est la suivante :


Ensuite, nous devons écrire une méthode via ce code, après avoir saisi une feuille de route. numéro, cliquez sur Requête et nous pouvons afficher les informations détaillées de la lettre de transport.
Initiez une requête réseau via l'API officielle de WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!