微信小程序快递查询功能：

产品要求，

准备 API，

代码编写。

第一步：产品需求，我们需要实现一个如下图的功能，在文本框中输入快递单号，点击查询，下面会出来我们需要的快递信息

第 2 步：准备

我们先找一个 api接口，通过它我们可以看到很多apivx小程序开发，我们会找到一个查询

我们可以看到有接口地址，还有一些参数。准备好之后，我们就要开始编码了……

第 3 步：编码工作

我们新建一个文件，然后默认文件就准备好了

我们现在在 app.js 中将标题导航更改为绿色背景色

在.json中设置导航的名称：“快速查询”

在.wxml中，删除默认代码并放上我们的一个文本输入框和一个查询按钮

查询

接下来我们需要给文本框和按钮添加样式：在.wxss中设置

/**index.wxss**/ input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;} button{margin-top:20px;}

到目前为止，我们的布局已准备就绪，如下所示：

接下来，我们需要调用我们提前准备好的API快速查询接口。我们首先需要在app.js中设置网络请求的方法中设置两个参数，一个参数，一个方法。

使用 wx.文档提供的发起网络请求的url：地址路径，有几个参数muti=0返回多行完整数据，=desc按时间从新到旧排列，com 的名称（快递公司名称）， nu , : 请求参数的值是我们自己的百度账号（可以登录自己的百度账号在个人中心查看）

//设置一个发起网络请求的方法 getExpressInfo:function(nu,cb){ wx.request({ url: 'http://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&com=zhongtong&nu='+nu, data: { x: '' , y: '' }, header: { 'apikey': '247d486b40d7c8da473a9a794f900508' }, success: function(res) { //console.log(res.data) cb(res.data); } }) }, globalData:{ userInfo:null }

有了这样的请求方法，我们需要给我们的查询按钮添加一个点击事件：=“”，在.js中添加一个查询事件，通过app调用写好的请求方法，这里我们需要先获取在文本框中输入的快递单号，

给文本框绑定一个事件，

获取输入的快递单号。在数据中定义两个变量：对象、输入框的值、要显示的快递信息。

//index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, einputinfo:null,//输入框值 expressInfo:null //快递信息 }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../todos/todos' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) }, //快递输入框事件 input:function(e){ this.setData({einputinfo:e.detail.value}); }, //查询事件 btnClick:function(){

var thisexpress=this; app.getExpressInfo(this.data.einputinfo,function(data){ console.log(data); thisexpress.setData({expressInfo:data}) }) } })

最后，我们需要在.wxml中显示查询到的快递信息，并使用vx:for循环遍历数组。

查询

• {{item.context}}
• {{item.time}}

设置上一步显示的快递信息的样式：

/**index.wxss**/ input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;} button{margin-top:20px;} .expressinfo{font-size:12px; line-height: 18px;padding:10px; text-align:left;} .expressinfo li{display:block}

至此我们的整个查询就完成了……

感谢您的阅读，希望对您有所帮助，感谢您对本站的支持！