|
導讀微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一... 微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一項門檻非常高的創新，經過將近兩年的發展，已經構造了新的小程序開發環境和開發者生態。 摘要: 一直跟著我們手把手系列教程的朋友，對小程序的基礎內容應該有一定的了解了。今天我們來實在學習一個綜合案例：快遞查詢。項目要求：
1.微信小程序顯示一個快遞查詢的頁面
2.輸入快遞訂單編號可以查看訂單的流程。
... 一直跟著我們手把手系列教程的朋友，對小程序的基礎內容應該有一定的了解了。今天我們來實在學習一個綜合案例：快遞查詢。項目要求：
1.微信小程序顯示一個快遞查詢的頁面
2.輸入快遞訂單編號可以查看訂單的流程。
快遞查詢微信小程序開發代碼實現：
1，創建一個快遞查詢的小程序項目，如下所示：
2，在app.json頁面里面修改導航欄標題顯示為：快遞查詢，并到index.wxml頁面將個人信息全部刪除，僅保留外部view組件，如下圖所示：
index.wxml的代碼如下：
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中文網其它相關文章！
小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。
| 
