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!