小程序入门之快递查询

功能如下：输入单号显示快递信息

第一步:新建index目录把界面搭下

目录代码如下：

注意在app.json中要把index页面配置上

"pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]

wxml代码如下：

<!--index.wxml-->
<view class="container">
<input placeholder="请输入运单号" bindinput='input' />
<button type="primary" bindtap="btnClick">查询</button>
<!-- 给button绑定一个btnClick事件  -->
<view class="expressinfo">
<ul>
      <li><!-- 这里用于放快递的详细信息  --></li>
</ul> 
</view>
</view>

wxss样式代码如下：

/**index.wxss**/
input{
  border:1px solid black;
  width:90%;
  margin:5%;
  padding:5px;
}
.expressinfo{font-size:12px; line-height: 18px;padding:10px; text-align:left;}  
.expressinfo li{display:block}

第二步：在app.js中定义一个方法getExpressInfo传入两个参数一个是快递单号一个是成功的回调(这部分示例代码在小程序官网可找到)

 getExpressInfo:function(nu,cb){
    wx.request({
      url: 'http://api.kuaidiwo.cn:88/api/?key=&com=yuantong&cno='+nu,
      data: {
        x: '',
        y: ''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        //console.log(res.data)
        cb(res.data)
      }
    })
  }

url传入的地址就是快递api的接口，nu是后面要传入的单号，cb为成功的回调
url的话先去网上找一个快递的api接口
这里用了快递窝的接口:http://www.kuaidiwo.cn/api/index.php这个接口要先申请才能用		

第三步：在index.js中的data新建expressNu和expressInfo这两个变量

Page({
  data: {
    motto: 'Hello World aniu',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    expressNu:null,//放快递单号
    expressInfo:null//放返回的data数据
  },

第四步：在index.js中写一个方法(点击查询就会触发这个函数。
然后通过app.方法名去app中执行上面我们写的那个函数)最后把返回的data赋给expressInfo

  btnClick:function(){
    var thispage=this;
    //console.log(this.data.expressNu);
    app.getExpressInfo(this.data.expressNu, function (data){
      console.log(data)
      thispage.setData({ expressInfo: data})
    });
  }

第四步:编译运行输入单号点击查询查看控制台输出的data

于是我们修改下wxml代码

<!--index.wxml-->
<view class="container">
 <input placeholder="请输入运单号" bindinput='input' />
<button type="primary" bindtap="btnClick">查询</button>
<view class="expressinfo" wx:for="{{expressInfo.track_data.data}}">
   <ul>
      <li>{{item.place}}</li>
      <li>{{item.datetime}}\n</li> 
    </ul> 
</view>
</view>

重新编译运行输入单号正常显示快递信息

那我们的简单快递查询就完成了