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

高洛峰
풀어 주다: 2017-02-24 14:45:59
원래의
3149명이 탐색했습니다.

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

코드 구현:

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

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

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

WeChat Mini 프로그램 개발: 빠른 문의index.wxml의 코드는 다음과 같습니다.

<!--index.wxml-->
<view class="container">
 
</view>
로그인 후 복사

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

WeChat Mini 프로그램 개발: 빠른 문의이미지에 표시된 코드를 우리 페이지에 복사합니다.

<!--index.wxml-->
<view class="container">
 <input placeholder="请输入运单号"  />
</view>
로그인 후 복사

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

WeChat Mini 프로그램 개발: 빠른 문의이 입력 상자의 색상이 보이지 않으므로 이 입력 상자에 스타일을 추가합니다. index.wxss의 스타일 코드는 다음과 같습니다.

input {
  border: 1px solid red;
  width: 90%;
  margin: 5%;
  padding: 5px;
 
}
로그인 후 복사

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

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

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

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

WeChat Mini 프로그램 개발: 빠른 문의다음으로 메소드를 작성해 보겠습니다. 이 코드를 통해 운송장 번호를 입력하고 Query를 클릭하면 운송장의 세부 정보를 볼 수 있습니다.

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


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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