1.工程目录

需要改动的文件上图已经标出来了

2.代码

index.js

// index.js
// 获取应用实例
const app = getApp()Page({onShareAppMessage() {return {title: 'cover-view',path: 'page/component/pages/cover-view/cover-view'}},data: {/*经纬度*/latitude: 30.658619,longitude: 104.188941,/*图标*/iconSize: [20, 30, 40, 50, 60, 70],iconColor: ['red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple' ],iconType: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'],imageUrl:"http://81.71.14.198/meixiangdao.jpg"  ,motto: 'Hello World',userInfo:{},expressNu:null,expressNu1:null,expressNu2:null,expressNu3:null,expressNu4:null,expressNu5:null,expressNu6:null,expressNu7:null,expressNu8:null,expressNu9:null,expressNu10:null,expressNu11:null,expressNu12:null,expressNu13:null,expressNu14:null,expressNu15:null,expressNu16:null,expressNu17:null,expressNu18:null,expressNu19:null,expressInfo:null,expressInfo1:null,expressInfo2:null},// 事件处理函数bindViewTap() {wx.navigateTo({url: '../logs/logs'})},input:function(e){this.setData({expressNu:e.detail.value})},btnClick:function(){// console.log(this.data.expressNu)var thispage = this;app.getExpressInfo(this.data.expressNu,function(data){console.log(data)thispage.setData({expressInfo:data})});},input1:function(e){this.setData({expressNu1:e.detail.value})},  input2:function(e){this.setData({expressNu2:e.detail.value})}, input3:function(e){this.setData({expressNu3:e.detail.value})},input4:function(e){this.setData({expressNu4:e.detail.value})},  input5:function(e){this.setData({expressNu5:e.detail.value})},  input6:function(e){this.setData({expressNu6:e.detail.value})},  input7:function(e){this.setData({expressNu7:e.detail.value})},  input8:function(e){this.setData({expressNu8:e.detail.value})},  input9:function(e){this.setData({expressNu9:e.detail.value})},  input10:function(e){this.setData({expressNu10:e.detail.value})},  input11:function(e){this.setData({expressNu11:e.detail.value})},  input12:function(e){this.setData({expressNu12:e.detail.value})},  input13:function(e){this.setData({expressNu13:e.detail.value})},  input14:function(e){this.setData({expressNu14:e.detail.value})},  input15:function(e){this.setData({expressNu15:e.detail.value})}, input16:function(e){this.setData({expressNu16:e.detail.value})},btnClick1:function(){// console.log(this.data.expressNu)var thispage1 = this;app.getExpressInfo1(this.data.expressNu1,this.data.expressNu2,this.data.expressNu3,this.data.expressNu4,this.data.expressNu5,this.data.expressNu6,this.data.expressNu7,this.data.expressNu8,this.data.expressNu9,this.data.expressNu10,this.data.expressNu11,this.data.expressNu12,this.data.expressNu13,this.data.expressNu14,this.data.expressNu15,this.data.expressNu16,function(data){//  app.getExpressInfo1('四川省成都市龙泉驿区十陵镇成都大学','http://xxx.com/calback','123456','09:00','10:00','黑龙江省佳木斯市汤原县鹤立林业局','2','haha','1777789456','后天','jia','xuexiao','SHIPPER','shunfeng','文件','13845460366',function(data){//  app.getExpressInfo1(function(data){console.log(data)thispage1.setData({expressInfo1:data})});},
/*取消订单*/
input17:function(e){this.setData({expressNu17:e.detail.value})
},
input18:function(e){this.setData({expressNu18:e.detail.value})
},
input19:function(e){this.setData({expressNu19:e.detail.value})
},
btnClick2:function(){var thispage2 = this;app.getExpressInfo2(this.data.expressNu17,this.data.expressNu18,this.data.expressNu19,function(data){console.log(data)thispage2.setData({expressInfo2:data})});},onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}},})

index.wxml

  --------------------sf9090的快递服务--------------
