微信小程序实现快递查询功能(界面传值、JSON数据请求和解析、radio-group的使用...)
2017-09-08 21:04
1501 查看
运行效果:
请求数据之前需要首先在小程序平台设置服务器域名
第一个界面的实现:界面传值、radio-group的使用
first.wxml
<!--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.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.com}} </text> <block wx:for="{{result.data}}" wx:key="key"> <text> {{item.time}} {{item.context}} </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 // 数据请求 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 }) }) } })
相关文章推荐
- 微信小程序中使用ECharts 异步加载数据实现图表功能
- 使用Httpclient向百度翻译提交POST请求 接受返回的JSON字符串 实现翻译功能(1)----程序实现原理
- 微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
- EXTJS4 Grid Filter 插件的使用 与后台数据解析------Extjs 查询筛选功能的实现
- Android--使用原生技术实现ListView(原生技术实现网络异步请求,解析json数据)
- 微信小程序 开发之快递查询功能的实现
- 使用ViewPager+RadioGroup+Fragment实现类似微信的底部导航
- 使用Redis的脚本功能实现Redis中数据简单查询
- 使用Httpclient向百度翻译提交POST请求 接受返回的JSON字符串 实现翻译功能(2)----Httpclient使用详解
- 使用curl()模拟请求,实现快递查询
- phpStudy4——前端页面使用Ajax请求并解析php返回的json数据
- iOS:二叉树多级表格的使用,使用三方库TreeTableView-master实现对json解析数据的递归遍历整理成树状结构
- 使用C#语言实现的查询条件界面展开和收起功能
- 使用google的开源框架Volley,功能一:网络请求Json数据
- Android手机号码归属地的查询(使用聚合数据API,获取JSON数据并解析)
- 使用Httpclient向百度翻译提交POST请求 接受返回的JSON字符串 实现翻译功能(3)----BufferedReader与BufferedWriter的使用
- Android使用Gson解析JSON连接服务器实现客户端登陆功能
- 使用RadioGroup控件实现选项选择功能
- 字符串处理是许多程序中非常重要的一部分,它们可以用于文本显示,数据表示,查找键和很多目的.在Unix下,用户可以使用正则表达式的强健功能实现这些 目的,从Java1.4起,Java核心API就引入了java.util.regex程序包,它是一种有价值的基础
- 使用json实现查询条件传回Action进行hql语句拼接查询实现在结果中查询功能在datagrid中显示查询结果