E企盈小程序营销工具技术服务商 热线:4006-838-530

微信小程序初级——快递查询(利用聚合数据接口开发)

E企盈小程序直播系统

前言:老王之前看的一些快递查询小程序的制作教程基本都是利用百度api store的接口进行开发的,然鹅…这个网站已经用不了了,so…教程里的一些部分就不是很适合,新手看起来会有些蓝瘦(比如本菜鸟hhhhh….)这里本渣渣试了下用聚合数据的接口开发简单的初级快递查询,在此写个小教程,方便大家参考,互相学习哈(这里写的是查顺丰的,查其他快递的同理,给com换个编号就阔以了)~~~大概做出来的如下图:开始制作: Step1:登录聚合数据官网:https://www.juhe.cn/,然后注册,实名认证后才能用接口(还要传身份证皂片…好烦)           注册且认证完成后,在网站找到:数据服务—生活常用—常用快递,如下图 然后在下面这个页面点蓝色框框免费试用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-viewindex.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.jsApp({  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”  }}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序初级——快递查询(利用聚合数据接口开发)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