微信小程式開發：快遞查詢

一直跟著我們手把手系列教學的朋友，對小程式的基礎內容應該有一定的了解了。今天我們來實在學習一個綜合案例：快遞查詢。項目需求：
1.微信小程式顯示一個快遞查詢的頁面
2.輸入快遞訂單編號可以查看訂單的流程。

程式碼實作：

1，建立一個快遞查詢的小程式項目，如下所示：

##2，在app. json頁裡面修改導覽列標題顯示為：快遞查詢，並到index.wxml頁面將個人資訊全部刪除，僅保留外部view元件，如下圖所示：

index.wxml的程式碼如下：

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

3.在首頁新增一個輸入框。怎麼加入一個輸入框呢？可以到微信的api官方，找到小程式開發文檔---元件--表單元件---輸入框(input)。如下圖所示：

拷貝圖示的程式碼到我們的頁面當中去，程式碼如下所示：

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

運行後我們會發現首頁已經有一定輸入框，如下圖。

我們會發現這個輸入框的顏色看不見，我們為這個輸入框加上一個樣式。 index.wxss的樣式代碼如下：

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

【注意】：我們再定義input的樣式時，有的同學可能會在input前面加個點號. 然後會發現樣式根本沒有呼叫。那是因為.是用來定義類別樣式，input不用加！

接下來我們要在首頁新增一個查詢按鈕。怎麼樣新增查詢按鈕呢？小程式開發文件---元件--表單元件---按鈕(button），參考官方範例，我們在wxml頁面新增程式碼

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

儲存偵錯後頁面的如下：

接下來，我們就要寫一個方法，透過這個程式碼，我們輸入一個運單單號後，點擊查詢我們就可以查看的運單的詳細資訊。

透過微信官方的API發起網路請求

更多微信小程式開發：快遞查詢相關文章請關注PHP中文網！