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