最近在自学微信小程序开发,做了一个很垃圾的快递查询小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)):