(九)物流查询的实现(参考学习下其列表显示)

转载http://baijiahao.baidu.com/s?id=1605114822981027176&wfr=spider&for=pc
http://baijiahao.baidu.com/s?id=1605204809130185991&wfr=spider&for=pc

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

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）

物流接口

①接口的信息

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

接口需要传的参数：

②接口的用法

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

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

header：头信息，设置头信息时要注意。

6. 小程序API

在小程序交互层进行调用接口时，需要使用小程序的API。

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

Object参数说明：

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

2）编译预览

3）合法域名校验出错

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

小程序的程序是放在微信的服务器的，所有不是所有外部接口都允许请求，需要在小程序后台配置安全服务器。

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

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

配置安全服务器时，服务器需要支持https服务，都是https服务的域名。

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

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

4）查询结果

输入订单号后，点击“查询”按钮。

属性data的完整信息：

5）设置物流信息

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

①为data添加物流信息参数

②将返回的数据设置到dataList中

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

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

编译预览：

6）界面层展示物流信息

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

注意：1. wx:key的值要唯一，没有主键的时候，可以使用索引index。
②编译预览

7. 全局js

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

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

在onPullDownRefresh中重新获取数据，只需将query事件中的程序复制粘贴到用户下拉动作事件中即可。

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

1）封装

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

注意：1. 封装时，需要传参。$this代表交互层的this。
2）模块导出

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

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

3）引入公共js文件

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

4）调用

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

express.js文件中的query事件：

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

编译预览：

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