快递查询小程序

目标

在微信小程序上开发快递即时查询功能板块

工具

微信Web开发者工具

步骤

生成原始项目

勾选在当前目录中创建 quick start 项目

配置页面属性

在pages/index/index.wxml中

1
2
3
{
        "navigationBarTitleText":"快递查询"
}

设计页面结构

在pages/index/index.wxml中

1
2
3
4
5
6
7
8
9
10
11
<view class="container">
  <input placeholder="{{corporationText}}" bindinput="corInput" />
  <input placeholder="{{numberText}}" bindinput="numInput" />
  <button type="primary" bindtap="expressSearch">{{searchBtnText}}</button>
  <scroll-view scroll-y="true" style="height:200rpx;">
      <view wx:for="{{expressInfo.data}}">
          {{item.time}}
          {{item.content}}
      </view>
  </scroll-view>
</view>

设计页面布局

在pages/index/index.wxss中

1
2
3
4
5
6
input{
    width: 80%;
    margin: 5%;
    padding: 5%;
    border: 1px solid #eee;
}

设计应用逻辑

在app.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  },
  /*
  * 快递查询
  * http://www.kuaidiapi.cn/
  * 快递公司编码必填
  * 物流单号必填
  */
  getExpressInfo:function(cor,num,cb){
    var uid = '86640'
    var key = '73cea0385e6943d2b4d255011ca950ae'
    var order = num
    var id = cor
    var issign = false
    wx.request({
      url: 'http://www.kuaidiapi.cn/rest/?uid=' + uid + '&key=' + key + '&order=' + order + '&id=' + id + '&issign=' + issign,
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function(res){
        // success
        // console.log(res)
        cb && cb(res.data)
      },
      fail: function(res) {
        // fail
      },
      complete: function(res) {
        // complete
      }
    })
  }
})

设计页面逻辑

在pages/index/index.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 获取应用实例
var app = getApp();
Page({
  data:{
    corporationText:"快递公司编码,仅用拼音字母",
    numberText:"快递单号，仅用数字",
    searchBtnText:"查询",
    corporationValue:null,
    numberValue:null,
    expressInfo:null
  },
  corInput:function(e){
    this.setData({corporationValue:e.detail.value})
  },
  numInput:function(e){
    this.setData({numberValue:e.detail.value})
  },
  expressSearch:function(){
    var thisPage = this
    app.getExpressInfo(this.data.corporationValue,this.data.numberValue,function(data){
      // console.log(data)
      thisPage.setData({expressInfo:data})
    })
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

接口

wx.request(OBJECT)

wx.request发起的是 HTTPS 请求。

快递API