WeChat Mini 프로그램 개발: 빠른 문의

저희의 단계별 튜토리얼 시리즈를 따라온 친구들은 미니 프로그램의 기본 내용을 어느 정도 이해하고 있어야 합니다. 오늘은 실제로 특급 배송 문의라는 포괄적인 사례를 연구하겠습니다. 프로젝트 요구 사항:
1. WeChat 애플릿에 특급 배송 문의 페이지가 표시됩니다.
2. 특급 주문 번호를 입력하여 주문 과정을 확인하세요.

코드 구현:

1. 아래와 같이 빠른 쿼리를 위한 작은 프로그램 프로젝트를 만듭니다.

2. json 페이지에서 탐색 표시줄 제목을 Express Inquiry로 수정하고 index.wxml 페이지로 이동하여 다음 그림과 같이 모든 개인 정보를 삭제하고 외부 보기 구성 요소만 유지합니다. >

index.wxml의 코드는 다음과 같습니다.

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

3. 홈 페이지에 입력 상자를 추가합니다. 입력 상자를 추가하는 방법은 무엇입니까? WeChat의 공식 API로 이동하여 미니 프로그램 개발 문서---구성 요소--양식 구성 요소---입력 상자(입력)를 찾을 수 있습니다. 아래 그림과 같이

이미지에 표시된 코드를 우리 페이지에 복사합니다.

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

실행 후, 아래 그림과 같이 이미 특정 입력 상자가 있습니다.

이 입력 상자의 색상이 보이지 않으므로 이 입력 상자에 스타일을 추가합니다. index.wxss의 스타일 코드는 다음과 같습니다.

input {
  border: 1px solid red;
  width: 90%;
  margin: 5%;
  padding: 5px;
 
}

[참고]: 입력 스타일을 정의할 때 일부 학생들은 입력 앞에 마침표를 추가할 수 있습니다. 그러면 스타일이 전혀 호출되지 않는다는 것을 알게 될 것입니다. .이 클래스 스타일을 정의하는 데 사용되므로 입력을 추가할 필요가 없기 때문입니다!

다음으로 홈페이지에 쿼리 버튼을 추가해야 합니다. 쿼리 버튼을 추가하는 방법은 무엇입니까? 미니 프로그램 개발 문서---컴포넌트--폼 컴포넌트---버튼(버튼), 공식 예제를 참고하여 다음과 같이 wxml 페이지에

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

코드를 추가하고 디버깅 후 페이지를 저장합니다.

다음으로 메소드를 작성해 보겠습니다. 이 코드를 통해 운송장 번호를 입력하고 Query를 클릭하면 운송장의 세부 정보를 볼 수 있습니다.

WeChat 공식 API를 통해 네트워크 요청 시작

더 많은 WeChat 애플릿 개발: 빠른 배송 쿼리 관련 기사는 PHP 중국어 웹사이트를 참고하세요!