小程序实现快递号查询

微信小程序实现快递查询

一手货，记得关注我哟          --- Jery

只附上关键代码，不懂得可以私聊我，帮你解答

.Js

Page({
  data: {
    no:null,
    array:[],
    index:0
  },
  //事件处理函数
  btn:function(){
    var cb =this.data.no
    var that = this;
    wx.request({
    //这个接口是聚合数据提供的，登陆注册一个号就可以了，一天免费100次查询
      url: 'http://v.juhe.cn/exp/index?com=yd&dtype=json&key=81f4f01085b40d3c7ea43f7b4c335702&no='+cb,
      data:{

      },
      header:{
        "Content-Type":"application/json"
      },
      success:function(res){
         console.log(res.data.result.list)
        var d = res.data.result.list;
        //  for(var i =0;i<d.length;i++){
        //  }
        that.setData({
          array:d
        })
      }
    })
  },
  input:function(e){
    console.log(e.detail.value)
    var that =this;
    that.setData({
      no : e.detail.value
    })
  },
})

.WXML

<view class='input'> 
<input type="text" placeholder="请输入运单号" bindinput='input'></input>
</view>

<view class='btn'>
<button type="primary" bindtap='btn'>查询</button>
</view>

<scroll-view scroll-y  style='height:200px;padding:2px;'>
<view wx:for="{{array}}">{{array[index].remark}}【{{array[index].datetime}}】</view>
</scroll-view>

.WXSS  样式太丑凑合看，只实现功能，不做太多精力美化

.input{
  border: 1px solid red;
  padding: 5px;
  width: 90%;
  margin: 5%;
}
.btn{
  width: 50%;
  margin: 0 auto;
}

运行效果

如果觉得有用 记得关注我，不定时发一些有趣的原创小程序Demo