search
HomeWeChat AppletMini Program DevelopmentExpress 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:

Express Inquiry-WeChat Mini Program Development Example Tutorial
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 Express Inquiry-WeChat Mini Program Development Example Tutorial#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:


Express Inquiry-WeChat Mini Program Development Example TutorialCopy 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.


Express Inquiry-WeChat Mini Program Development Example Tutorial
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;

}


Express Inquiry-WeChat Mini Program Development Example Tutorial
【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



The page after saving and debugging is as follows:


Express Inquiry-WeChat Mini Program Development Example TutorialNext, 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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

Atom editor mac version download

Atom editor mac version download

The most popular open source editor