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)
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development 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.

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool