又到了喜闻乐见的博客时间
前情提要
在上一篇博客里面,我们讲到了事件
不知道你还记不得呢
什么是事件
*一种用户行为
*一种通讯方式
后面还有一堆balabla
这些都不重要
因为我今天要实战了
快递查询
现在先来看下我们的成品图
手机测试
ojbk,我们进入正题
【1】
每一次我们在开始新的项目时,都应该一开始就设想好,我们的程序最后成型的样子,每一次都不例外
快递查询,我们需要一个输入框,一个点击查询框
最基本的功能已经设想了,好了
我们开始实现这些较为了简单的表面功夫吧
view input placeholder="请输入要查询的快递单号" bindinput='input'/ button type="primary" bindtap="btnClick" 查询 /button/view再随意弄弄css
input{ border: 1px solid black; width: 90%; margin: 5%;}button{ width: 50%; margin: 5%;}【2】
我们开始需要着手后台的工作了
首先,我们要在api store上面找到一个可以用的api接口
http://apistore.baidu.com/apiworks/servicedetail/2894.html 这是我们要用的接口
很好,现在可以开始搭建我们的后台
btnClick : function(){ var thispage = this; app.getExpressInfo(this.data.expressNu,function(data){ console.log(data) thispage.setData({expressInfo:data}) //this.setdata并不能用 }); }, input : function(e){ this.setData({expressNu:e.detail.value}) },获取小程序实例(类似php类的实例化):var app = getApp()
这一段很重要,因为我们需要在app.js里面写上一些主要的方法
getExpressInfo:function(nu,cb){ wx.request({ url:'http://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&nu='+nu, data:{ x:' ', y:' ' }, header:{ 'apikey':'170a41d8abbc77f80e6895fb09b26b02' }, success: function(res){ cb(res.data); } })},url需要我们看着接口使用说明来编写
wx.request其实是腾讯封装好的一个request请求的函数,类似php语言里面的函数
wx.request是腾讯给我们封装好的“函数”直接拿过来用就行了,只要理解了这个“函数”里面的参数的使用即可
还有就是我们的开发工具需要这么设置,否者用接口的时候会报错
emmmmmmmmmmm













