├── 2019-5-18.txt ├── README.md ├── app.js ├── app.json ├── app.wxss ├── pages └── index │ ├── index.js │ ├── index.wxml │ └── index.wxss └── utils └── request.js /2019-5-18.txt: -------------------------------------------------------------------------------- 1 | '' 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 微信小程序---简单API请求示例(快递查询网络请求API接口) 2 | 3 | 4 | utils/request.js: 核心的API请求接口类封装 5 | 6 | pages/index/index.js: 网络请求控制页面的逻辑 7 | 8 | pages/index/index.wxml: 页面的布局文件 9 | 10 | pages/index/index.wxss: 页面的样式文件 11 | 12 | 13 | 有问题可以发送到此邮箱：shangheguang#yeah.net 把#替换为@ 14 | 15 | 欢迎一起来探讨小程序。 -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc 简单API请求示例 3 | * @author shangheguang@yeah.net 4 | * @date 2017-01-20 5 | */ 6 | const request = require('./utils/request.js') 7 | 8 | App({ 9 | 10 | request: request, 11 | 12 | getUserInfo:function(cb){ 13 | var that = this 14 | if(this.globalData.userInfo){ 15 | typeof cb == "function" && cb(this.globalData.userInfo) 16 | }else{ 17 | //调用登录接口 18 | wx.login({ 19 | success: function () { 20 | wx.getUserInfo({ 21 | success: function (res) { 22 | that.globalData.userInfo = res.userInfo 23 | typeof cb == "function" && cb(that.globalData.userInfo) 24 | } 25 | }) 26 | } 27 | }) 28 | } 29 | }, 30 | 31 | /** 32 | * 定义的接口域名 33 | */ 34 | apiUrl: 'https://www.kuaidi100.com', 35 | 36 | globalData:{ 37 | userInfo:null 38 | } 39 | 40 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index" 4 | ], 5 | "window":{ 6 | "backgroundTextStyle":"light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "", 9 | "navigationBarTextStyle":"black" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 100%; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: space-between; 7 | padding: 200rpx 0; 8 | box-sizing: border-box; 9 | } 10 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | var app = getApp() 2 | 3 | Page({ 4 | /** 5 | * 存储页面数据 6 | */ 7 | data: { 8 | expressData : {}, 9 | }, 10 | /** 11 | * 接口调用成功处理 12 | */ 13 | successFun: function(res, selfObj) { 14 | selfObj.setData({ 15 | expressData : res, 16 | }) 17 | }, 18 | /** 19 | * 接口调用失败处理 20 | */ 21 | failFun: function(res, selfObj) { 22 | console.log('failFun', res) 23 | }, 24 | /** 25 | * 页面加载时初始化数据 26 | */ 27 | onLoad: function() { 28 | var url = app.apiUrl+'/query' 29 | var params = { 30 | type : 'zhongtong', 31 | postid : '424621263550', 32 | } 33 | //@todo 网络请求API数据 34 | app.request.requestGetApi(url, params, this, this.successFun, this.failFun) 35 | } 36 | }) 37 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 快递公司：{{expressData.com}} 6 | 订单编号：{{expressData.nu}} 7 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 8 | desc: [简单API请求示例] 9 | author: shangheguang@yeah.net 10 | date: 2017-01-20 11 | 12 | 13 | 14 | 15 | 订单跟踪 16 | 17 | 18 | 19 | {{item.context}} 20 | {{item.time}} 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | .bgfff{ 2 | background:#fff; 3 | } 4 | .order_top_con{ 5 | background:#26ab28; 6 | color: #fff; 7 | font-size: 14px; 8 | line-height: 24px; 9 | padding:10px 15px; 10 | position: relative; 11 | } 12 | .order_top_con .dec_img00{ 13 | width: 75rpx; 14 | height: 70rpx; 15 | position: absolute; 16 | right: 30px; top: 30%; 17 | background-size: 75rpx 70rpx; 18 | display:block; 19 | } 20 | .mt10{ 21 | margin-top: 10px; 22 | } 23 | .borderb{ 24 | border-bottom: 1px solid #f2f2f2; 25 | } 26 | .orderLocation .title{ 27 | font-size: 15px; 28 | border-bottom: 1px solid #e5e5e5; 29 | height: 88rpx; 30 | line-height: 88rpx; 31 | padding-left: 20px; 32 | } 33 | .orderLocation .step_box{ 34 | border-left: 1px solid #f2f2f2; 35 | margin-left: 25px; 36 | margin-top: 10px; 37 | } 38 | .orderLocation .item{ 39 | font-size: 14px; 40 | color: #999999; 41 | position: relative; 42 | padding: 10px 10px; 43 | margin-left: 15px; 44 | } 45 | .orderLocation .itemOn{ 46 | color: #1fb922; 47 | padding-top: 0; 48 | } 49 | .orderLocation .item::after { 50 | content: ""; 51 | position: absolute; 52 | width: 10px; 53 | height: 10px; 54 | background-color: #d7d7d7; 55 | border-radius: 50%; 56 | left: -21px; 57 | top: 15px; 58 | } 59 | .orderLocation .itemOn::after { 60 | content: ""; 61 | position: absolute; 62 | width: 10px; 63 | height: 10px; 64 | background-color: #1fb922; 65 | border-radius: 50%; 66 | left: -21px; 67 | top: 5px; 68 | } 69 | .orderLocation .step_box .fs12{ 70 | font-size: 12px; 71 | padding-top: 10px; 72 | } -------------------------------------------------------------------------------- /utils/request.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc API请求接口类封装 3 | * @author shangheguang@yeah.net 4 | * @date 2017-01-20 5 | */ 6 | 7 | /** 8 | * POST请求API 9 | * @param {String} url 接口地址 10 | * @param {Object} params 请求的参数 11 | * @param {Object} sourceObj 来源对象 12 | * @param {Function} successFun 接口调用成功返回的回调函数 13 | * @param {Function} failFun 接口调用失败的回调函数 14 | * @param {Function} completeFun 接口调用结束的回调函数(调用成功、失败都会执行) 15 | */ 16 | function requestPostApi(url, params, sourceObj, successFun, failFun, completeFun) { 17 | requestApi(url, params, 'POST', sourceObj, successFun, failFun, completeFun) 18 | } 19 | 20 | /** 21 | * GET请求API 22 | * @param {String} url 接口地址 23 | * @param {Object} params 请求的参数 24 | * @param {Object} sourceObj 来源对象 25 | * @param {Function} successFun 接口调用成功返回的回调函数 26 | * @param {Function} failFun 接口调用失败的回调函数 27 | * @param {Function} completeFun 接口调用结束的回调函数(调用成功、失败都会执行) 28 | */ 29 | function requestGetApi(url, params, sourceObj, successFun, failFun, completeFun) { 30 | requestApi(url, params, 'GET', sourceObj, successFun, failFun, completeFun) 31 | } 32 | 33 | /** 34 | * 请求API 35 | * @param {String} url 接口地址 36 | * @param {Object} params 请求的参数 37 | * @param {String} method 请求类型 38 | * @param {Object} sourceObj 来源对象 39 | * @param {Function} successFun 接口调用成功返回的回调函数 40 | * @param {Function} failFun 接口调用失败的回调函数 41 | * @param {Function} completeFun 接口调用结束的回调函数(调用成功、失败都会执行) 42 | */ 43 | function requestApi(url, params, method, sourceObj, successFun, failFun, completeFun) { 44 | if (method == 'POST') { 45 | var contentType = 'application/x-www-form-urlencoded' 46 | } else { 47 | var contentType = 'application/json' 48 | } 49 | wx.request({ 50 | url: url, 51 | method: method, 52 | data: params, 53 | header: {'Content-Type': contentType}, 54 | success: function (res) { 55 | typeof successFun == 'function' && successFun(res.data, sourceObj) 56 | }, 57 | fail: function (res) { 58 | typeof failFun == 'function' && failFun(res.data, sourceObj) 59 | }, 60 | complete: function (res) { 61 | typeof completeFun == 'function' && completeFun(res.data, sourceObj) 62 | } 63 | }) 64 | } 65 | 66 | module.exports = { 67 | requestPostApi, 68 | requestGetApi 69 | } 70 | --------------------------------------------------------------------------------