微信小程序开发的快速查询功能的实现

更新时间：2017年1月9日15:36:14作者：lanyanjing

本文主要介绍有关微信小程序开发的快速查询功能实现的相关信息，这里是微信小程序快速查询的功能实现，有需要的朋友可以参考以下

微信小程序快速查询功能：

产品需求

准备api，

编写代码。

第一步：产品要求，我们需要实现如下图所示的功能，在文本框中输入快递号码，单击查询，我们需要的快递信息就会出现在下面

第2步：准备

首先让我们找到一个快速的api界面，通过它我们可以看到很多api，让我们找到一个快速的查询

我们可以看到有接口地址和一些参数。为此做好准备，然后开始编码.........

第3步：编码工作

我们创建一个新的Express文件，然后默认文件就绪

我们现在在app.js中将头部导航更改为绿色背景

在index.json中设置导航名称：“快递查询”

在index.wxml中，删除默认代码，并放在我们的文本输入框之一和查询按钮上

查询

接下来，我们需要在文本框和按钮中添加样式：在index.wxss中设置

/**index.wxss**/ input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;} button{margin-top:20px;}

到目前为止，我们的布局已如图所示：

接下来，我们需要调用预先准备好的api express查询接口，我们首先需要在app.js中设置网络请求方法getExpressInfo来设置两个参数，一个Express参数和一个return方法。

使用文档提供的wx.request来启动网络请求url：地址路径，有多个参数muti = 0返回完整数据的多行，order = desc按时间从最新到旧的顺序进行排序，com表示名称（快递公司名称），nu快递跟踪号，标头：所请求的参数apikey的值是我们自己的百度帐户的apikey（您可以登录到自己的百度帐户并在个人中心查看）

//设置一个发起网络请求的方法 getExpressInfo:function(nu,cb){ wx.request({ url: 'http://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&com=zhongtong&nu='+nu, data: { x: '' , y: '' }, header: { 'apikey': '247d486b40d7c8da473a9a794f900508' }, success: function(res) { //console.log(res.data) cb(res.data); } }) }, globalData:{ userInfo:null }

使用这种请求方法，我们需要在我们的查询按钮中添加一个click事件：bindtap =“ btnClick”，在index.js中添加一个查询事件，并在需要之前通过应用程序getExpressInfo调用书面请求方法以获得在文本框中输入的快递号码，

将bindinput事件绑定到文本框，

获取输入的快递跟踪号。在数据中定义两个变量：对象：输入框的值和要显示的快递信息。

//index.js//获取应用实例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {}, einputinfo:null,//输入框值 expressInfo:null //快递信息 }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../todos/todos' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) }, //快递输入框事件 input:function(e){ this.setData({einputinfo:e.detail.value}); }, //查询事件 btnClick:function(){ var thisexpress=this; app.getExpressInfo(this.data.einputinfo,function(data){ console.log(data); thisexpress.setData({expressInfo:data}) }) }})

最后，我们需要在index.wxml中显示查询的快递信息，并使用vx：for循环数组。

查询

• {{item.context}}
• {{item.time}}

设置的最后一步中显示的快递信息样式：

/**index.wxss**/ input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;} button{margin-top:20px;} .expressinfo{font-size:12px; line-height: 18px;padding:10px; text-align:left;} .expressinfo li{display:block}

我们的整个查询已经完成...

感谢您的阅读，希望对大家有所帮助，感谢您对本网站的支持！