Développement du mini programme WeChat : demande express

Les amis qui ont suivi notre série de tutoriels étape par étape devraient 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 de demande de livraison express
2. Entrez le numéro de commande express pour afficher le processus de commande.

Implémentation du code :

1. Créez un petit projet de programme pour une requête express, comme indiqué ci-dessous :

2. . Dans la page json, modifiez le titre de la barre de navigation pour lire : Express Inquiry, et accédez à la page index.wxml pour supprimer toutes les informations personnelles et conserver uniquement les composants de la vue externe, comme indiqué dans la figure suivante :

Le code de index.wxml est le suivant :

<!--index.wxml-->
<view class="container">
 
</view>

3.Ajoutez une zone de saisie sur la page d'accueil. 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 le montre l'image ci-dessous :

Copiez le code affiché dans l'image sur notre page. Le code est le suivant :

<!--index.wxml-->
<view class="container">
 <input placeholder="请输入运单号"  />
</view>

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 donc un style à cette zone de saisie. Le code de style de index.wxss est le suivant :

input {
  border: 1px solid red;
  width: 90%;
  margin: 5%;
  padding: 5px;
 
}

[Remarque] : Lorsque nous définissons le style de saisie, certains étudiants peuvent ajouter un point devant input . Vous constaterez alors que le style n’est pas appelé du tout. 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), reportez-vous à l'exemple officiel, nous ajoutons le code à la page wxml

<!--index.wxml-->
<view class="container">
 <input placeholder="请输入运单号"  />
 
 <button type="primary"> 查询 </button>
</view>

La page après enregistrement et débogage est comme suit :

Ensuite, nous allons écrire une méthode grâce à ce code, après avoir entré un numéro de lettre de transport et cliqué sur Requête, nous pouvons afficher les informations détaillées du. feuille de route.

Initiez une demande de réseau via l'API officielle de WeChat

Pour plus de développement d'applets WeChat : articles relatifs aux requêtes de livraison express, veuillez faire attention au site Web chinois PHP !