微信小程序入门--快递查询小程序的制作

最近在自学微信小程序开发，做了一个很垃圾的快递查询小demo，记录一下(=^ ^=)

开发前准备:微信开发者工具、快递查询的接口

我用的快递查询接口是聚合数据的，地址如下https://www.juhe.cn/

注册之后再申请接口，在个人中心找到key（后面会用到），如下图：

 点击接口进去会有接口地址和请求参数，如下图： 

 

 接下来就准备开发，要将项目设置中的不合法域名勾选，不然运行会报错

 接下来上代码：

简单的页面由picker选择器、文本框和按钮组成

wxml文件：

<!--index.wxml-->
<view class="container">
    <picker mode="selector" range='{{express}}' value='{{index}}' bindchange='choose' >
        <text>请选择快递公司：          {{express[index]}}</text>
    </picker>
   <input placeholder="请输入运单号" bindinput='input'/>
   <button type="primary" bindtap="btnClick" size='mini'>查询</button>
   <view wx:for="{{expressInfo.result.list}}">
      {{item.remark}} - 【{{item.datetime}}】
      <view class="divLine"></view>
   </view>
</view>

wxss文件： 

 

input{
  border: 1px rgba(0, 0, 0, 0.404) solid;
  width: 80%;
  margin-top: 20px;
  padding:5px;
}
button{
  width: 40%;
  margin-top:20px;
}
.divLine{
 background: rgb(112, 112, 111);
 width: 100%;
 height: 5rpx;
}

页面js文件：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    inputdata:null,    //快递单号
    express_type:null,  //快递种类
    expressInfo:null,   //物流信息
    index: 0, //默认下标
    express: ['顺丰快递', '申通快递', '圆通快递', '韵达快递', '天天快递', '邮政快递', '中通快递'], //选择器中的选项 
    com_array: ['sf', 'sto', 'yt', 'yd', 'tt', 'ems', 'zto'],  
    com:'sf' //默认为顺丰
  },
  input:function(e){
    this.setData({inputdata:e.detail.value})//获取输入框内容
    //console.log(this.data.inputdata)
  },
  choose:function(e){
    this.setData({index:e.detail.value}) //展示快递公司
    this.setData({com:this.data.com_array[this.data.index]})
   // console.log(this.data.com)
  },
  btnClick: function () {
    var thispage=this;
    app.getExpressInfo(this.data.com,this.data.inputdata,function(data)
    {
      //console.log(data)
      thispage.setData({expressInfo:data})
    })
    //app.getcom()
  }
})

 

appp.js文件:

//app.js
App({
  //com为快递公司种类，no为快递编号,cb为一个函数方法
  getExpressInfo: function (com, no, cb) {
    wx.request({
      url: 'http://v.juhe.cn/exp/index?key=&com=XXXXX这里填申请到的key' + com + '&no=' + no, // 接口地址

      data: {
        x: '',
        y: ''
      },
      header: {
        'key': 'XXXXX这里填申请到的key'
      },
      success(res) {
        //console.log(res.data)
        cb(res.data)
      }
    })
  }
  //这个函数用来返回这个接口支持查询的快递，我就选了几个常用的快递公司
  // getcom:function(){
  //   wx.request({
  //     url: 'http://v.juhe.cn/exp/com?key=XXXXX这里填申请到的key',
  //     data: {
  //       x: '',
  //       y: ''
  //     },
  //     header: {
  //       'key': 'XXXXX这里填申请到的key'
  //     },
  //     success(res) {
  //       console.log(res.data)
  //     }
  //   })
  // }
})

最后是结果展示（没错就是这么丑(o~.~o)）：