登录
转载

微信小程序-隔壁老王做出一个快递查询功能

专栏API的典型场景应用
发布于 2021-02-21 阅读 27
  • 程序员
  • 微信小程序
转载
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-b5506197d8.css">

前言:老王之前看的一些快递查询小程序的制作教程基本都是利用百度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),先用微信登录,然后点小程序项目

image.png

 然后我们新建一个项目,选好目录,AppID点使用测试号(自己如果注册过,用自己的也OK)

image.png

我们要把设置中不校验合法域名选项勾选,以防编译时报错,如下图:

image.png

 

 Step3:我们首先在app.json中改一下窗口表现:app.json—"navigationBarTitleText": "WeChat"改为"navigationBarTitleText": "快递查询"

image.png

 Step4:接下来,我们改一下app.js里的东东。添加方法getExpressInfo,发起网络请求来调用我们之前申请的接口,设置两个变量,一个nu为要查询的快递单号,一个cb为返回查找到的内容到data中的方法。在官网API文档中copy一波代码,做一下修改。这时候我们需要用到刚才的放在一边的网页了。注意界面中我划线的几处:

image.png

我们的url就按照请求示例进行修改,key要在个人中心-我的数据-接口名称上面查看,请求参数说明中必填项为否的可以省略不填com我们要在刚才查看api的下方找到快递公司代号

 key在这里找(手动打码):

 改完后如下图(再来手动打码):

 Step5:下面我们该改一下index文件了。在index.wxml中更改界面样式,我们把最外层的<view class></view>组件留下,其余删掉。先添加一个输入框,设置一下输入框的样式(在index.wxss中设置),同时绑定一个input事件(input方法在index.js中设置,绑定的方法都在js文件中设置),读入输入的内容(即订单号)。然后添加一个查询按钮,绑定事件btnClick,使之一点击就会调用app.js中的接口,查询数据。在下方添加一个可以滚动显示的组件,节省空间,用滚动条查看快递信息。

附:下面献上各文件中的代码供参考:

index.wxml:

  1. <!--index.wxml-->
  2. <view class="container">
  3. <input placeholder="请输入快递单号" bindinput="input"/>
  4. <button type="primary" bindtap='btnClick'>查询</button>
  5. </view>
  6. <scroll-view scroll-y style="height: 200px;" >
  7. <view wx:for="{{expressInfo.result.list}}">
  8. {{item.datetime}} || {{item.remark}}
  9. </view>
  10. </scroll-view>

index.js:

  1. //index.js
  2. //获取应用实例
  3. const app = getApp()
  4. Page({
  5. data: {
  6. expressNu:null,
  7. expressInfo:null,
  8. motto: 'Hello World',
  9. userInfo: {},
  10. hasUserInfo: false,
  11. canIUse: wx.canIUse('button.open-type.getUserInfo')
  12. },
  13. //事件处理函数
  14. bindViewTap: function() {
  15. wx.navigateTo({
  16. url: '../logs/logs'
  17. })
  18. },
  19. onLoad: function () {
  20. if (app.globalData.userInfo) {
  21. this.setData({
  22. userInfo: app.globalData.userInfo,
  23. hasUserInfo: true
  24. })
  25. } else if (this.data.canIUse){
  26. // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
  27. // 所以此处加入 callback 以防止这种情况
  28. app.userInfoReadyCallback = res => {
  29. this.setData({
  30. userInfo: res.userInfo,
  31. hasUserInfo: true
  32. })
  33. }
  34. } else {
  35. // 在没有 open-type=getUserInfo 版本的兼容处理
  36. wx.getUserInfo({
  37. success: res => {
  38. app.globalData.userInfo = res.userInfo
  39. this.setData({
  40. userInfo: res.userInfo,
  41. hasUserInfo: true
  42. })
  43. }
  44. })
  45. }
  46. },
  47. getUserInfo: function(e) {
  48. console.log(e)
  49. app.globalData.userInfo = e.detail.userInfo
  50. this.setData({
  51. userInfo: e.detail.userInfo,
  52. hasUserInfo: true
  53. })
  54. },
  55. input:function(e){
  56. console.log(e)
  57. this.setData({expressNu:e.detail.value})
  58. },
  59. btnClick:function(){
  60. var thispage=this;
  61. app.getExpressInfo(this.data.expressNu,function(data){
  62. console.log(data)
  63. thispage.setData({expressInfo:data})
  64. });
  65. }
  66. })

index.wxss:

  1. /**index.wxss**/
  2. input{
  3. border:1px solid red;
  4. width:90%;
  5. margin: 5%;
  6. padding: 5px;
  7. }

 app.js:

  1. //app.js
  2. App({
  3. getExpressInfo: function (nu, cb) {
  4. wx.request({
  5. url: 'https://v.juhe.cn/exp/index?key=此处替换为你自己的&com=sf&no='+nu, //仅为示例,并非真实的接口地址
  6. data: {
  7. x: '',
  8. y: ''
  9. },
  10. header: {
  11. 'key': '此处替换为你自己的' // 默认值
  12. },
  13. success: function (res) {
  14. //console.log(res.data)
  15. cb(res.data)
  16. }
  17. })
  18. },
  19. onLaunch: function () {
  20. // 展示本地存储能力
  21. var logs = wx.getStorageSync('logs') || []
  22. logs.unshift(Date.now())
  23. wx.setStorageSync('logs', logs)
  24. // 登录
  25. wx.login({
  26. success: res => {
  27. // 发送 res.code 到后台换取 openId, sessionKey, unionId
  28. }
  29. })
  30. // 获取用户信息
  31. wx.getSetting({
  32. success: res => {
  33. if (res.authSetting['scope.userInfo']) {
  34. // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
  35. wx.getUserInfo({
  36. success: res => {
  37. // 可以将 res 发送给后台解码出 unionId
  38. this.globalData.userInfo = res.userInfo
  39. // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
  40. // 所以此处加入 callback 以防止这种情况
  41. if (this.userInfoReadyCallback) {
  42. this.userInfoReadyCallback(res)
  43. }
  44. }
  45. })
  46. }
  47. }
  48. })
  49. },
  50. globalData: {
  51. userInfo: null
  52. }
  53. })

 app.json:

  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/logs/logs"
  5. ],
  6. "window":{
  7. "backgroundTextStyle":"light",
  8. "navigationBarBackgroundColor": "#fff",
  9. "navigationBarTitleText": "快递查询",
  10. "navigationBarTextStyle":"black"
  11. }
  12. }

 

评论区

励志做一条安静的鳄鱼。

0

0

0