微信小程序-查询快递

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;
}

最后效果：