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


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 相关文章推荐
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
element中的$confirm的使用
Apr 26 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调用数据库的存贮过程
2006/10/09 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
Python 专题三 字符串的基础知识
2017/03/19 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
应届生人事助理求职信
2013/11/09 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
如何写求职信
2014/05/24 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技