首頁 > 微信小程式 > 小程式開發 > 快遞查詢-微信小程式開發實例教程

快遞查詢-微信小程式開發實例教程

PHPz
發布: 2017-04-23 13:23:18
原創
2504 人瀏覽過

摘要: 一直跟著我們手把手系列教學的朋友,對小程式的基礎內容應該有一定的了解了。今天我們來實在學習一個綜合案例:快遞查詢。

專案需求: 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發起網路請求
#######

以上是快遞查詢-微信小程式開發實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板