做一个快递查询的功能模块)"/>
微信小程序—项目实战(简单做一个快递查询的功能模块)
快递查询小功能
- 项目结构
- 页面结构(index.wxml)
- 页面样式(index.wxss)
- 数据交互(index.js)
- 测试
功能描述 :
输入快递单号和对应的快递公司 即可查询
进行简单的输入判断
- 找到一个开放的快递查询API
我这里使用的是聚合数据的api - 编写前台样式
- 编写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>{{item.remark}}</text>
</view>
页面样式(index.wxss)
/**index.wxss**/
.Input{border: 1px solid gainsboro;padding: 10rpx;border-radius: 10rpx;margin-bottom: 30rpx;
}
数据交互(index.js)
- 首先在
app.js
文件中定义网络请求方法,wx.request的API(详细请查阅微信官方文档)
/
// 获取快递信息
getExpressInfo:function(nu,kd,cb){wx.request({url: '=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':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){// 模态框APIwx.showModal({title: '请完整输入相关信息',// content: '请完整输入相关信息',})return false;}var that=thisapp.getExpressInfo(this.data.kdnum,this.data.KDgs,function(data){console.log('结果:')console.log(data);console.log('详细信息');console.log(data.result.list)that.setData({info:data.result.list})})console.log(this.data.info)},})
测试
![在这里插入图片描述](.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTY0Mjc5,size_16,color_FFFFFF,t_70
更多推荐
微信小程序—项目实战(简单做一个快递查询的功能模块)
发布评论