WeChat Mini Program Development: Express Inquiry

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.

Code implementation:

1, create a small program project for express query, as shown below:

2, in app. In the json page, modify the navigation bar title to read: Express Query, and go to the index.wxml page to delete all personal information, leaving only the external view components, as shown in the following figure:

# The code of #index.wxml is as follows:

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

3. Add an input box on the homepage. 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 figure below:

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

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

After running, we will find the homepage There is already a certain input box, 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 style of input, some students may add a period in front of input. Then You 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 home page. How to add a query button? Mini program development document---Component--Form component---Button (button), refer to the official example, we add code to the wxml page

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

Save the page after debugging 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 network requests through WeChat official API

For more WeChat applet development: express query related articles, please pay attention to the PHP Chinese website!