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

2024-04-25 12:39:46

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

产品需求，

准备api,

代码编写。

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

第二步：准备

我们先找一个快递的api接口，通过http://apistore.baidu.com/我们可以看到很多的api，我们找一个快递查询的

我们可以看到有接口地址，和一些参数。做好这个准备接下来就开始编码工作了…………

第三步:编码工作

我们新建一个Express的文件，然后默认文件准备齐全

我们现在app.js中把我们的头部导航改为一个绿色的背景色

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

在index.wxml中，把默认的代码删掉，放上我们的一个文本输入框，一个查询按钮

<!--index.wxml-->
<view class="container">
  <input placeholder="请输入快递单号" bindinput="input" />
  <button type="primary" bindtap="btnClick"> 查询 </button>
</view>

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

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

到现在为止我们的布局就做好了如图：

接下来我们需要去调用我们事先准备好的api快递查询接口了，我们首先需要在app.js中设置一个网络请求的方法getExpressInfo里面设置两个参数一个快递参数，一个返回的方法。

利用文档给我们提供的wx.request发起网络请求url:地址路径，里面有几个参数muti=0返回多行完整的数据，order=desc按时间由新到旧排列，com快递的名称（快递公司的名称），nu快递单号，header:请求的参数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
 }

有了这样的请求方法，接下来就需要给我们的查询按钮添加一个点击的事件：bindtap="btnClick"，在index.js中添加查询事件，通过app来调用实现写好的请求方法getExpressInfo,在此之前我们需要先获取一下文本框内输入的快递单号，

给文本框绑定一个bindinput事件，

获取输入的快递单号。在data:对象中定义两个变量一个输入框的值，一个要显示的快递信息。

//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来循环数组。

<!--index.wxml-->
<view class="container">
  <input placeholder="请输入快递单号" bindinput="input" />
  <button type="primary" bindtap="btnClick"> 查询 </button>
</view>
<view class="expressinfo" wx:for="{{expressInfo.data}}">
  <ul>
   <li>{{item.context}}</li>
   <li>{{item.time}}</li>
  </ul>
</view>

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

