⼩程序—项⽬实战（简单做⼀个快递查询的功能模块）快递查询⼩功能
功能描述 ：
输⼊快递单号和对应的快递公司 即可查询
进⾏简单的输⼊判断
1. 到⼀个开放的快递查询API
我这⾥使⽤的是聚合数据的api
2. 编写前台样式
3. 编写js进⾏数据交互
项⽬结构
页⾯结构（index.wxml）
注意绑定的⽅法
<input class="Input" placeholder="请输⼊快递单号" auto-focus bindinput="type_info"></input>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker Input">
<input placeholder="请选择快递公司" value="{{array[index]}}"></input>
</view>
</picker>
<button bindtap="OnchickInfo">查询</button>
<view class="InfoList" wx:for="{{info}}" value="index" wx:if='{{info}}'>
时间：<text>{{item.datetime}}\n</text>
状态：<text>{{ark}}</text>
</view>
页⾯样式（index.wxss）
/**index.wxss**/
.Input{
border: 1px solid gainsboro;
padding: 10rpx;
border-radius: 10rpx;
margin-bottom: 30rpx;
}
数据交互（index.js）
1. ⾸先在
app.js
// 获取快递信息
getExpressInfo:function(nu,kd,cb){
url: 'v.juhe/exp/index?key=key（换成⾃⼰的key值）&com='+kd+'&no='+nu,    header:{
'content-type':'application/json' // 默认值
},
success(res){
cb(res.data);
}
})
}
ps:URL接⼝可以参考聚合数据说明⽂档
其次在index.js⽂件调⽤app.js⽂件定义的getExpressInfo⽅法以及进⾏数据初始化和数据绑定
//获取应⽤实例
const app = getApp()
Page({
data:{
// 快递单号
kdnum:'',
// 快递公司编号
KDgs:null,
// 快递公司列表
array:[
制作查询类小程序'顺丰快递', '圆通快递', '申通快递', '韵达快递','天天快递'
],
index:'',
// 快递信息
info:null
},
//获取运单号
type_info:function(e){
this.setData({
kdnum:e.detail.value
})
},
// 获取快递公司编号
bindPickerChange: function (e){
var val = null;
switch (e.detail.value){
case '0':
case '0':
val = 'sf';
break;
case '1':
val = 'yt';
break;
case '2':
val ='sto';
break;
case '3':
val ='yd';
break;
case '4':
val = 'tt';
break;
}
this.setData({
index: e.detail.value,
KDgs: val
})
},
//查询快递信息
OnchickInfo:function(e){
if(this.data.kdnum===null||this.data.KDgs===null){
// 模态框API
wx.showModal({
title:'请完整输⼊相关信息',
// content:'请完整输⼊相关信息',
})
return false;
}
var that=this
console.log(data);
console.log('详细信息');
console.sult.list)
that.setData({
sult.list
})
})
console.log(this.data.info)
},
})
测试

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。