作为学习前端的童鞋来说，想学习小程序开发，查询类的***无疑是很好的入手练习。下面的快递物流信息查询小***，希望对你能有启发。
首先，查询类的小程序是通过调用API来实时获取信息，所以如果对于API不熟悉的童鞋可以移步API Store或聚合数据自行了解，这里不做详细解释。
该小程序的具体代码：
app.json：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "快递查询",
"navigationBarTextStyle":"#fff"
}
}
app.wxss：
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
app.js：
App({
onLaunch: function() {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo: function(cb) {
var that = this
if (this.globalData.userInfo) {
typeof cb == "function" && cb(this.globalData.userInfo)
} else {
//调用登录接口
wx.getUserInfo({
withCredentials: false,
success: function(res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
},
//发起请求
getExpressInfo:function(nu,cb){
wx.request({
url: 'https://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&nu='+nu, //快递查询的接口地址
data: {
x: '',
y: ''
},
header: {
'apikey': '你申请的apijey'
},
success: function (res) {
cb(res.data);
}
})
},
globalData:{
userInfo:null
}
})
index.wxml：
<view class="container">
请输入运单号：
<input bindinput="bindKeyInput" bindinput="input" auto-focus/>
<button type="primary" size="{{defaultSize}}" bindtap="btnClick">查询</button>
<scroll-view scroll-y style="height: 330px;">
<view wx:for="{{expressInfo.data}}" class="showInfo">{{item.context}}{{item.time}}</view>
</scroll-view>
</view>
index.wxss：
input{
border:1px solid #ddd;
border-left:1px solid transparent;
border-right:1px solid transparent;
width:100%;
height:10%;
margin:5px;
padding: 5px;
}
button{
width:90%;
margin:10px;
}
.showInfo{
margin:5px;
font-size: 18px;
}
index.js：
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
expressNu:null,
expressInfo:null
},
//***处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
btnClick:function(){
//console.log(this.data.expressNu);
var thispage = this;
app.getExpressInfo(this.data.expressNu,function(data){
thispage.setData({expressInfo:data});
});
},
input:function(e){
this.setData({expressNu:e.detail.value});
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
