빠른 문의 - 위챗 미니 프로그램 개발 예시 튜토리얼-미니 프로그램 개발-php.cn

빠른 문의 - 위챗 미니 프로그램 개발 예시 튜토리얼

PHPz

풀어 주다： 2017-04-23 13:23:18

원래의

2525명이 탐색했습니다.

요약: 단계별 튜토리얼 시리즈를 따라온 친구들은 미니 프로그램의 기본 내용을 어느 정도 이해하고 있어야 합니다. 오늘은 실제로 특급 배송 문의라는 포괄적인 사례를 연구하겠습니다.

프로젝트 요구 사항: 1.위챗 애플릿에서 특급배송 문의 페이지를 표시합니다. 2. 주문 과정을 보려면 빠른 주문 번호를 입력하세요. ...

저희의 단계별 튜토리얼 시리즈를 따라온 친구들은 다음과 같습니다. 미니 프로그램의 기본 내용을 숙지하고 어느 정도 이해가 되어 있어야 합니다. 오늘은 실제로 특급 배송 문의라는 포괄적인 사례를 연구하겠습니다.

一直跟着我们手把手系列教程的朋友，对小程序的基础内容应该有一定的了解了。今天我们来实在学习一个综合案例：快递查询。项目要求：
1.微信小程序显示一个快递查询的页面
2.输入快递订单编号可以查看订单的流程。

快递查询微信小程序开发代码实现：

1，创建一个快递查询的小程序项目，如下所示：

빠른 문의 - 위챗 미니 프로그램 개발 예시 튜토리얼

2，在app.json页面里面修改导航栏标题显示为：快递查询，并到index.wxml页面将个人信息全部删除，仅保留外部view组件，如下图所示：
빠른 문의 - 위챗 미니 프로그램 개발 예시 튜토리얼

index.wxml的代码如下：

3.在首页添加一个输入框。怎样添加一个输入框呢？可以到微信的api官方，找到小程序开发文档---组件--表单组件---输入框(input)。如下图所示：
빠른 문의 - 위챗 미니 프로그램 개발 예시 튜토리얼

拷贝图示的代码到我们的页面当中去，代码如下所示：

运行后我们会发现首页已经有一定输入框，如下图所示。
빠른 문의 - 위챗 미니 프로그램 개발 예시 튜토리얼

我们会发现这个输入框的颜色看不见，我们给这个输入框加一个样式。index.wxss的样式代码如下：

input {

border: 1px solid red;

width: 90%;

margin: 5%;

padding: 5px;

}

【注意】：我们再定义input的样式时，有的同学可能会在input前面加个点号. 然后会发现样式根本没有调用。那是因为.是用来定义类样式，input不用加！
接下来我们要在首页添加一个查询按钮。怎么样添加查询按钮呢？小程序开发文档---组件--表单组件---按钮(button），参照官方示例，我们在wxml页面新增代码

保存调试后页面的如下：
빠른 문의 - 위챗 미니 프로그램 개발 예시 튜토리얼

接下来，我们就要编写一个方法，通过这个代码，我们输入一个运单单号后，点击查询我们就可以查看的运单的详细信息。
通过微信官方的API发起网络请求

프로젝트 요구사항:
1. WeChat 애플릿에 빠른 문의 페이지가 표시됩니다.
2. 주문 프로세스를 보려면 빠른 주문 번호를 입력하세요.

빠른 배송 조회 WeChat 애플릿 개발 코드 구현:

1. 아래와 같이 빠른 배송 조회 애플릿 프로젝트를 생성합니다.
빠른 문의 - 위챗 미니 프로그램 개발 예시 튜토리얼

2. app.json 페이지에서 탐색 모음 제목을 다음과 같이 수정합니다. Express Query를 읽고 index로 이동합니다. . wxml 페이지는 아래와 같이 모든 개인 정보를 삭제하고 외부 보기 구성 요소만 유지합니다.
빠른 문의 - 위챗 미니 프로그램 개발 예시 튜토리얼

색인. wxml 코드는 다음과 같습니다.

3 .홈페이지에 입력란을 추가하세요. 입력 상자를 추가하는 방법은 무엇입니까? WeChat의 공식 API로 이동하여 미니 프로그램 개발 문서---구성 요소--양식 구성 요소---입력 상자(입력)를 찾을 수 있습니다. 아래와 같이
빠른 문의 - 위챗 미니 프로그램 개발 예시 튜토리얼

아이콘 코드를 페이지에 복사하세요. 코드는 다음과 같습니다.

실행해 보면 아래 그림과 같이 홈페이지에 이미 특정 입력 상자가 있는 것을 확인할 수 있습니다.
빠른 문의 - 위챗 미니 프로그램 개발 예시 튜토리얼

이 입력 상자의 색상이 보이지 않는 것을 확인하고 스타일을 추가합니다. index.wxss의 스타일 코드는 다음과 같습니다:
input { border: 1px solid red; width: 90%; 여백: 5%; 패딩: 5px;}
빠른 문의 - 위챗 미니 프로그램 개발 예시 튜토리얼

[참고]:입력 스타일을 정의할 때 , 학생들은 입력 앞에 마침표를 추가할 수 있습니다. 그러면 스타일이 전혀 호출되지 않습니다. .이 클래스 스타일을 정의하는 데 사용되므로 입력을 추가할 필요가 없기 때문입니다!
다음으로 홈 페이지에 쿼리 버튼을 추가해야 합니다. 쿼리 버튼을 추가하는 방법은 무엇입니까? 미니 프로그램 개발 문서---컴포넌트--폼 컴포넌트---버튼(버튼), 공식 예제 참조, wxml 페이지에 코드 추가

디버깅 저장 후 페이지는 다음과 같습니다.
2017 -02-20_182632.jpg