快递查询（2020-1-7亲测）

项目准备

创建项目demo4-expressQuery（因为练习取过这个名所以案例里面是demo-expressQuery ）
操作步骤同demo3
不过second目录可以改为expressQuery目录（也可以将index目录里的子文件的内容删了，在index里面写页面和脚本）
找一个网站有查快递API接口的，我只找到这个收费的，当然不想买的可以私聊我，在一个月内，因为我自己也不想续费。
我这边选择创建expressQuery目录再将index和logs给删了反正用不到。
app.json
如果对里面一些知识点不懂可以查看之前的文档
微信小程序篇】三. 微信小程序的事件
微信小程序篇】二. 微信小程序的视图与渲染
微信小程序篇】一. 入门 hello wxapp

1. 定义页面和样式

1.1 expressQuery.wxml

<!-- 根据单号查询快递 -->
<!-- container 居中 -->
<view class="container"><!-- placeholder input提示值 --><input placeholder="请输入订单号 "/><!-- 查询按钮 --><button type="primary" value="">查询</button>
</view>

1.2 expressQuery.wxss

input{border: 1px solid red;width: 80%;margin: 5%;padding: 5%;
}

1.3 expressQuery.js

我去掉了一些事件，暂时用不到，最后获取应用实例。

//获取应用实例 及app.js
const app = getApp();Page({data: {}
})

1.4 app.js

去掉了原来的index和log的事件，也用不到。

//app.js
App({})

2. 页面绑定事件及js注册事件

2.2 expressQuery.wxml

<view class="container"><!-- bindinput 绑定输入事件 --><input placeholder="请输入订单号" bindinput="inputE"/><!-- bindtap 点击事件 --><button type="primary" bindtap="queryE">查询</button>
</view>

2.2 expressQuery.js

data中定义从input传入的值 trackNo 和查询返回的信息 expressMessage

