微信小程序—项目实战(简单做一个快递查询的功能模块)

功能描述

输入快递单号和对应的快递公司 即可查询
进行简单的输入判断

  1. 找到一个开放的快递查询API
    我这里使用的是聚合数据的api https://www.juhe.cn/docs
  2. 编写前台样式
  3. 编写js进行数据交互

项目结构

在这里插入图片描述

页面结构(index.wxml)

注意绑定的方法

<input class="Input" placeholder="请输入快递单号" auto-focus bindinput="type_info"></input>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker Input">
    <input placeholder="请选择快递公司" value="{{array[index]}}"></input>
    </view>
  </picker>
<button bindtap="OnchickInfo">查询</button>
<view class="InfoList" wx:for="{{info}}" value="index" wx:if='{{info}}'>
  时间:<text>{{item.datetime}}\n</text>
  状态:<text>{{item.remark}}</text>
</view>

在这里插入图片描述

页面样式(index.wxss)

/**index.wxss**/
.Input{
  border: 1px solid gainsboro;
  padding: 10rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

数据交互(index.js)

  1. 首先在

app.js

文件中定义网络请求方法,wx.request的API(详细请查阅微信官方文档)
https://developers.weixin.qq.com/miniprogram/dev/api/

// 获取快递信息
getExpressInfo:function(nu,kd,cb){
  wx.request({
    url: 'http://v.juhe.cn/exp/index?key=key(换成自己的key值)&com='+kd+'&no='+nu,
    header: {
      'content-type': 'application/json' // 默认值
    },
    success(res) {
      cb(res.data);
    }
  })
}

ps:URL接口可以参考聚合数据说明文档
在这里插入图片描述

其次在index.js文件调用app.js文件定义的getExpressInfo方法以及进行

数据初始化和数据绑定

//获取应用实例
const app = getApp()

Page({
  data:{
    // 快递单号
    kdnum: '',
    // 快递公司编号
    KDgs:null,
    // 快递公司列表
    array:[
      '顺丰快递', '圆通快递', '申通快递', '韵达快递','天天快递'
    ],
    index:'',
    // 快递信息
    info:null
  },

  //获取运单号 
  type_info:function(e){
      this.setData({
        kdnum:e.detail.value
      })
  },

  // 获取快递公司编号
  bindPickerChange: function (e) {
    var val = null;
    switch (e.detail.value) {
      case '0':
        val = 'sf';
        break;
      case '1':
        val = 'yt';
        break;
      case '2':
        val ='sto';
        break;
      case '3':
        val ='yd';
        break;
      case '4':
        val = 'tt';
        break;
    }
    this.setData({
      index: e.detail.value,
      KDgs: val
    })
  },

  //查询 快递信息 
  OnchickInfo:function(e){
    if(this.data.kdnum===null||this.data.KDgs===null){
      // 模态框API
      wx.showModal({
        title: '请完整输入相关信息',
        // content: '请完整输入相关信息',
      })
      return false;
    }
    var that=this
    app.getExpressInfo(this.data.kdnum,this.data.KDgs,function(data){
      console.log('结果:')
      console.log(data);
      console.log('详细信息');
      console.log(data.result.list)
      that.setData({
        info:data.result.list
      })
    })
    console.log(this.data.info)
  },

  
})

测试

在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200113155902731.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTY0Mjc5,size_16,color_FFFFFF,t_70
在这里插入图片描述

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值