WeChat Mini Program Development: Express Inquiry-Mini Program Development-php.cn

WeChat Mini Program Development: Express Inquiry

高洛峰

Release： 2017-02-24 14:45:59

Original

3141 people have browsed it

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:

WeChat Mini Program Development: Express Inquiry

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:

WeChat Mini Program Development: Express Inquiry

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

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

Copy after login

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:

WeChat Mini Program Development: Express Inquiry

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

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

Copy after login

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

WeChat Mini Program Development: Express Inquiry

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;
 
}

Copy after login

WeChat Mini Program Development: Express Inquiry

[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>

Copy after login

Save the page after debugging as follows:

WeChat Mini Program Development: Express Inquiry

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!