上一篇文章讲解“小程序列表渲染”,本篇文章讲解“小程序全国物流查询”。


利用全国物流查询的小功能了解请求接口的使用。

1. 购买接口

在开始程序之前,首先购买“全国快递物流查询接口”。

微信小程序物流接口(小程序开发连载十六)(1)

够买最低的0.01元/100次即可:

微信小程序物流接口(小程序开发连载十六)(2)


2. 构建物流查询界面

1)创建页面

在小程序中,创建新页面,用来做物流查询。

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

微信小程序物流接口(小程序开发连载十六)(3)

2)构建页面结构

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

微信小程序物流接口(小程序开发连载十六)(4)

编译预览:

微信小程序物流接口(小程序开发连载十六)(5)


3. 物流单号暂存到交互层

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

界面层(wxml)中操作的数据,如果向交互层(js)有反应,都是通过事件来驱动的。 因此为文本框添加事件,将物流单号暂存到交互层。

①为文本框添加事件(express.wxml)

微信小程序物流接口(小程序开发连载十六)(6)

②在交互层中设置数据

微信小程序物流接口(小程序开发连载十六)(7)

③编译预览

微信小程序物流接口(小程序开发连载十六)(8)

注意:

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


4. 发起请求

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

①为按钮添加事件(express.wxml)

微信小程序物流接口(小程序开发连载十六)(9)

②在交互层定义事件(express.js)

微信小程序物流接口(小程序开发连载十六)(10)


5. 物流接口

①接口的信息

调用接口也就是调用物流接口,接口的地址、请求类型、返回类型等信息。

微信小程序物流接口(小程序开发连载十六)(11)

接口需要传的参数:

微信小程序物流接口(小程序开发连载十六)(12)

②接口的用法

购买的接口给出了使用接口的示例,但是没有小程序的,我们看一下PHP的。

微信小程序物流接口(小程序开发连载十六)(13)

AppCode:是验证是否购买接口的标识,在“阿里云控制台=》云市场=》已购买的服务”中找到物流接口的AppCode。

微信小程序物流接口(小程序开发连载十六)(14)

header:头信息,设置头信息时要注意。

微信小程序物流接口(小程序开发连载十六)(15)

全国物流查询功能并未完成,需要配合小程序API,由于文章篇幅过长,因此配合小程序API在下一篇文章讲解。

微信小程序物流接口(小程序开发连载十六)(16)

关注卓象程序员,定期发布技术文章

下一篇文章讲解“小程序API实现物流查询”

微信小程序物流接口(小程序开发连载十六)(17)

微信小程序物流接口(小程序开发连载十六)(18)

,