微信小程序 开发之快递查询功能的实现


Posted in Javascript onJanuary 09, 2017

微信小程序 快递查询功能:

产品需求,

准备api,

代码编写。 

第一步:产品需求,我们需要实现如下图的一个功能,在文本框输入快递单号,点击查询,下面出来我们需要的快递信息

微信小程序 开发之快递查询功能的实现

第二步:准备

我们先找一个快递的api接口,通过http://apistore.baidu.com/我们可以看到很多的api,我们找一个快递查询的

微信小程序 开发之快递查询功能的实现微信小程序 开发之快递查询功能的实现

 我们可以看到有接口地址,和一些参数。做好这个准备接下来就开始编码工作了………… 

第三步:编码工作

我们新建一个Express的文件,然后默认文件准备齐全

微信小程序 开发之快递查询功能的实现

我们现在app.js中把我们的头部导航改为一个绿色的背景色

微信小程序 开发之快递查询功能的实现

在index.json中设置导航的名称:“快递查询”

微信小程序 开发之快递查询功能的实现

在index.wxml中,把默认的代码删掉,放上我们的一个文本输入框,一个查询按钮

<!--index.wxml-->
<view class="container">
  <input placeholder="请输入快递单号" bindinput="input" />
  <button type="primary" bindtap="btnClick"> 查询 </button> 
</view>

接下来我们需要给文本框和按钮加上一个样式:在index.wxss中设置

/**index.wxss**/
 input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;}
 button{margin-top:20px;}

到现在为止我们的布局就做好了如图:

 微信小程序 开发之快递查询功能的实现

  接下来我们需要去调用我们事先准备好的api快递查询接口了,我们首先需要在app.js中设置一个网络请求的方法getExpressInfo里面设置两个参数一个快递参数,一个返回的方法。

利用文档给我们提供的wx.request发起网络请求url:地址路径,里面有几个参数muti=0返回多行完整的数据,order=desc按时间由新到旧排列,com快递的名称(快递公司的名称),nu快递单号,header:请求的参数apikey的值为我们自己百度账号的apikey(可以登录自己的百度账号,在个人中心中查看)

//设置一个发起网络请求的方法
 getExpressInfo:function(nu,cb){
  wx.request({
   url: 'http://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&com=zhongtong&nu='+nu, 
   data: {
    x: '' ,
    y: ''
   },
   header: {
     'apikey': '247d486b40d7c8da473a9a794f900508'
   },
   success: function(res) {
    //console.log(res.data)
    cb(res.data);
   }
  })
 },
 globalData:{
  userInfo:null
 }

有了这样的请求方法,接下来就需要给我们的查询按钮添加一个点击的事件:bindtap="btnClick",在index.js中添加查询事件,通过app来调用实现写好的请求方法getExpressInfo,在此之前我们需要先获取一下文本框内输入的快递单号,

给文本框绑定一个bindinput事件,

微信小程序 开发之快递查询功能的实现

 获取输入的快递单号。在data:对象中定义两个变量一个输入框的值,一个要显示的快递信息。

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  motto: 'Hello World',
  userInfo: {}, 
  einputinfo:null,//输入框值
  expressInfo:null //快递信息
 },
 //事件处理函数
 bindViewTap: function() {
  wx.navigateTo({
   url: '../todos/todos'
  })
 },
 onLoad: function () {
  console.log('onLoad')
  var that = this
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function(userInfo){
   //更新数据
   that.setData({
    userInfo:userInfo
   })
  })
 },
 //快递输入框事件
 input:function(e){
   this.setData({einputinfo:e.detail.value});
 },
 //查询事件
 btnClick:function(){ 
  var thisexpress=this; 
  app.getExpressInfo(this.data.einputinfo,function(data){
    console.log(data);
    thisexpress.setData({expressInfo:data})
  })
 }
})

最后我们需要在index.wxml中把查询出来的快递信息显示出来了,利用vx:for来循环数组。

<!--index.wxml-->
<view class="container">
  <input placeholder="请输入快递单号" bindinput="input" />
  <button type="primary" bindtap="btnClick"> 查询 </button> 
</view>
<view class="expressinfo" wx:for="{{expressInfo.data}}">
  <ul>
   <li>{{item.context}}</li>
   <li>{{item.time}}</li> 
  </ul> 
</view>

 最后一步设置下显示出来的快递信息的样式:

/**index.wxss**/
 input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;}
 button{margin-top:20px;}
 .expressinfo{font-size:12px; line-height: 18px;padding:10px; text-align:left;} 
 .expressinfo li{display:block}

   到这里我们的整个查询就完成了……

微信小程序 开发之快递查询功能的实现

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
理解javascript中的闭包
Jan 11 Javascript
React组件的三种写法总结
Jan 12 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 #Javascript
jQuery编写设置和获取颜色的插件
Jan 09 #Javascript
图片懒加载插件实例分享(含解析)
Jan 09 #Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 #Javascript
简单实现jQuery多选框功能
Jan 09 #Javascript
微信小程序开发之Tabbar实例详解
Jan 09 #Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 #Javascript
You might like
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
js异或加解密效果代码
2008/06/25 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
python中wheel的用法整理
2020/06/15 Python
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
会计专业自我鉴定范文
2013/12/29 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
在校证明模板
2015/06/17 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
青岛市的收音机研制与生产
2022/04/07 无线电