⼩程序实现快递查询功能（界⾯传值、JSON数据请求和解析、radio-group制作查询类小程序
的使⽤...）
运⾏效果：
请求数据之前需要⾸先在⼩程序平台设置服务器域名
第⼀个界⾯的实现：界⾯传值、radio-group 的使⽤
first.wxml first.wxss
<!--first.wxml-->
<view  class ="first_view">
<text >请选择快递公司：</text >
<!-- 单项选择器控件 -->
<radio-group  class ="radio_group" bindchange ="listenRadioGroup">
<!--⽤view 包含每个实现垂直排列  -->
<view  wx:for ="{{items }}" wx:key ="key">
<radio  value ='{{item.value }}' checked ='{{false }}'>{{item.name }}</radio >
</view >
</radio-group >
<!-- 输⼊框控件 -->
<input  class ="input_view" type ="number" bindinput ="getInputText" cursor-spacing ='10' placeholder ="请输⼊快递单号" auto-focus />  <button  bindtap ="jump">查询快递</button >
</view >
/* first.wxss */
.first_view{
display: flex;
flex-direction: column;
}
.input_view{
margin-top: 30rpx;
margin-bottom: 30rpx;
background-color:rgb(250, 250, 250);
}
first.js
// first.js
//创建两个变量，保存快递单号和快递类型
var kd_type
var kd_num
Page({
/**
* 页⾯的初始数据
*/
data: {
items: [
{ name: "申通", value: "shentong" },
{ name: "EMS", value: "ems" },
{ name: "顺丰", value: "shunfeng" },
{ name: "圆通", value: "yuantong" },
{ name: "韵达", value: "yunda" },
{ name: "天天", value: "tiantian" },
{ name: "汇通", value: "huitongkuaidi" },
{ name: "全峰", value: "quanfengkuaidi" },
{ name: "德邦", value: "debangkuaidi" },
{ name: "宅急送", value: "zhaijisong" },
]
},
// 监听单项选择器radio_group的选中情况
listenRadioGroup: function (value) {
console.log(value)
kd_type = value.detail.value
},
// 获取⽂本框input的输⼊内容
getInputText: function (inputText) {
console.log(inputText.detail.value)
kd_num = inputText.detail.value
},
// “查询快递”按钮点击事件
jump: function () {
wx.navigateTo({
// 参数拼接传到下⼀个界⾯
url: '../second/second?postid=' + kd_num + '&type=' + kd_type,
})
}
})
第⼆个界⾯的实现：JSON数据请求和解析
JSON数据格式如下:
second.wxml
<!--second.wxml-->
<view class="container">
<text class="title">
快递单号：{{result.nu}}
快递公司：{{result}}
</text>
<block wx:for="{{result.data}}"wx:key="key">
<text>
{{item.time}}
{{t}}
</text>
</block>
</view>
second.wxss
/**second.wxss**/
.title {
font-size: 40rpx;
}
text {
font-size: 30rpx;
}
second.js
//second.js
//获取应⽤实例
var app = getApp()
Page({
onLoad: function(option) {
console.log('界⾯跳转成功')
var that = this
// 数据请求
url: 'www.kuaidi100/query?', // 参数请求所需的参数
data: { type: pe, postid: option.postid }, // 数据请求⽅式
method: 'GET',
// 请求成功
success: function(res) {
console.log("返回的数据为" + res)
// 设置数据
that.setData({
result: res.data
})
},
// 请求失败
fail: function() {
console.log('fail');
},
// 请求完成
complete: function() {
console.log('complete');
}
})
//调⽤应⽤实例的⽅法获取全局数据
//更新数据
that.setData({
userInfo: userInfo
})
})
}
})

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