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

一概述

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

二订单服务器搭建

2.1 配置及模块安装

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

npm init -y

2.1.2 安装Express和body-parser模块

npm install express --save
npm install body-parsert --save

2.2 服务器文件index.js

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 物流信息文件

{"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)

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

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

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

四源码

源码
物流查询服务器

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

微信小程序开发之——个人中心-介绍(1)
一概述个人中心展示图个人中心各个页面展示及功能介绍二个人中心页面介绍 2.1 展示 2.2 页面构成 2.2.1 首页说明: 首页包含:昵称,星座,兴趣,QQ,电话点击头像:跳转个人中心 ...
微信小程序开发之——个人中心-个人中心(5)
一概述个人中心对应的页面为:pages/person/person 页面搭建页面逻辑二页面搭建 2.1 布局文件(person.wml)  <view c ...
微信小程序开发之——个人中心-个人资料修改(7)
一概述个人资料修改对应的页面为:pages/modify/modify 页面搭建页面逻辑二页面搭建 2.1 布局文件(modify.wml) <form bindsubmit=&quo ...
微信小程序开发之——个人中心-收货地址(9)
一概述个人详情页对应的页面为:pages/address/address 页面搭建页面逻辑二页面搭建 2.1 布局文件(address.wml) <view class="l ...
微信小程序开发之——个人中心-首页(4)
一概述首页对应的页面为pages/index/index 首页页面搭建页面逻辑-点击头像完成页面跳转二首页页面搭建 2.1 布局文件(index.wml) <view class=&q ...
微信小程序开发之——个人中心-个人详情页(6)
一概述个人详情页对应的页面为:pages/detail/detail 页面搭建页面逻辑二页面搭建 2.1 布局文件(detail.wml) <view class="info ...
微信小程序开发之——个人中心-API(2)
一概述页面跳转方法:wx.switchTab/wx.navigateTo/wx.redirectTo/wx.reLaunch 从本地相册或照相机拍照:wx.chooseImage 选择用户地址:w ...
微信小程序开发之快递服务专栏（快递运力查询、寄快递、取消订单）代码篇
目录 1.工程目录 2.代码 3.结果 6.获取资源这篇文章废话不多,直接上代码 1.工程目录需要改动的文件上图已经标出来了 2.代码 index.js // index.js // 获取应用实 ...
python开发微信小程序-Python 开发者的微信小程序开发实践
导读在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...

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

一概述

二订单服务器搭建

2.1 配置及模块安装

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

2.1.2 安装Express和body-parser模块

2.2 服务器文件index.js

2.3 物流信息文件

三界面搭建

3.1 布局文件(order.wml)

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

3.3 逻辑文件(order.js)

四源码

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

最新文章

热门文章

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

一 概述

二 订单服务器搭建

2.1 配置及模块安装

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

2.1.2 安装Express和body-parser模块

2.2 服务器文件index.js

2.3 物流信息文件

三 界面搭建

3.1 布局文件(order.wml)

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

3.3 逻辑文件(order.js)

四 源码

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

最新文章

热门文章

一概述

二订单服务器搭建

三界面搭建

四源码