任务书,我是猫咪不是虎,左小娜
一、 创建index.wxml、index.wxss、index.js
附上代码:
1 <view class='container'> 2 <input class='info' placeholder='请输入快递单号' bindinput='input'></input> 3 <button type="primary" bindtap='btnclick'>点击查询</button> 4 </view>
附上样式表:
.info{ border: 2px solid #000000; margin-left: auto; margin-right: auto; width: 250px; } button{ width: 100px; margin-top: 50px; }
二、 在app.js中创建获取数据的方法(添加api)
用wx.request方法,详细请参考https://developers.weixin.qq.com/miniprogram/dev/api/wx.request.html
getexpressinfo: function (nu,cb){ wx.request({ url:'https://route.showapi.com/6419?showapi_appid=8xxx7&showapi_sign=8955a0a213xxxxxxxxxxxxxxxxxxxf7a&com=auto&nu='+nu, //showapi_sign是我密钥 //我用的是万维易园的api data: { x: '', y: '' }, method:'post', header: { 'content-type': 'application/x-www-form-urlencoded;' }, success: function (res) { cb(res.data) //将返回数据传给cb } }) },
三、 1.在index.js中获取实例
2.定义两个空参数
3.创建按钮点击事件方法以及获取输入框数字方法:
var app=getapp() page({ /** * 页面的初始数据 */ data: { expressnu:null, expressinfo:null }, btnclick:function(){ //按钮点击事件 var thispage=this; app.getexpressinfo(this.data.expressnu,function(data){ console.log(data) thispage.setdata({ expressinfo: data}) //将数据赋值给expressinfo }) }, input:function(e){ //获取输入框输入的值 this.setdata({expressnu:e.detail.value}) //detail.value是输入框输入的值在后台数据结构中的位置 }, })
四、在<view class='container'>中添加scroll-view部件:
<view class='container'> <input class='info' placeholder='请输入快递单号' bindinput='input'></input> <button type="primary" bindtap='btnclick'>点击查询</button> <scroll-view > <!--返回数据中的物流信息在showapi_res_body.data中--> <!--用for循环将数组传到视图容器中--> <view wx:for="{{expressinfo.showapi_res_body.data}}" > <!--将数组中的值打印出来--> <text style='color:#ff6600' decode="{{true}}"> 时间:{{item.time}} {{item.context}} </text> </view> </scroll-view> </view>
五、试一下,成功实现:
《完》
转载请注明原文链接,对本文有任何建议和意见请在评论区讨论,非常感谢!
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
html5 移动端视频video的android兼容(去除播放控件、全屏)
网友评论