技术|小程序入门连载(十七)-小程序API实现物流查询

原创 小伙子  2018-12-20 22:06:25  阅读 50 次 评论 0 条

上一篇文章讲解“小程序全国物流查询”,但由于篇幅原因,没有完全实现,本篇文章配合小程序API实现全国物流查询。请与上一篇文章配合学习。


6. 小程序API

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

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

Object参数说明:

技术|小程序入门连载(十七)-小程序API实现物流查询


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

技术|小程序入门连载(十七)-小程序API实现物流查询


2)编译预览

技术|小程序入门连载(十七)-小程序API实现物流查询


3)合法域名校验出错

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


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

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

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

技术|小程序入门连载(十七)-小程序API实现物流查询


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

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

技术|小程序入门连载(十七)-小程序API实现物流查询


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

技术|小程序入门连载(十七)-小程序API实现物流查询


4)查询结果

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

技术|小程序入门连载(十七)-小程序API实现物流查询


属性data的完整信息:

技术|小程序入门连载(十七)-小程序API实现物流查询


5)设置物流信息

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

①为data添加物流信息参数

技术|小程序入门连载(十七)-小程序API实现物流查询


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

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

技术|小程序入门连载(十七)-小程序API实现物流查询


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

技术|小程序入门连载(十七)-小程序API实现物流查询


编译预览:

技术|小程序入门连载(十七)-小程序API实现物流查询


6)界面层展示物流信息

①获取物流信息后,在界面层展示物流信息。(express.wxml)

技术|小程序入门连载(十七)-小程序API实现物流查询


注意:

1. wx:key的值要唯一,没有主键的时候,可以使用索引index。

②编译预览

技术|小程序入门连载(十七)-小程序API实现物流查询



7. 全局js

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

技术|小程序入门连载(十七)-小程序API实现物流查询


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

技术|小程序入门连载(十七)-小程序API实现物流查询


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

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

1)封装

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

技术|小程序入门连载(十七)-小程序API实现物流查询


注意:

1. 封装时,需要传参。$this代表交互层的this。

2)模块导出

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

技术|小程序入门连载(十七)-小程序API实现物流查询


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

技术|小程序入门连载(十七)-小程序API实现物流查询


3)引入公共js文件

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

技术|小程序入门连载(十七)-小程序API实现物流查询


4)调用

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

express.js文件中的query事件:

技术|小程序入门连载(十七)-小程序API实现物流查询


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

技术|小程序入门连载(十七)-小程序API实现物流查询


编译预览:

技术|小程序入门连载(十七)-小程序API实现物流查询


注意:

1. 在公共js文件中封装函数并使用的流程:

①在util.js中封装函数

②导出封装的函数

③使用的页面js文件中引入util.js文件

④调用


本文地址:http://linuxphp.cn/72.html
版权声明:本文为原创文章,版权归 小伙子 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?