微信小程序之快递查询
来源:互联网 发布:双轨直销软件xajczxwl 编辑:程序博客网 时间:2024/04/28 13:25
实现原理:调用接口将获取的数据展示在界面上。
实现难点:{获取input框内的值并给将其保存到全局变量}
{编写点击函数btnclick}
{编写接口函数传进input框内的值并且使用回调函数将数据回传给一个全局变量}
实现代码{
index.wxml
<view class="container"><view class="section__title">你输入的是:{{inputValue}}</view> //这里的bindinput属性把bindKeyInput函数绑定到了此处 <input placeholder="快递查询" bindinput="bindKeyInput"/> //此处bindtap="btnclick"。同上 <button type="primary" bindtap="btnclick"> 查询 </button> <scroll-view scroll-y="true" style="height: 400px;"> //这里应用wx:for绑定一个数组。并通item代名词调用数组内部的属性进行渲染 <view wx:for="{{inputinfo.data}}"> {{item.context}}--{{item.time}}--</view> </scroll-view></view>
app.js
这里是接口获取函数,我写在了appjs里面
getkuaidi:function(nu,cb){console.log(this);wx.request({ url: 'http://apis.baidu.com/kuaidicom/express_api/express_api?com=yuantong&nu='+nu+'&muti=0&order=desc', data: { x: '' , y: '' }, header: { 'apikey': '11750027a78cd0cf17749c0460cebf67' }, success: function(res) { console.log(res.data); //这里使用回调函数将数据当做参数传回indexjs(我把indexjs做视图数据渲染层控制) cb(res.data); }}) }
indexjs
//事件处理函数 bindKeyInput: function(e) { //这里设置全局变量inputValue为e.detail.value当前对象的值 this.setData({ inputValue: e.detail.value }) console.log(this.data.inputValue); }, btnclick(){ console.log(this.data.inputValue); var that=this; console.log(that); //这里调用app里面的接口函数,并使用回调函数将数据传回indexjs app.getkuaidi(this.data.inputValue,function(data){ console.log(data); that.setData({ inputinfo: data }); console.log(that.data.inputinfo); }) },
}
实现总结:
通过这次小项目的实践,遇到了一个问题就是indexjs里面的this是一个object,即该indexjs作为一整个对象存在,
e {data: Object}__route__:(...)get __route__:()set __route__:()__wxWebviewId__:(...)get __wxWebviewId__:()set __wxWebviewId__:()bindKeyInput:()bindViewTap:()btnclick:()data:ObjectonHide:()onLoad:()onReady:()onRouteEnd:()onShow:()onUnload:()__proto__:Object
同时APPjs也是一个对象
但是他是global对象
e {globalData: Object}getUserInfo:()getkuaidi:()globalData:ObjectonHide:()onLaunch:()onShow:()onUnlaunch:()__proto__:Object
0 0
- 微信小程序之快递查询
- 微信小程序之快递查询
- 小程序快递查询
- 快递查询API接口PHP源码程序
- android砖头之:快递即时查询
- 快递查询
- 快递查询
- 快递查询
- 快递查询
- 快递查询
- 快递查询
- 快递查询
- 快递查询
- 微信小程序+OLAMI自然语言API接口制作智能查询工具--快递、聊天、日历等
- 快递查询 (快递100)
- 微信小程序快递鸟查物流
- Android快递轨迹查询 “KD快递查询”
- 微信小程序实现快递查询功能(界面传值、JSON数据请求和解析、radio-group的使用...)
- Android避免内存溢出(Out of Memory)方法总结
- [leetcode-二叉树先序遍历]--144.Binary Tree Preorder Traversal
- MongoDB副本集搭建
- Ubuntu12+caffe配置
- 搭建yum源服务器
- 微信小程序之快递查询
- Docker Registry + nginx 遇到的问题
- 数据库为什么要分库分表
- C# Stack使用
- 修改linux的hostname
- 基于tushare获取股票历史行情数据包括后复权和未复权的_导入数据库
- git 已经track 的文件再忽略导致不起作用
- ExoPlayer 播放器开发指南(译)
- ahk脚本指南