<view style="white-space:pre-wrap"><image src="{{imageUrl}}" mode="aspectFill">
</image>
二维码关注微信公众号！！！更多惊喜
</view>
<view class="container"style="flex-direction:row;"><view class="page-body"><view class="page-section page-section-gap"><mapstyle="width: 1500%; height: 300px;"latitude="{{latitude}}"longitude="{{longitude}}">     </map></view></view>
</view><view class="container1"><br style="font-size:20px" > 查询某地快递运力\n</br>    <input placeholder="最大输入长度为10" bindinput="input" /> <button type="primary" bindtap = "btnClick"style="position:relative;right:10%; padding:5%;width:100%;height:10%;font-size:80%;background-color:#07c160;color:white;margin-bottom:10%;">查询</button><scroll-view scroll-y="true" style="height:300px;">【{{expressInfo.message}}】<view wx:for="{{expressInfo.data.details}}" > {{item.comCode}}【{{item.type}}】</view></scroll-view>           </view>
<view class="container2"><br style="font-size:20px" >寄件</br><text>\n</text>收件人完整地址 <input placeholder="收件人完整地址，包含省、市、区、街道等" bindinput="input1" /> 订单信息回调地址  <input placeholder="订单信息回调地址" bindinput="input2" /> 随机数  <input placeholder="随机数" bindinput="input3" /> 预约时间    <input placeholder="预约起始时间（HH:mm），例如：09:00" bindinput="input4" /> 预约截止时间    <input placeholder="预约截止时间（HH:mm），例如：10:00" bindinput="input5" /> 寄件人所在完整地址     <input placeholder="寄件人所在完整地址，包含省、市、区、街道等" bindinput="input6" /> 物品总重量     <input placeholder="物品总重量KG，例：1.5，单位kg" bindinput="input7" /> 备注      <input placeholder="备注" bindinput="input8" /> 收件人手机号  <input placeholder="收件人的手机号，手机号和电话号二者其一必填" bindinput="input9" /> 预约日期  <input placeholder="预约日期，例如：今天/明天/后天" bindinput="input10" /> 寄件人姓名 <input placeholder="寄件人姓名" bindinput="inpu11" /> 收件人姓名<input placeholder="收件人姓名" bindinput="input12" /> 支付方式<input placeholder="支付方式，SHIPPER: 寄付（默认），CONSIGNEE: 到付" bindinput="input13" /> 快递公司编码<input placeholder="快递公司的编码，一律用小写字母" bindinput="input14" /> 物品种类    <input placeholder="物品名称,例：文件（公司编码为jd时，cargo必填）" bindinput="input15" /> 寄件人手机号   <input placeholder="寄件人的手机号，手机号和电话号二者其一必填" bindinput="input16" /> <button type="primary" bindtap = "btnClick1"style="position:relative;right:10%; padding:5%;width:100%;height:10%;font-size:80%;background-color:#07c160;color:white;margin-bottom:10%;">寄件</button><scroll-view scroll-y="true" style="height:300px;"><view>[taskId:   {{expressInfo1.data.detail.taskId}} ] [orderId:{{expressInfo1.data.detail.orderId}}][messages:{{expressInfo1.message}}]</view></scroll-view>                         <br style="font-size:20px" > 快递订单取消</br>        <text>\n</text>cancelMsg:  <input placeholder="取消原因" bindinput="input17" /> orderId:   <input placeholder="订单ID" bindinput="input18" /> taskID:        <input placeholder="任务ID" bindinput="input19" /> <button type="primary" bindtap = "btnClick2"style="position:relative;right:10%; padding:5%;width:100%;height:10%;font-size:80%;background-color:#07c160;color:white;margin-bottom:10%;">确定</button><scroll-view scroll-y="true" style="height:300px;"><view > {{expressInfo2.data.result}}【{{expressInfo2.data.description}}】</view></scroll-view>                     <view class="icon-box"><icon class="icon-box-img" type="success" size="93"></icon><view class="icon-box-ctn"><view class="icon-box-title">成功</view><view class="icon-box-desc">用于表示操作顺利完成</view></view></view></view>

index.wxss

/* pages/chakuaidi/kuaidi.wxss */
input{border:2px solid red;width:90%;margin:5%;padding:5px
}
.container1{height: 100%;width:100%;background-color:beige;
}
.container2{height: 100%;width:100%;background-color:beige;
}
.container3{height: 100%;width:100%;background-color:beige;
}
.cover-view {position: absolute;top: calc(50% - 150rpx);left: calc(50% - 300rpx);/* opacity: .7; */
}.flex-wrp{display:flex;
}.flex-item{width: 200rpx;height: 300rpx;font-size: 26rpx;
}.demo-text-1 {background: rgba(26, 173, 25, 0.7);
}.demo-text-2 {background: rgba(39, 130, 215, 0.7);
}.demo-text-3 {background: rgba(255, 255, 255, 0.7);
}

app.js

