微信小程序(源码)实现快递查询功能（界面传值JSON数据请求和解析radio-group的使用-）

Posted Stevin三天三夜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序(源码)实现快递查询功能（界面传值JSON数据请求和解析radio-group的使用-）相关的知识，希望对你有一定的参考价值。

运行效果：

请求数据之前需要首先在小程序平台设置服务器域名

微信小程序(源码)实现快递查询功能（界面传值、JSON数据请求和解析、radio-group的使用-）

第一个界面的实现：界面传值、radio-group的使用

first.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!--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

1
2
3
4
5
6
7
8
9
10
11
12
 
/* 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
// 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!--second.wxml-->
<view class="container">
<text class="title">
快递单号：{{result.nu}}
快递公司：{{result.com}}
</text>
<block wx:for="{{result.data}}" wx:key="key">
<text>
{{item.time}}
{{item.context}}
</text>
</block>
</view>

second.wxss

1
2
3
4
5
6
7
8
9
 
/**second.wxss**/
.title {
font-size: 40rpx;
}
text {
font-size: 30rpx;
}

second.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
//second.js
//获取应用实例
var app = getApp()
Page({
onLoad: function (option) {
console.log('界面跳转成功')
var that = this
// 数据请求
wx.request({
url: 'http://www.kuaidi100.com/query?',
// 参数请求所需的参数
data: { type: option.type, 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');
}
})
//调用应用实例的方法获取全局数据
app.getUserInfo(function (userInfo) {
//更新数据
that.setData({
userInfo: userInfo
})
})
}
})


以上是关于微信小程序(源码)实现快递查询功能（界面传值JSON数据请求和解析radio-group的使用-）的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序快递鸟快递查询接口对接

小程序商城后台如何连接快递服务？

微信小程序页面滑到到底部，继续上拉跳转到其他界面

微信小程序- 父组件传值给子组件

微信小程序 跳转传值实现方式

微信小程序录音界面以及功能实现