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

前言

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

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

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

主页面
详情页

目录结构

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

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

目录结构

---

一、 查询主页面

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

主页面未输入信息时
主页面输入信息时

1.快递公司选择

快递公司选择框
快递公司完成

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

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

结构(index.wxml)

<!--index.wxml-->
  <view class="company">
    <view class="title">快递公司：</view>
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}" range-key="name">
      <view class="picker" style="line-height: 50px;height: 50px;background: #fff;padding-left: 20px;font-size:18px;">
       当前选择：{{array[index]['name']}}
      </view>
    </picker>
  </view>

• 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)

<!--index.wxml-->
  <view class="caseid">
    <view class="title">快递单号：</view>
    <input type="number" placeholder="请输入快递单号" bindinput="bindKeyInput" style="line-height: 50px;height: 50px;background: #fff;padding-left: 20px;font-size:18px;"/>
  </view>

• 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)

<button type="primary" size="{{primarySize}}"
        bindtap="bindquery" style="margin-top:20px;"> 查询 </button>

• 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)

<!--detail.wxml-->
<view class="container">
    <!--快递信息模板 begin-->
        <template name="items">
            <view class="row">
                <view class="time">
                    {{time}}
                </view>
                <view class="icon"></view>
                <view class="infos">
                    {{context}}
                </view>
            </view>
        </template>
    <!--快递信息模板 end-->
    <!--查询成功时 begin-->
        <view wx:if="{{haslist}}">
            <!--循环输出列表 begin-->
            <view class="mainline"></view>
            <block wx:for="{{list}}" wx:key="*this" class="scroll-view-item bc_green">
              <template is="items" data="{{...item}}" />
            </block>
            <!--循环输出列表 end-->
        </view>
    <!--查询成功时 end-->
    <!--查询失败时-->
    <view wx:else style="padding: 20px;">{{errmsg}}</view>
</view>

• 快递信息模板，为一条快递信息的模板，包括时间和快递详情
• wx:if和wx:for控制循环输出信息
• 其中在列表循环是，如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。详细使用见如下参考资料的wx:for

参考资料：

微信小程序官方文档列表渲染wx:for

微信小程序官方文档条件渲染wx:if

js(detail.js)

  data: {
    list:[],
    haslist:false,
    errmsg:''
  },
  //事件处理函数
  onLoad:function (options) {
    var that = this;
    wx.request( {
      url: 'https://www.kuaidi100.com/query',
      data: options,
      header: {
        'Content-Type': 'application/json'
      },
      success: function( res ) {
        // console.log( res.data );
        var msg=res.data.message;
        var data=res.data.data;
        if(msg==="ok"){
            that.setData({
              list: data,
              haslist:true
            });
            // console.log(that.data.list);
        }else{
            that.setData({
                errmsg:'请正确输入快递公司和单号'
            });
        }
      }
    })
  }

• data中list用于存储快递信息数据，haslist用于结构用中wx:if的控制，errmsg为查询失败时显示的信息。
• 在主页面查询按钮的点击事件中采用了wx.navigateTo传递快递查询的参数。（物流接口：http://www.kuaidi100.com/query?type=快递公司代号&postid=快递单号）。 在详情页面中，只需在onLoad(生命周期函数--监听页面加载)中用options接受参数即可。
• 用wx.request发起网络请求。

参考资料：微信小程序官方文档wx.request发起网络请求

• 注意： 在创建项目时，填写了AppID,发起网络请求需要在开发设置中配置服务器域名，如下图所示。
• 开发者工具-创建小程序
  i微信公众平台-设置