Express Inquiry-WeChat Mini Program Development Example Tutorial

Abstract: Friends who have been following our series of step-by-step tutorials should have a certain understanding of the basic content of mini programs. Today we will actually study a comprehensive case: express delivery inquiry.

Project requirements: 1.WeChat Mini Program displays a page for express delivery inquiries 2. Enter the express order number to view the order process. ...

Friends who have been following our series of step-by-step tutorials should have a certain understanding of the basic content of mini programs. Today we will actually study a comprehensive case: express delivery inquiry. Project requirements:
1. The WeChat applet displays a page for express query
2. Enter the express order number to view the order process.

Express query WeChat applet development code implementation:

1. Create an express query applet project, as shown below:


2. Modify the navigation bar title in the app.json page to read: Express Query, and go to the index.wxml page to delete all personal information and only retain the external view components, as shown in the following figure:
## The code of #index.wxml is as follows:

3. Add a Input box. How to add an input box? You can go to the official API of WeChat and find the mini program development documentation---Components--Form components---Input box (input). As shown in the picture below:

Copy the code shown in the picture to our page. The code is as follows:

After running, we will find that there is already a certain input box on the homepage, as shown in the figure below.

We will find that the color of this input box is invisible, so we add a style to this input box. The style code of index.wxss is as follows:

##input {

border: 1px solid red;

width: 90%;

margin: 5%;

padding: 5px;

}

【Note】：When we define the input style, some students may add a period in front of the input. Then they will find that the style is not called at all. That's because . is used to define class styles, and there is no need to add input! Next we need to add a query button on the homepage. How to add a query button? Mini program development document---Component--Form component---Button (button), refer to the official example, we add the code to the wxml page

Query

The page after saving and debugging is as follows:

Next, we will write a method. Through this code, after we enter a waybill number and click Query, we can view the detailed information of the waybill.
Initiate a network request through WeChat’s official API

The above is the detailed content of Express Inquiry-WeChat Mini Program Development Example Tutorial. For more information, please follow other related articles on the PHP Chinese website!