微信小程序-查询快递

1、新建快速启动项目

2、在设置里面勾选不校验合法域名，以防编译报错

3、在app.json中改一下窗口表现：app.json—"navigationBarTitleText": "WeChat"改为"navigationBarTitleText": "快递查询"

显示如下：

4、申请api接口，可登录聚合数据网站上免费申请，其他平台也可

5、在app.js中添加方法 getExpressInfo（发起网络请求来调用申请的接口），两个参数 nu ，cb。nu为要查询的快递单号，cb为返回查找到的内容到data中的方法。

　　先在微信公众平台-API复制示例代码

修改代码如下：

data：请求的参数

header：设置请求的header

success：接口调用成功的回调函数

5、在index.wxml中添加输入框并绑定input方法，添加查询按钮，绑定事件btnClick，使点击按钮会调用app.js中的接口，在下方设置可以滚动显示的组件

<scroll-view scroll-y style="height:200px;">

{{item.remark}}||{{item.datetime}}

</view>

</scroll-view>

</view>

6、添加getUserInfo、btnClick和input函数

//index.js

//获取应用实例

const app = getApp()

// page 注册一个页面

Page({

data: {

motto: 'Hello World',

userInfo: {},

expressNu:null

// hasUserInfo: null,

// canIUse: wx.canIUse('button.open-type.getUserInfo')

//事件处理函数

bindViewTap: function() {

wx.navigateTo({

url: '../logs/logs'

})

onLoad: function () {

if (app.globalData.userInfo) {

this.setData({

userInfo: app.globalData.userInfo,

hasUserInfo: true

})

} else if (this.data.canIUse){

// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回

// 所以此处加入 callback 以防止这种情况

app.userInfoReadyCallback = res => {

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

})

}

} else {

// 在没有 open-type=getUserInfo 版本的兼容处理

wx.getUserInfo({

success: res => {

app.globalData.userInfo = res.userInfo

this.setData({

userInfo: res.userInfo,

hasUserInfo: true

})

}

})

}

getUserInfo: function(e) {

console.log(e)

app.globalData.userInfo = e.detail.userInfo

this.setData({

userInfo: e.detail.userInfo,

hasUserInfo: true

})

btnClick: function () {

var thispage=this;

app.getExpressInfo(this.data.expressNu,function(data){

console.log(data)

thispage.setData({expressInfo:data})

});

input: function(e){

this.setData({ expressNu:e.detail.value })

}

})

7、添加输入框的样式

/**index.wxss**/
input{border:1px solid gray;width: 90%;margin: 5%;padding:5px;
}

最后效果：

转载于:https://www.cnblogs.com/-xiao/p/10105504.html

微信小程序-查询快递相关推荐

微信小程序—查询快递
微信小程序-查询快递作者:秋名撰写时间:2019 年 8 月21日使用工具:微信开发者工具+聚合数据常用快递查询API 顺丰快递单号:https://www.kuaidi100.com/all/ ...
微信小程序实战—快递查询
微信小程序实战-快递查询案例需求:输入快递单号,点击查询按钮即可查看快递信息 api:阿里云全国快递物流查询关键代码: 数据定义(index.js) data: {motto: 'Hello Wo ...
【论文分享】基于微信小程序的快递取寄系统设计与实现
[论文分享]基于微信小程序的快递取寄系统设计与实现免责声明:本文章已收录至<电脑知识与技术>,仅供参考学习,切勿抄袭或他用,搬运请注明来源,谢谢各位小伙伴的配合. 文章编号:1009-3 ...
Uni-app前端开发|基于微信小程序的快递运输管理系统
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .CSDN内容合伙人.掘金特邀作者.阿里云博客专家.51CTO特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Jav ...
java基本微信小程序的快递代收派送系统 uniapp小程序
随着时代的发展,人们生活的节奏越来越快,但是快递已经成为人们生活中的一个重要组成部分,基本每个人都会收发快递,如果这些事情全部都到快递站点进行处理,是很浪费时间和精力的一件事情.为了能够让快递代收和派 ...
微信小程序实现快递查询功能(附源码)
目录效果图项目结构快递查询API获取微信小程序后台配置页面代码 express页面代码 logistics页面代码注意问题(使用必看) 留言效果图项目结构快递查询API获取这里我使 ...
微信小程序之快递查询（完整版）
一.简介: 点击按钮查看快递信息.我也在网上找了很多快递查询的例子,但是它们都不是很详细.在代码上他们都没错,但是在配置上却缺少了一些东西,导致我们这些白嫖党并没有什么用,对于程序中出现的一些错误无法 ...
微信小程序（快递查询）
阅读本博客需要对微信小程序有一个初步的理解可参照点我进行初步的了解效果图下面我们正式开始第一步查看目录结构并初步建立各个文件夹及在app.json中注册页面不注册无法显示我们这里只使用im ...
微信小程序入门--快递查询小程序的制作
最近在自学微信小程序开发,做了一个很垃圾的快递查询小demo,记录一下(=^ ^=) 开发前准备:微信开发者工具.快递查询的接口我用的快递查询接口是聚合数据的,地址如下https://www.juh ...

微信小程序-查询快递

微信小程序-查询快递相关推荐

最新文章

热门文章