[经验]

微信小程序商城物流快递单号免费查询api接口对接全攻略

2019-7-23 19:04:59

4098

小程序现在非常火爆，仅微信小程序已经拥有1.7亿日活用户，上线58万个小程序，吸引了超过100万个开发者，2300个第三方开发平台加入，有hishop小程序、有赞小程序、晓商+小程序、微盟小程序、微尘小程序、青芒小程序、胜赞小程序、点点客小程序、品玩小程序、有店小程序......近两年，小程序电商快速崛起，小程序电商之所以被看好，根本原因在于微信以及支付宝的社交优势。微信拥有超过10亿人次的日活跃用户，对于互联网商业来说，这是一个巨大的增量。相比PC和APP时代，小程序大幅降低了做生意的门槛，诸多数据也一再印证了小程序在电商领域的巨大潜力。
微信小程序快递查询接口

申请快递鸟接口后，小程序开发者无需对接不同快递公司的接口，只需调通快递鸟物流接口，即可连接多家快递公司进行发货查单跟踪。同时，小程序开发者和用户都可以通过快递鸟API物流接口获取订单的实时物流状态，便于用户查看和开发者跟踪顾客服务，用户点击物流信息后可回访小程序查看该订单，大大提升用户回访率。

1. 免费获得快递鸟用户ID和APIKey，免费订购会员套餐，用户ID和APIKey对应各demo中的EBusinessID、AppKey。

1）创建页面

app.json文件，为了方便，直接放在第一页即可：

在express.wxml文件中构建物流查询的界面格式：

编译预览：

在界面层中输入快递物流单号，需要将物流单号暂存到交互层（express.js）中。

① 为文本框添加事件（express.wxml）

② 在交互层中设置数据

③ 编译预览

1. 在交互层定义的数据，可以在控制台的AppData下看到。

在界面层点击“查询”按钮后，需要调用接口，根据物流订单号查询物流。

① 为按钮添加事件（express.wxml）

② 在交互层定义事件（express.js）

① 接口的信息

接口需要传的参数：

申请的接口给出了使用接口的示例，但是没有小程序的，我们看一下PHP的，具体完整的demo在快递鸟网站可以下载查看。

6. 小程序API

小程序常用的API就是wx.request(object)（发起网络请求），类似于ajax。

Object参数说明：

1）在小程序交互层中调用接口（express.js）

2）编译预览

① 在点击“查询”按钮时，会出现“合法域名校验出错”问题。

配置安全服务器位置：设置=》开发设置=》服务器域名

点击“开始配置”进行配置安全服务器：

② 开发时，可以设置不校验服务器

将“不校验安全域名、web-view域名、TLS版本以及HTTPS证书”选上。

属性data的完整信息：

查询返回的数据，需要的就是res.data.result.list下的物流信息数据，要将数据展示到界面层，那么就要将数据赋值给交互层的页面初始化数据data下的参数。

① 为data添加物流信息参数

但要注意，由于function层数过多，此时this已经不再指代Page函数了。

在query事件中，将this保存到一个新参数中，再使用。

6）界面层展示物流信息

① 获取物流信息后，在界面层展示物流信息。（express.wxml）

② 编译预览

在查询物流信息时，会有下拉页面刷新的情况，因此当页面下拉刷新时，需要重新获取物流信息。

下拉刷新时重新获取数据：

但是此时同样的程序写了两遍，这种重复性代码需要进行封装。

在小程序中utils/util.js文件为公共js文件。将获取物流信息的程序封装起来。

2）模块导出

在util.js文件中定义好函数后，需要将函数导出才能使用。在util.js文件中已经写好了模块导出的方式。

只需要将定义好的函数，按照格式导出即可。

3）引入公共js文件，如果想在页面的js文件中使用util.js文件中的函数，需要在页面的js中间中使用require方法引入util.js文件。

在页面js文件中引入util.js文件后，可以调用其文件中的函数。

express.js文件中的query事件：

在下拉刷新事件onPullDownRefresh中调用函数。

编译预览：

注意：1. 在公共js文件中封装函数并使用的流程：① 在util.js中封装函数② 导出封装的函数③ 使用的页面js文件中引入util.js文件④ 调用