1、新建快速啟動項目
2、在設置里面勾選不校驗合法域名，以防編譯報錯
3、在app.json中改一下窗口表現：app.json—"navigationBarTitleText": "WeChat"改為"navigationBarTitleText": "快遞查詢"
顯示如下：
4、申請api接口，可登錄聚合數據網站上免費申請，其他平台也可
5、在app.js中添加方法 getExpressInfo（發起網絡請求來調用申請的接口），兩個參數 nu ，cb。nu為要查詢的快遞單號，cb為返回查找到的內容到data中的方法。
先在微信公眾平台-API復制示例代碼
修改代碼如下：
data：請求的參數
header：設置請求的header
success： 接口調用成功的回調函數
5、在index.wxml中添加輸入框並綁定input方法，添加查詢按鈕，綁定事件btnClick，使點擊按鈕會調用app.js中的接口，在下方設置可以滾動顯示的組件
<!--index.wxml-->
<view class="container">
<input placeholder="請輸入運單號" bindinput='input' />
<!-- bindinput 獲取輸入的信息 -->
<button type="primary" bindtap="btnClick">查詢</button>
<!-- bindtap 綁定點擊事件 -->
<scroll-view scroll-y style="height:200px;">
<view wx:for="{{expressInfo.result.list}}">
{{item.remark}}||{{item.datetime}}
</view>
</scroll-view>
</view>
6、添加getUserInfo、btnClick和input函數
//index.js
//獲取應用實例
const app = getApp()
// page 注冊一個頁面
Page({
data: {
motto: 'Hello World',
userInfo: {},
expressNu:null
// hasUserInfo: null,
// canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件處理函數
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在沒有 open-type=getUserInfo 版本的兼容處理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
btnClick: function () {
var thispage=this;
app.getExpressInfo(this.data.expressNu,function(data){
console.log(data)
thispage.setData({expressInfo:data})
});
},
input: function(e){
this.setData({ expressNu:e.detail.value })
}
})
7、添加輸入框的樣式
/**index.wxss**/
input{
border:1px solid gray;
width: 90%;
margin: 5%;
padding:5px;
}
最后效果：
