前言:老王之前看的一些快递查询小程序的制作教程基本都是利用百度api store的接口进行开发的,然鹅...这个网站已经用不了了,so...教程里的一些部分就不是很适合,新手看起来会有些蓝瘦(比如本菜鸟hhhhh....)这里本渣渣试了下用聚合数据的接口开发简单的初级快递查询,在此写个小教程,方便大家参考,互相学习哈(这里写的是查顺丰的,查其他快递的同理,给com换个编号就阔以了)~~~
大概做出来的如下图:
![image.png](https://statics.sdk.cn/articles/img/202102/1f54c9adc7eaf3795985967134_1001101.png?x-oss-process=style/thumb)开始制作:
Step1:登录聚合数据官网:https://www.juhe.cn/,然后注册,实名认证后才能用接口
注册且认证完成后,在网站找到:数据服务—生活常用—常用快递,如下图
![image.png](https://statics.sdk.cn/articles/img/202102/1f54c9adc7eaf3792822435271_1001101.png?x-oss-process=style/thumb)
然后在下面这个页面点蓝色框框免费试用100次(由于我之前已经申请完试用了,这里显示的就是续费了)
申请完接口,我们先把这个网站放一边,一会儿会用到。
Step2:打开微信开发者工具(下载地址附上:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html),先用微信登录,然后点小程序项目
然后我们新建一个项目,选好目录,AppID点使用测试号(自己如果注册过,用自己的也OK)
我们要把设置中不校验合法域名选项勾选,以防编译时报错,如下图:
Step3:我们首先在app.json中改一下窗口表现:app.json—"navigationBarTitleText": "WeChat"改为"navigationBarTitleText": "快递查询"
Step4:接下来,我们改一下app.js里的东东。添加方法getExpressInfo,发起网络请求来调用我们之前申请的接口,设置两个变量,一个nu为要查询的快递单号,一个cb为返回查找到的内容到data中的方法。在官网API文档中copy一波代码,做一下修改。这时候我们需要用到刚才的放在一边的网页了。注意界面中我划线的几处:
我们的url就按照请求示例进行修改,key要在个人中心-我的数据-接口名称上面查看,请求参数说明中必填项为否的可以省略不填com我们要在刚才查看api的下方找到快递公司代号
key在这里找(手动打码):
改完后如下图(再来手动打码):
Step5:下面我们该改一下index文件了。在index.wxml中更改界面样式,我们把最外层的<view class></view>组件留下,其余删掉。先添加一个输入框,设置一下输入框的样式(在index.wxss中设置),同时绑定一个input事件(input方法在index.js中设置,绑定的方法都在js文件中设置),读入输入的内容(即订单号)。然后添加一个查询按钮,绑定事件btnClick,使之一点击就会调用app.js中的接口,查询数据。在下方添加一个可以滚动显示的组件,节省空间,用滚动条查看快递信息。
附:下面献上各文件中的代码供参考:
index.wxml:
- <!--index.wxml-->
- <view class="container">
- <input placeholder="请输入快递单号" bindinput="input"/>
- <button type="primary" bindtap='btnClick'>查询</button>
- </view>
-
- <scroll-view scroll-y style="height: 200px;" >
- <view wx:for="{{expressInfo.result.list}}">
- {{item.datetime}} || {{item.remark}}
- </view>
- </scroll-view>
index.js:
- //index.js
- //获取应用实例
- const app = getApp()
-
- Page({
- data: {
- expressNu:null,
- expressInfo:null,
- motto: 'Hello World',
- userInfo: {},
- hasUserInfo: false,
- 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
- })
- },
- input:function(e){
- console.log(e)
- this.setData({expressNu:e.detail.value})
- },
- btnClick:function(){
- var thispage=this;
- app.getExpressInfo(this.data.expressNu,function(data){
- console.log(data)
- thispage.setData({expressInfo:data})
- });
- }
- })
index.wxss:
- /**index.wxss**/
- input{
- border:1px solid red;
- width:90%;
- margin: 5%;
- padding: 5px;
- }
app.js:
- //app.js
- App({
- getExpressInfo: function (nu, cb) {
- wx.request({
- url: 'https://v.juhe.cn/exp/index?key=此处替换为你自己的&com=sf&no='+nu, //仅为示例,并非真实的接口地址
- data: {
- x: '',
- y: ''
- },
- header: {
- 'key': '此处替换为你自己的' // 默认值
- },
- success: function (res) {
- //console.log(res.data)
- cb(res.data)
- }
- })
- },
-
- onLaunch: function () {
- // 展示本地存储能力
- var logs = wx.getStorageSync('logs') || []
- logs.unshift(Date.now())
- wx.setStorageSync('logs', logs)
-
- // 登录
- wx.login({
- success: res => {
- // 发送 res.code 到后台换取 openId, sessionKey, unionId
- }
- })
- // 获取用户信息
- wx.getSetting({
- success: res => {
- if (res.authSetting['scope.userInfo']) {
- // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
- wx.getUserInfo({
- success: res => {
- // 可以将 res 发送给后台解码出 unionId
- this.globalData.userInfo = res.userInfo
-
- // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
- // 所以此处加入 callback 以防止这种情况
- if (this.userInfoReadyCallback) {
- this.userInfoReadyCallback(res)
- }
- }
- })
- }
- }
- })
- },
- globalData: {
- userInfo: null
- }
- })
app.json:
- {
- "pages":[
- "pages/index/index",
- "pages/logs/logs"
- ],
- "window":{
- "backgroundTextStyle":"light",
- "navigationBarBackgroundColor": "#fff",
- "navigationBarTitleText": "快递查询",
- "navigationBarTextStyle":"black"
- }
- }