微信小程序学习——快递信息查询

前言

根据微信公众平台提供的官方文档小程序注册和开发者工具的使用，可以注册微信公众平台，快速创建项目。文档很详细，在此就略过项目创建部分啦~

刚入门小程序，本项目是学习阶段写的小demo。GitHub项目地址

小程序的功能是：输入快递公司和单号，查询物流信息。涉及到一些小程序提供的表单组件，主要是为了学习网络请求接口的使用。
最终效果如下：查询主页面和查询结果详情页

主页面

详情页

目录结构

采用开发者工具提供的“建立普通快速启动模板”新建项目。

• index为输入查询信息的主页面
• detail为显示查询结果详情页

目录结构

---

一、 查询主页面

包括快递公司选择、快递单号和查询三部分

主页面未输入信息时

主页面输入信息时

1.快递公司选择

快递公司选择框

快递公司完成

使用微信小程序-表单组件-picker，实现从底部弹起的滚动选择器，选择不同快递公司。

参考资料：微信小程序官方文档picker介绍

结构(index.wxml)

  
    快递公司：
    
      
       当前选择：{{array[index]['name']}}
      
    
  

• picker的range属性指定数组array（该数组为快递公司信息，在index.js中定义）
• 当 range 是一个 Object Array 时，通过picker的range-key属性，指定 Object 中 key 的值作为选择器显示内容（在本例中name用于存储快递公司名字，在index.js中定义）
• value属性中index无需在index.js中定义，表示选择了range对应项的第几个，也就是range指定数组的下标（从0开始）
• bindchange用于绑定事件，bindPickerChange为事件处理函数，在index.js中定义

js(index.js)

//index.js

data: {
    array: [
      {
        'id':'yunda',
        'name':'韵达'
      },
      {
        'id':'shentong',
        'name':'申通'
      },
      {
        'id':'ems',
        'name':'EMS'
      },
      {
        'id':'shunfeng',
        'name':'顺丰'
      },
      {
        'id':'zhongtong',
        'name':'中通'
      }
    ],
    compangy_id:''
},
// 事件处理函数：公司选择
bindPickerChange: function(e) {
    //获取当前用户选择项，对应数组下标
    const val = e.detail.value;
    this.setData({
      index: val,
      compangy_id:this.data.array[val]['id']
    });
},

• 在data中注册结构中用到的数据，快递公司信息数组array，定义compangy_id
• bindPickerChange事件处理函数通过setData更新数据，包括当前用户选择项的对应数组下标index，compangy_id存储该项对应array中的id字段。（这个信息用于查询接口使用，在查询部分再详细说明）

2.快递单号

单号输入数字键盘

使用微信小程序-表单组件-input,用于输入快递单号。

参考资料：微信小程序官方文档input介绍

结构(index.wxml)

  
    快递单号：
    
  

• type属性定义为number，可以空时显示数字输入键盘
• bindKeyInput事件处理函数用于获取用户输入的单号，在index.js中定义

js(index.js)

  // 输入单号
  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },

inputVaue同样需要在data中注册（与存储快递公司用到变量compangy_id类似），用该变量存储用户输入的表单信息

3.查询按钮

使用微信小程序-表单组件-button。

参考资料：微信小程序官方文档button介绍

结构(index.wxml)

 查询 

• type="primary"用于定义按钮样式类型，组件提供几种样式可供选择
• size用于定义按钮大小，有效值为default和mini,默认为default
• bindquery绑定查询事件

js(index.js)

  // 点击查询
  bindquery:function (e) {
    var data={
      'type':this.data.compangy_id,
      'postid':this.data.inputValue
    };
    wx.navigateTo({
      url: '../../pages/detail/detail?type='+data.type+'&postid='+data.postid
    })
  }

这里用到了一个公开的物流接口：

http://www.kuaidi100.com/query?type=快递公司代号&postid=快递单号

ps 快递公司代号:

申通=”shentong” EMS=”ems” 顺丰=”shunfeng” 圆通=”yuantong” 中通=”zhongtong” 韵达=”yunda” 天天=”tiantian” 汇通=”huitongkuaidi” 全峰=”quanfengkuaidi” 德邦=”debangwuliu” 宅急送=”zhaijisong”

参考资料： 各种JSON API免费接口

• 通过上述快递公司和快递单号部分，可以获取接口需要的type和postid
• wx.navigateTo是官方提供的API，保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。这里用于跳转到快递信息展示详情页detail,并将查询快递信息所需的参数传递到详情页。

参考资料： 微信小程序wx.navigateTo的API文档

---

二、 快递信息详情页

查询成功和失败时效果如下：

查询成功详情页

查询失败详情页

结构(detail.wxml)