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


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 相关文章推荐
超级退弹代码
Jul 07 Javascript
jquery 最简单易用的表单验证插件
Feb 27 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
微信小程序网络封装(简单高效)
Aug 06 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 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在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
Views rows style模板重写代码
2011/05/16 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
vue-cli3.0 特性解读
2018/04/22 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
python os模块简单应用示例
2019/05/23 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
pytorch数据预处理错误的解决
2020/02/20 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
python利用线程实现多任务
2020/09/18 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
实习评语大全
2014/04/26 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
个人原因辞职信模板
2015/05/13 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python