//获取应用实例 及app.js
const app = getApp();
Page({data: {trackNo:null, // 快递单号expressMessage:null // 查询快递返回的信息},// input绑定的事件 inputEinputE:function(e){},// button绑定的事件 queryEqueryE:function(){}})

2.3 app.js定义方法去调用接口查询数据并返回数据

//app.js
App({// trackNo input传入的订单号,fun 回调函数getExpressMessage:function(trackNo,fun){wx.request({url: '', data: {},header: {'content-type': 'application/json' // 默认值},success(res) {console.log(res.data)}})}
})

2.3.1 参数输入

提供接口的网站都有提供的文档查看文档就会发现我们要的数据。

既然查看了文档那么请求里面的值就好填了。

//app.js
App({// trackNo input传入的订单号,fun 回调函数getExpressMessage:function(trackNo,fun){wx.request({url: 'http://route.showapi.com/880-1', data: {TrackNo: trackNo,   //所需参数订单号showapi_appid: " ",  // 所需参数appid    // 看看项目准备showapi_sign: " ", //所需参数密钥showapi_timestamp: new Date().getTime() // 所需参数请求时间},header: {'content-type': 'application/json' // 返回json格式},success(res) {// 回调函数 控制台输出数据console.log(res.data)}})}
})

3.事件数据传递（先图片后代码）

现在该有的页面已经有了，该有注册的事件也已经注册了，调用api接口的方法也写好了，是时候将功能串起来了。

首先将input绑定事件传入的值赋值给trackNo
再用button绑定的事件调用api接口的方法,传入trackNo

关掉校验

调用api接口的方法通过button传入的值进行请求url，传data里面的参数，并通过回调函数往回传,传到button事件的回调函数
button绑定的事件通过回调函数将值取出来赋值给expressMessage
expressQuery.wxml获取{{expressMessage}},并循环输出出来。

给class=‘viewMess’加点样式

4. 上代码

4.1 expressQuery.wxml

<!-- 根据单号查询快递 -->
<!-- YT4320769108383 -->
<!-- container 居中 -->
<view class="container"><!-- placeholder input提示值 --><!-- bindinput 绑定输入事件 --><input placeholder="请输入订单号" bindinput="inputE"/><!-- 查询按钮 -->     <!-- bindtap 点击事件 --><button type="primary" bindtap="queryE">查询</button><!-- 带下划线view --><scroll-view scroll-y="true" style="height: 500rpx;" ><!-- 遍历 --><view wx:for="{{expressMessage}}"><view class="viewMess">【{{item.AcceptTime}}】{{item.AcceptStation}}</view></view></scroll-view></view>

4.2 expressQuery.wxss

input{border: 1px solid red;width: 80%;margin: 5%;padding: 5%;
}.viewMess{font-size: 12px;
}

4.3 expressQuery.js

//获取应用实例 及app.js
const app = getApp();Page({data: {trackNo:null, // 快递单号expressMessage:null // 查询快递的信息},// input绑定的事件 inputEinputE:function(e){// console.log(e);this.setData({ trackNo: e.detail.value }); //将input绑定事件传入的值赋值给trackNo},// button绑定的事件 queryEqueryE:function(){var thisPage = this;//   用button绑定的事件调用api接口的方法,传入trackNo//   this.data.trackNo 从上面data{}中取值，function(){} 回调函数app.getExpressMessage(this.data.trackNo, function (data) {// 将从回调过来的参数赋值给expressMessagethisPage.setData({ expressMessage: data });})}
})

4.4 app.js

//app.js
App({// trackNo input传入的订单号,fun 回调函数getExpressMessage:function(trackNo,fun){wx.request({url: 'http://route.showapi.com/880-1', data: {TrackNo: trackNo,    //所需参数订单号showapi_appid: " ",  // 所需参数appidshowapi_sign: " ",    //所需参数密钥showapi_timestamp: new Date().getTime() // 所需参数请求时间},header: {'content-type': 'application/json' // 返回json格式},success(res) {// 回调函数 控制台输出数据console.log(res.data)// 通过fun将数据回调给调用者（queryE的回调函数里面的data）fun(res.data.showapi_res_body.data.Trace);}})}
})

5. 完，谢谢观看！

注意:因为微信小程序更新的很快，所以隔一段时间可能一些数据获取方式就变了。

最后需要id和密钥看项目准备。。。。。

微信小程序篇】四. 案例：根据单号查询快递编号相关推荐

uniapp开发微信小程序-7.用户填写表单信息
uniapp开发微信小程序-7.用户填写表单信息本章让用户通过表单更新自己的个人信息,也是本系列文章最后一篇入门分享,之后碰到新颖.常用的功能会继续分享给大家,如果大家有任何问题欢迎留言,我会尽快线 ...
在微信小程序中提交form表单
怎么在微信小程序中提交form表单发布时间:2021-04-07 16:26:31 来源:亿速云阅读:1229 作者:Leah 栏目:web开发活动:亿速云新用户活动,各类服务器大降价,满足绝大 ...
微信小程序AR应用案例盘点（时尚行业）
在上一篇微信小程序AR行业应用分析中,我对快消行业的微信小程序AR经典案例与解决的痛点问题,结合目前新扩展的微信小程序AR能力进行了盘点. 今天我们则集中在另一个把视觉呈现做到极致的行业--时尚行业, ...
微信小程序调查问卷案例
微信小程序调查问卷案例通过开发一个"调查问卷"的案例来掌握常用表单组件的使用,以及如何收集用户填写的表单信息提交给服务器和从服务器获取数据后显示在表单中.参考界面如图1所示. 步 ...
第 7 节：前端面试指南 — 微信小程序篇（附面试题答案）
这周很多读者朋友都在「微信小程序」的视频了. 前 6 期没看的同学,建议先看完再来看这一期的,传送门: 第 1 期:「简历篇」含简历模板文件第 2 期:「HTML篇」含面试题&答案第 3 ...
从0开发《工程测绘大师》小程序之什么是微信小程序篇（一）
我们今天来讲讲如何从0开发<工程测绘大师>小程序之什么是微信小程序篇.先来说说什么是微信小程序,什么是微信小程序?为什么会有微信小程序诞生?它到底解决了什么痛点?与传统的网页开发和APP相 ...
微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
微信小程序-001-抽签功能-008-简单登录
微信小程序-001-抽签功能-008-简单登录目录一.wxml 二.js pages.login.login 一.wxml <button open-type="getUserIn ...
多平台多渠道账号体系绑定第一篇-微信小程序篇
先奉上本篇实现效果多平台多渠道账号体系绑定第一篇-微信小程序篇近来,在对接三方平台时,欲将多方开放平台统一整合入笔者的框架内. 如下为大致思路设计图由于需对接多方平台关联账号体系,思来之后,将设 ...

微信小程序篇】四. 案例：根据单号查询快递编号

快递查询（2020-1-7亲测）

项目准备

1. 定义页面和样式

1.1 expressQuery.wxml

1.2 expressQuery.wxss

1.3 expressQuery.js

1.4 app.js

2. 页面绑定事件及js注册事件

2.2 expressQuery.wxml

2.2 expressQuery.js

2.3 app.js定义方法去调用接口查询数据并返回数据

2.3.1 参数输入

3.事件数据传递（先图片后代码）

现在该有的页面已经有了，该有注册的事件也已经注册了，调用api接口的方法也写好了，是时候将功能串起来了。

关掉校验

4. 上代码

4.1 expressQuery.wxml

4.2 expressQuery.wxss

4.3 expressQuery.js

4.4 app.js

5. 完，谢谢观看！

注意:因为微信小程序更新的很快，所以隔一段时间可能一些数据获取方式就变了。

最后需要id和密钥看项目准备。。。。。

微信小程序篇】四. 案例：根据单号查询快递编号相关推荐

最新文章

热门文章