// app.js
App({onLaunch() {// 展示本地存储能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})},/*快递运力查询*/getExpressInfo:function(address,cb){wx.request({url: 'http://gwgp-wat4svkuskr.n.bdcloudapi.com/kdyl/get?address='+address, //仅为示例，并非真实的接口地址data: {x: '',y: ''}, header: {'Content-Type': 'application/json;charset=UTF-8' ,// 默认值'X-Bce-Signature':'AppCode/8a6b23ce2a194b689c7afd96ae539bb8'},success (res) {cb(res.data)//  console.log(res.data)}})},/*寄快递*/getExpressInfo1:function(recManPrintAddr,callBackUrl,salt,pickupStartTime,pickupEndTime,sendManPrintAddr,weight,remark,recManMobile,dayType,sendManName,recManName,payment,comCode,cargo,sendManMobile,cb1){wx.request({url: 'http://gwgp-wat4svkuskr.n.bdcloudapi.com/kdjj?recManPrintAddr='+recManPrintAddr+'&callBackUrl='+callBackUrl+'&salt='+salt+'&pickupStartTime='+pickupStartTime+'&pickupEndTime='+pickupEndTime+'&sendManPrintAddr='+sendManPrintAddr+'&weight='+weight+'&remark='+remark+'&recManMobile='+recManMobile+'&dayType='+dayType+'&sendManName='+sendManName+'&recManName='+recManName+'&payment='+payment+'&comCode='+comCode+'&cargo='+cargo+'&sendManMobile='+sendManMobile, //仅为示例，并非真实的接口地址//url:'http://gwgp-wat4svkuskr.n.bdcloudapi.com/kdjj?recManPrintAddr=天安门前大街xx号xx栋&callBackUrl=http://xxx.com/calback&salt=123456&pickupStartTime=09:00&pickupEndTime=10:00&sendManPrintAddr=贵阳市**区**街道**号&weight=1&remark=xxx&recManMobile=131********&dayType=今天&sendManName=李四&recManName=张三&payment=SHIPPER&comCode=shunfeng&cargo=文件&sendManMobile=130********',data: {x: '',y: ''}, method:'post',//header: {'Content-Type': 'application/json;charset=UTF-8' ,// 默认值'X-Bce-Signature':'AppCode/8a6b23ce2a194b689c7afd96ae539bb8'},success (res) {cb1(res.data)//  console.log(res.data)}})},
/*取消订单*/getExpressInfo2:function(cancelMsg,orderId,taskId,cb){wx.request({url: 'http://gwgp-wat4svkuskr.n.bdcloudapi.com/order_cancel/get?cancelMsg='+cancelMsg+'&orderId='+orderId+'&taskId='+taskId, //仅为示例，并非真实的接口地址data: {x: '',y: ''}, header: {'Content-Type': 'application/json;charset=UTF-8' ,// 默认值'X-Bce-Signature':'AppCode/8a6b23ce2a194b689c7afd96ae539bb8'},success (res) {cb(res.data)//  console.log(res.data)}})},globalData: {userInfo: null}
})

3.结果

更多讲解观看文章

微信小程序开发之快递服务专栏（快递运力查询、寄快递、取消订单）

也就是笔者的下一篇文章

6.获取资源

【获取资源】

1.资源链接：资源获取
2.微信后台回复：快递小程序

【关注微信公众号一起来交流】

微信小程序开发之快递服务专栏（快递运力查询、寄快递、取消订单）代码篇相关推荐

微信小程序开发公司的技术发展及行业现状
微信小程序开发公司的技术发展及行业现状作者:北京朗毓圣元科技近些年,伴随着互联网,尤其是移动互联网的蓬勃发展,带动了微信小程序开发公司数量的爆炸式增长,依托于微信小程序的丰富应用场景,可以满足传统 ...
1个月uni-app微信小程序开发上线实战专栏介绍
一.专栏介绍: <uni-app开发微信小程序1个月上线实战>,目标带领1000位同学成功开发上线一个自己的个人小程序! 作者介绍:国服第二切图仔--资深前端开发工程师,具有六年以上的前端 ...
微信小程序开发实战3 使用Go语言开发Web服务
3.使用Go语言开发Web服务微信小程序提供了一系列服务端API用以配合小程序前端来完成相应的功能,以及帮助开发者进行各类数据分析.业务管理和信息查询等操作.例如小程序用户信息的获取就是通过服务端A ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
文章目录前言一.功能说明二.设置界面代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 三.参数控制逻辑代码实现 1.自动跳转卡片 2.自动播放声音专题文章链接前言案例的 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（四）：搭建服务端数据库
文章目录前言一.连接主机数据库二.创建数据表结构三.准备测试数据专题文章链接前言做完了前面的注册申请工作,今天我们开始进行程序的开发. 这篇文章,我们要完成的是服务端数据库表的创建. 一 ...
微信小程序开发环境（阿里云服务搭建+可运行的demo）
最近微信小程序异常火爆,很多人在学习,下面带着大家搭建下微信小程序的调试环境(client+server),并调试一套demo源码(JavaScript和node.js基础即可,微信推荐使用的语言,无 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（八）：开发小程序卡片类型呈现功能
文章目录前言一.功能说明二.代码实现 1.创建主界面Page 2.WXML 2.JS 3.WXSS 4.合法域名校验 5.图片缓存刷新问题的解决小结专题文章链接前言本篇文章,将对照专题案 ...
最详细的【微信小程序+阿里云Web服务】开发部署指引（一）：准备开始
文章目录前言案例说明专题文章链接前言作为一个程序开发的老鸟,有时候想使用微信小程序,开发实现一些实用的小功能.由于小程序往往需要有后台数据的支持,所以一般还需要搭建一个Server服务器,来 ...
【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

微信小程序开发之快递服务专栏（快递运力查询、寄快递、取消订单）代码篇

目录

1.工程目录

2.代码

3.结果

6.获取资源

微信小程序开发之快递服务专栏（快递运力查询、寄快递、取消订单）代码篇相关推荐

最新文章

热门文章