微信小程序> 微信小程序实战之快递查询

微信小程序实战之快递查询

浏览量:496 时间: 来源:Hy_William

又到了喜闻乐见的博客时间

前情提要

在上一篇博客里面,我们讲到了事件

不知道你还记不得呢


什么是事件

*一种用户行为

*一种通讯方式

后面还有一堆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 想你想你想我      这次实战比较简单,那就这样吧。(全篇第一个句号!!) 




版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