微信小程序开发之——个人中心-订单物流查询(8)

发表于 分类于 ， ， 阅读时长 ≈ 5 分钟

一 概述

  • 订单服务器搭建
  • 订单物流查询页面对应的页面为pages/order/order

二 订单服务器搭建

2.1 配置及模块安装

2.1.1 初始化项目，自动创建package.json配置文件

1
npm init -y

2.1.2 安装Express和body-parser模块

1
2
npm install express --save
npm install body-parsert --save

2.2 服务器文件index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const express = require('express');
// 使用框架创建Web服务器
const app = express();
const fs = require('fs');
app.get('/search', function (req, res) {
  fs.readFile('test.json', 'utf-8', function (err, data) {
    if (err) {
      res.send(err);
    }
    else {
      res.json(JSON.parse(data));
    }
  })
})

// 程序监听3000端口 
app.listen(3000);
console.log('服务器启动成功');

2.3 物流信息文件

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
{
  "resultcode": "200",
  "reason": "查询物流信息成功",
  "result": {
    "company": "fs",
    "com": "顺丰",
    "no": "SF1334165744862",
    "status": "1",
    "status_detail": "PENDING",
    "list": [
      {
        "datetime": "2016-06-15 21:44:04",
        "remark": "离开郴州市 发往长沙市【郴州市】",
        "zone": ""
      },
      {
        "datetime": "2016-06-15 21:46:45",
        "remark": "郴州市邮政速递物流公司国际快件监管中心已收件（揽投员姓名：侯云,联系电话:）【郴州市】",
        "zone": ""
      },
      {
        "datetime": "2016-06-16 12:04:00",
        "remark": "离开长沙市 发往贵阳市（经转）【长沙市】",
        "zone": ""
      },
      {
        "datetime": "2016-06-17 07:53:00",
        "remark": "到达贵阳市处理中心（经转）【贵阳市】",
        "zone": ""
      },
      {
        "datetime": "2016-06-18 07:40:00",
        "remark": "离开贵阳市 发往毕节地区（经转）【贵阳市】",
        "zone": ""
      },
      {
        "datetime": "2016-06-18 09:59:00",
        "remark": "离开贵阳市 发往下一城市（经转）【贵阳市】",
        "zone": ""
      },
      {
        "datetime": "2016-06-18 12:01:00",
        "remark": "到达  纳雍县 处理中心【毕节地区】",
        "zone": ""
      },
      {
        "datetime": "2016-06-18 17:34:00",
        "remark": "离开纳雍县 发往纳雍县阳长邮政支局【毕节地区】",
        "zone": ""
      },
      {
        "datetime": "2016-06-20 17:55:00",
        "remark": "投递并签收，签收人：单位收发章 *【毕节地区】",
        "zone": ""
      }
    ]
  },
  "error_code": 0
}

三 界面搭建

3.1 布局文件(order.wml)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<view class="container">
  <!--标题-->
  <view class="title">欢迎进入快递查询系统</view>
  <!--选择查询公司-->
  <view class="section">
    <view class="title">选择快递公司：</view>
    <picker class="input" bindtap="companyInput" value="{{index}}" range="{{com}}">
      <view>{{com[index]}}</view>
    </picker>
  </view>
  <!--运单号-->
  <view class="section">
    <view class="title">运单号：</view>
    <input class="input" type="number" bindinput="noInput" value="{{no}}" placeholder="请输入运单号" />
  </view>
  <!--查询按钮-->
  <button type="primary" bindtap="search">查询</button>
  <!--查询结果-->
  <scroll-view scroll-y class="orderlist">
    <view wx:for="{{expressInfo.result.list}}" wx:key="*this">
      <text>【{{item.datetime}}】</text>{{item.remark}}
    </view>
  </scroll-view>
</view>

3.2 页面样式文件(order.wxss)

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
.container {
  padding: 20rpx;
}

.container > .title {
  text-align: center;
}

button {
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  margin: 30rpx auto;
}

.section {
  width: 100%;
  box-sizing: border-box;
  margin-top: 80rpx;
  overflow: hidden;
}

.section > .title {
  width: 20%;
  float: left;
  font-size: 28rpx;
  text-align: right;
  line-height: 42rpx;
}

.section > .input {
  border: 1px solid gainsboro;
  width: 70%;
  padding: 5rpx 10rpx;
  float: right;
  font-size: 32rpx;
}

.orderlist {
  height: 300px;
}

.orderlist view {
  border-bottom: 1px solid #efefef;
  font-size: 32rpx;
  padding: 10rpx 0;
}

.orderlist text {
  color: red;
  font-size: 28rpx;
}

3.3 逻辑文件(order.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
Page({

  /**
   * 页面的初始数据
   */
  data: {
    no: 100001, //运单号
    company: ['sf', 'sto', 'yt', 'yd', 'tt'], // 传递给快递查询接口的值
    com: ['顺丰', '申通', '圆通', '韵达', '天天'], // 用于显示在页面中的快递名称
    index: 0, // 用户选择的快递公司的数组索引
    expressInfo: null // 查询到的物流信息

  },
  search: function () {
    wx.showLoading({
      title: 'Loading',
    })
    wx.request({
      url: 'http://localhost:3000/search' + '?com=' + this.data.company[this.data.index] + '&no=' + this.data.no,
      method: 'get',
      success: res => {
        this.setData({
          expressInfo: res.data
        })
        wx.hideLoading()
      },
      fail: err => {
        console.log(err)
        wx.showToast({
          title: '查询异常',
        })
        wx.hideLoading()
      }
    })
  },
  //获取运单号的值
  noInput:function(e){
    this.setData({
      no:e.detail.value
    })
  },
  //获取快递公司的索引
  companyInput:function(e){
    this.setData({
      index:e.detail.value
    })
  }
})

四 源码

  • 源码
  • 物流查询服务器