当前位置:主页 > 小程序开发 > 基础 >

微信小程序快递查询开发实践详细教程

栏目:基础 来源: 微信小程序开发网 阅读: 2017-11-27
  如果天天看微信小程序手册的话感觉都会了,但是,去自己写代码时就觉得自己无从下手,就像我们天天看书一样,如果平常不练习一下等考试了就不知道如何答题,习以致用,本教程将带领大家通过开发一个“快递查询”小程序来学习相关的微信小程序技术。

  以后每个企业都会拥有一个小程序,所以,现在很多的企业都在招聘小程序人员,而且,越来越多这个可以看一下51job等招聘网站,就知道每天都有很多的企业急需要微信小程序开发人员。

  通过这个“快递查询”功能,我们可以了解小程序的开发其实没有那么难,通过这个实例也巩固一下我们学过的知道。

此例子用到的主要知识有:

  1)发起网络请求api: wx.request

  wx.request功能使用非常广泛,也是我们在开发微信小程序时经常用到的一个api,要学习微信小程序开发必须掌握这个api,wx.request在本站有详细的讲解的教程(点击wx.request查看)这里不再重复。

  2)事件绑定 bindtap,bindinput

  3)百度提供的快递查询接口

  可以到http://apistore.baidu.com/ 上面注册,上面提供了很多种快递查询接口。

快递查询的实现原理

  获取用户输入的快递单号,把快递单号发送给从百度申请到的快递查询接口,然后,把查询出来的数据反回给微信小程序显示出来。

  把这个实现的原因拆分出以下几个部分如下:

  1)获取用户输入的快递单号

  2)通过wx.request查询快递接口

  3)处理查询返回的快递信息

获取用户输入快递单号

  要获取用户输入的快递单号,需要先知道用户输入的快递单号保存在什么地方,如果知道了就可以从保存的地方把快递单号取出来就可以了。

  当用户输入快递单号后,实际上就保存到了输入框对应的对象里面了,我们可以测试一下看看快递单号是否保存在这个地方。

  在index.wxml视图层创建如下代码:

 

  这里面重要的是表单输入框代码:
<input placeholder="输入快递单" bindinput='inputcon'/>


  在这个表单组件input里面绑定了一个事件bindinput,这个事件的作用是:当用户在输入框中输入快递单号时,触发input事件。

  为什么在输入框中输入快单号时,就会触发bindinput事件?我们可以推测出这个输入动作一定是与输入框对象有关系,从而推测出用户输入的快递单号可能保存在这个表单组件对象里面,如果我们能在这个对象里面知道了快递单号保存在什么地方了,取出来那还不容易吗。

  既然如此,我们就在表单组件input上面邦定一个事件函数inputcon,然后,在index.js里面定义这个函数,这个函数的作用是把整个对象打印出来,这样我们就知道了快递单号保存在什么地方了。

  这里理解起来不好理解,如果不好理解这样理解就可以了,我们在input表单组件上面绑定函数inputcon的作用是要看看输入的快递单号到底保存在什么地方,至于其它的原理如果现在不明白就先不要管了,以后用的多了就会明白了。

  在index.js文件里面在注册网页函数page里面编写如下代码:

  inputcon:function(e){
 
   console.log(e)
 
}

  这个函数inputcon的作用是:当用户输入快递单号时,就会把输入框对应的对象打印出来,而这个对象里面就包含了快递单号。

  我在输入框中输入一个数字1后,就会把包括这个1的一个对象打印出来,如下图所示:



  从上图可以知道,打印出来的对象e里面有一个detail对象,在这个detail对象里面有一个value键,这个键对应的值就是用户在输入框中输入的快递单号。

  也就是说用户在输入框中输入的快递单号是被保存在e.detail.value里面的。

  后面我们就可以通过获取e.detail.value的值(即快递单号)来把快递单号取出来再传递给快递查询接口来查询即可。

查询快递信息

  有了快递单号就可以通过wx.request把快递信息查询出来。

  我们在app.js里面封装一个函数getExpressInfo:
 getExpressInfo:function(nu,cb){
   wx.request({
      url: 'http://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&nu='+nu,
      data: {
        x: '' ,
        y: ''
      },
      header: {
          'apikey': '2e24c33be1e7f7dafebc496c07441138'
      },
      success: function(res) {
       // console.log(res.data)
       cb(res.data)
      }
    })

 }

  这个函数getExpressInfo的作用是当用户输入快递单号后,我们点击邦定了这个函数getExpressInfo的查询按扭后,通过这个函数把快递单号传递给百度提供的快递查询接口,然后,进行查询,把查询出来信息进行处理。
 
  在这个函数里面的url是百度提供的url,也就是快递查询接口,在这个接口后面的参数前两个muti和order都是这个接口提供的,不同的接口这两上参数名称可能不一样。

  第三个参数nu就是我们上面获取到的e.detail.value值,也就是快递订单号。

  如果请求成功,则通过success里面的函数进行处理。

完整理的代码如下:

  index.wxml代码:


<view class="container">

  <input placeholder="请输入运单号" />
  <button type="primary"  bindtap="btnClick"> 查询 </button>


  <scroll-view scroll-y="true" style="height: 200px;" >
      <view wx:for="{{expressInfo.data}}">
          {{item.context}} 【 {{item.time}}】
      </view>
   </scroll-view>

</view>

  index.js代码:

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    expressNu:null,
    expressInfo:null
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  btnClick : function(){
   
    var thispage = this;
    app.getExpressInfo(this.data.expressNu,function(data){

        thispage.setData({expressInfo:data})
    });
  },
  input : function(e){
    this.setData({expressNu:e.detail.value})
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})


  代码解释:

  上面在微信小程序文件index.wxml里面的按扭上面邦定了一个函数btnClick,就是用户输入快递单号后,点击查询按扭执行的动作函数。

  这个函数在index.js里面定义为:

  把快递单号e.detail.value传递给函数getExpressInfo,这个函数getExpressInfo是我们在app.js里面封装的,然后 ,在index.js里面的定义了一个data键expressInfo,这个相当于php里面的一个变量,这个变量的作用是用来保存查询出来的数据的,默认是null。

  然后,通过setData把查询出来的数据发送给expressInfo。

  在视图层index.wxml就可以通过一个遍历wx:for来把查询出来的数据遍历出来,显示在微信小程序上面了。