首页 > 技术连载 > 正文

「小程序开发连载十六」小程序全国物流查询

来源:卓象IT实训基地【原创】 时间:2018-11-08

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


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

1. 购买接口

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

「小程序开发连载十六」小程序全国物流查询


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

「小程序开发连载十六」小程序全国物流查询



2. 构建物流查询界面

1)创建页面

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

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

「小程序开发连载十六」小程序全国物流查询


2)构建页面结构

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

「小程序开发连载十六」小程序全国物流查询


编译预览:

「小程序开发连载十六」小程序全国物流查询



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

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

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

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

「小程序开发连载十六」小程序全国物流查询


②在交互层中设置数据

「小程序开发连载十六」小程序全国物流查询


③编译预览

「小程序开发连载十六」小程序全国物流查询


注意:

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


4. 发起请求

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

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

「小程序开发连载十六」小程序全国物流查询


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

「小程序开发连载十六」小程序全国物流查询



5. 物流接口

①接口的信息

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

「小程序开发连载十六」小程序全国物流查询


接口需要传的参数:

「小程序开发连载十六」小程序全国物流查询


②接口的用法

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

「小程序开发连载十六」小程序全国物流查询


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

「小程序开发连载十六」小程序全国物流查询


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

「小程序开发连载十六」小程序全国物流查询


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

「小程序开发连载十六」小程序全国物流查询


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

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

「小程序开发连载十六」小程序全国物流查询

上一篇: 「小程序入门连载十五」小程序列表渲染
下一篇: 「小程序开发连载十七」小程序API实现物流查询