/**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}

到这里我们的整个查询就完成了……

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序组件 contact-button（客服会话按钮）详解及实例代码

微信小程序组件 contact-button contact-button 客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话. 属性名类型默认值说明 size Number 18 会话按钮大小,有效值 18-27,单位:px type String default-dark 会话按钮的样式类型,有效值 default-dark, default-light session-from String 用户从该按钮进入会话时,开发者将收到带上本参数的事件推送.本
微信小程序摇一摇抽奖简单实例实现代码

微信小程序摇一摇抽奖微信小程序目录为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json的文件,可以看到在"pages"的数组里,里面配置了每个界面,且包含了每个界面文件的目录我们接下来看一下page文件夹,可以看到每个页面需要包含两个文件,一个是js文件,是每个界面的入口,wxml的文件是每个界面的布局文件,wxss是样式文件. 接下来看一下logs文件夹,在logs文件夹中比index文件夹中多出了一个logs.json的文件,l
微信小程序 radio单选框组件详解及实例代码

微信小程序单选框radio 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: radio-group 单选群组,内部由多个radio组成属性名类型默认值说明 bindchange EventHandle radio-g
微信小程序 slider 详解及实例代码

微信小程序slider 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 滑动选择器属性名类型默认值说明 min Number 0 最小值 max Number 100 最大值 step Number 1 步长,取值必须大
微信小程序 textarea 组件详解及简单实例

微信小程序textarea 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 多行输入框. 属性名类型默认值说明 value String 输入框的内容 placeholder String 输入框为空时占位符 placehold
微信小程序 picker-view 组件详解及简单实例

picker-view 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 嵌入页面的滚动选择器属性名类型默认值说明 value Number Array 数组中的数字依次表示 picker-view 内的 picker
微信小程序 switch组件详解及简单实例

微信小程序switch 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 开关选择器属性名类型默认值说明 checked Boolean false 是否选中 disabled Boolean false 是否禁用 typ
微信小程序实战程序简易新闻的制作

微信小程序实战项目: 简易新闻制作先看下效果: 实现思路数据全部是采用的本地数据,图片也是本地图片,因为苦逼的个人开发者,无法认证:toolbar四个现象:新闻,笑话,历史上的今天和主页,集中主页采用的是默认的页面,添加自己的一些内容:数据绑定,列表渲染,条件渲染和事件的使用:使用一些基础的View和text,部分API的使用: 代码结构目录用途 images 存放本地图片 pages 存放页面,history历史上的今天,index主页,joke笑话,news新闻 utils 工具包
微信小程序开发之快递查询功能的实现

微信小程序快递查询功能: 产品需求, 准备api, 代码编写. 第一步:产品需求,我们需要实现如下图的一个功能,在文本框输入快递单号,点击查询,下面出来我们需要的快递信息第二步:准备我们先找一个快递的api接口,通过http://apistore.baidu.com/我们可以看到很多的api,我们找一个快递查询的我们可以看到有接口地址,和一些参数.做好这个准备接下来就开始编码工作了---- 第三步:编码工作我们新建一个Express的文件,然后默认文件准备齐全我们现在app.js中
微信小程序开发之转发分享功能

官网文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html 第一种情况点击小程序转发不加入参数 //转发 onShareAppMessage: function() { let users = wx.getStorageSync('user'); if (res.from === 'button') {} return { title: '转发', path: '/pages/
微信小程序开发摇一摇功能

微信小程序摇一摇方法定义: let shakeInfo = { openFlag: false,// 是否开启摇一摇,*****注意:如果是小程序全局监听摇一摇,这里默认为true shakeSpeed: 110,//设置阈值,越小越灵敏 shakeStep: 2000,//摇一摇成功后间隔 lastTime: 0,//此变量用来记录上次摇动的时间 x: 0, y: 0, z: 0, lastX: 0, lastY: 0, lastZ: 0, //此组变量分别记录对应 x.y.z 三轴的数值和
微信小程序开发实现的IP地址查询功能示例

本文实例讲述了微信小程序开发实现的IP地址查询功能.分享给大家供大家参考,具体如下: 微信小程序开发参考 https://mp.weixin.qq.com/debug/wxadoc/dev/component/ search.wxml <view class="container"> <view class="page-body"> <view class="weui-search-bar {{searchFocusC
微信小程序开发搜索功能实现(前端+后端+数据库)

2019年5月7日更新这是写的最新的一篇文章大家看这篇:https://www.jb51.net/article/157081.htm 界面比较丑,主要实现逻辑... 超级简单的界面,表单,提交按钮,搜索结果展示区域... 下面是index.wxml  <form bindsubmit="formSubmit">  <input type="text" name=&q
基于vue开发微信小程序mpvue-docs跳转页面功能

打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面这样加就行了! 然后是用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用总结以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

本文实例讲述了微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能.分享给大家供大家参考,具体如下: 微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml  <view class="swiper-tab"> <view class="swiper-tab-list {{c
微信小程序开发实现首页弹框活动引导功能

目录 1.需求 2.数据库设计 3.Java后台配置实现 4.微信小程序前端实现总结 1.需求后台可以配置活动时间,在活动期间,自动在小程序首页,以弹框形式显示活动图片.用户可以关闭活动图片的显示. 1.管理后台可以新增活动时间段,是否弹框显示,弹框图片和活动是否开启配置 2.进入小程序时,请求一下后台是否有弹框活动,如果有,就弹框显示活动图片 2.数据库设计由于小程序弹框活动是系统配置中的一项,直接使用公共的系统配置来存储弹框活动配置. 公共系统配置表结构如下: CREATE TABLE
微信小程序开发常用功能点与使用方法总结

在这里,我主要整理了一些小程序开发过程中常用的功能点,非常实用,下面来一看看看吧 1.获取高度宽度 var windowHeight = wx.getSystemInfoSync().windowHeight var windowWidth = wx.getSystemInfoSync().windowWidth 2.动态绑定 style 样式和class class="operBtn {{select==1?'activeClass':''}}" style="displ
微信小程序开发常用功能汇总

目录获取用户信息获取手机号添加分享功能静态分享带参分享全局分享分享按钮页面跳转自定义组件定义全局组件设置默认顶部导航栏样式取消顶部默认的导航栏获取用户信息调用 wx.getUserProfile 方法获取用户基本信息.页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo 具体参数如下: 属性类型默认值必填说明 lang string en 否显示用户信息的语言 desc s

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

相关推荐

随机推荐

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