关于javascript:云开发10分钟零基础学会做一个快递查询微信小程序快速掌握微信小程序开发技能轮播图API请求

大家好，我叫小秃僧
这次分享的是 10 分钟零根底学会做一个快递查问微信小程序，疾速把握开发微信小程序技能。

这篇文章偏根底，特地适宜还没有开发过微信小程序的童鞋，一些概念和逻辑我会讲细一点，尽可能用图阐明更分明。分享高兴！

学完这篇，起码学会以下几点

理解微信开发者工具和云开发代码目录
轮播图的实现
应用 wx.request 去申请数据
应用 vantUI 组件
学会开明并应用云开发提供的 cms 数据管理后盾
从编写代码到上线一个微信小程序的全过程。

先看看成果：

看完快递查问微信小程序的成果之后，为了更好地了解和学习，咱们先来理解一下微信开发者工具和云开发目录，用 2 张图来了解，比拟直观

微信开发者工具大略如下：

云开发代码目录大略如下：

cloudfunction 是寄存云函数的文件，每个云函数都有一个 index.js，这个 index.js 就是写代码的文件，其余文件能够不必管。
page 文件是寄存页面文件的，图中的 index 就是一个页面文件，这个页面文件是由 index.js、index.json、index.wxml、index.wxss 四个文件组成。很好了解

那 js、json、wxml、wxss 这四个是怎么相互通信的呢？来，画一张图给大家看，就明确了

这是 wxml 的局部代码，看看 wxml 与 js、wxss 的关系：

能够了解为用 class 来绑定 wxss 外面的款式，用 catchtap 来绑定 js 外面的函数，还能够用 bindtap 来绑定 js 外面的函数，catchtap 和 bindtap 的区别次要是 catchtap 能够避免冒泡事件！

篇幅无限，这篇文章就不具体讲云函数和冒泡事件的相干常识了，不懂这两个知识点也不会影响快递查问微信小程序的开发。往后缓缓讲。

好了，正式进入快递查问微信小程序学习。
@toc

由上图可知，一进入小程序就要获取数据库 banner 表的轮播图，对吧，那么咱们必定首先得有 banner 这个数据库表，还要 banner 表里有几张轮播图。

那如何在数据库里建设 banner 表和上传轮播图到 banner 表里呢？

云开发曾经替咱们想好了，提供给咱们一个很好用的 cms 治理后盾。咱们开明并应用即可，如何开明应用呢？持续

点击微信开发者工具的左上角“云开发”进入云开发控制台，再点击“更多”，抉择“内容治理”，点击开明，设置账号密码后，期待几分钟即可。

开明胜利后，会有一个网址，复制这个网址到浏览器拜访，如下图

输出刚刚本人设置好的账号密码，登录进去，而后创立一个后盾数据管理的我的项目，步骤如下图：

点击进来后，开始创立 banner 数据库表

创立 banner 数据库表胜利如下图：

创立 img 字段，用来寄存轮播图的网络地址，如下图：

创立 img 字段胜利后，开始上传轮播图，如下图：

点击内容汇合，再点击新建，而后上传即可，就实现了一张轮播图的上传，能够持续上传第二张、第三张 ……..

这个实现就意味着咱们的云数据库有了轮播图，就是 banner 数据库表里寄存了轮播图，但此时，咱们须要再去更改 banner 数据库表的拜访权限即可，因为数据库表默认是不给任何用户获取拜访的，如下图：

抉择“所有用户可读，仅创建者可读写”的意思就是微信所有用户都能够获取拜访轮播图的意思。

到这里，轮播图咱们有了，开始写代码获取和展现。

咱们首先在 app.json 文件外面咱们定义了一进来显示的页面是 index，因为排在第一个

一进入微信小程序，咱们就要立马去获取轮播图回来进行展现，对吧，那咱们怎么样能力一进来就开始执行获取轮播图的代码呢，咱们能够在 index 页面的 onLoad()这个生命周期函数里编写咱们获取轮播图的代码。

这里引入了一个生命周期函数概念，生命周期函数简略来了解就是在某个工夫点主动执行的一个函数而已，这么了解就能够了。

onLoad()函数就是一进来微信小程序页面主动执行且只执行一次的一个生命周期函数。所以，咱们就在 onLoad()函数里调用获取轮播图的函数。

你会发现其实咱们没有把获取轮播图的业务逻辑代码间接写在 onLoad 函数，而是只在 onload()函数里调用 get_banner()函数

调用的意思就是去执行的意思，调用哪个函数的意思就是去执行哪个函数。

所以，咱们只须要把代码写在 get_banner()函数外面，仅仅在 onLoad()生命周期函数里去调用 get_banner 就能够实现获取轮播图的性能了，对吧。

非常简单！！！持续

  /**
   * 页面的初始数据
   */
  data: {banner:[],
    num:'',
    steps:[],},

  /**
   * 生命周期函数 -- 监听页面加载
   */
  onLoad: function (options) {
       // 一进入页面就获取轮播图数据
       // 定义一个获取轮播图的 get_banner 函数
       this.get_banner()},
    // 获取轮播图
    get_banner(){// 这个 this 指向的是 Page()办法外面的整个对象，形如 Page({this})
      // 赋值给 that，that 也指向了同样的对象
      let that = this  
      db.collection('banner').get({success:function(res){
           // 获取胜利
           // 通过 setData()办法赋值给 data 外面的 banner 数组
           console.log(res)
           that.setData({banner:res.data})
        },
        fail(er){console.log('获取失败，所以执行 fail 函数了，也就是打印了我这句话')
        }
      })
  },

咱们在页面的 data 对象外面定义了一个 banner 空数组，获取轮播图后，通过 setData()办法赋值给 data 外面的 banner 数组，此时，banner 是有值了，能够用来展现了，持续往下看如何展现？

wxml（应用官网的 <swiper> 等等组件来展现）：

<!-- 轮播图 -->
<swiper class="banner" indicator-dots autoplay indicator-active-color="#fbbd08" circular>
      <block wx:for="{{banner}}" wx:key="index">
            <swiper-item>
                  <image lazy-load src="{{item.img}}" class="banner_image" />
            </swiper-item>
      </block>
</swiper>

咱们通过应用 wx:for 循环，把 js 文件外面的 banner 数组遍历进去即可。
wxss(定义轮播图款式，比方宽、高)：

.banner {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  height: 350rpx;
}

.banner_image {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  height: 500rpx;
}

咱们先申请极速数据的快递查问接口，
申请数据的官方网站：https://www.jisuapi.com/

本人依照官网提醒去注册登录，而后申请数据就行，这个不难！

申请数据后，咱们须要登录微信公众平台，抉择微信小程序登录，配置一下服务器申请域名，就是把极速数据的接口域名（https://api.jisuapi.com）放进去即可，如下图：

点击开发治理，再点击开发设置，再点击服务器域名批改，增加 request 域名即可，就是把 https://api.jisuapi.com 放入即可。

咱们须要把快递单号传给极速数据，那咱们须要先获取用户输出的快递单号，对吧，所以定义一个 getnumInput()函数来获取用户输出的快递单号

  // 获取用户输出的快递单号
  getnumInput:function(e){
    let that = this;
    that.setData({num:e.detail.value,})
  },

只有用户输出，就会触发执行 getnumInput 函数，咱们通过 setData()办法把用户输出的快递单号赋值给 data 对象外面的 num 变量，保存起来

输出实现后，用户点击查问，会触发执行 chaxun()函数，去申请数据

 // 查问函数
  chaxun:function(){
    let that = this;
    wx.showLoading({title: '正在查问',})
    wx.request({
      url: 'https://api.jisuapi.com/express/query',
      data:{
         type:'auto',
         number:that.data.num,
         appkey:'ef1e557c16514d',  // 填入本人极速数据的 appkey
      },
      success:function(res){// 应用 console.log()办法把接口返回来的数据 res 打印在上面，看看是什么类型的数据
        console.log(res)
       
        // 定义一个 arr 数组，解决数组，让数组变成 vantUI 的 steps 能承受的数组格局
        let arr = []
        for(let i = 0;i<res.data.result.list.length;i++){let obj = {}
          obj.text = res.data.result.list[i].status
          obj.desc = res.data.result.list[i].time
          arr.push(obj)
       }
       // 打印查看解决是否正确, 正确即可赋值
       console.log(arr)
       that.setData({steps:arr})
        wx.hideLoading();},
      fail(er){console.log(er)
      }
    })

  },

展现快递物流状况，咱们懒得写 wxss 款式了，能够间接应用第三方写好的 UI 组件款式，这里咱们应用了 vantUI 组件，具体怎么应用 vantUI 呢？

首先，咱们先在 app.json 文件外面引入咱们须要 vantUI 的 vant-steps 组件，如下图：

  "usingComponents": {"van-steps": "vant/steps/index"},

这里咱们只用到了 vant-steps 组件，所以咱们只需引入 vant-steps 组件，而后在 index.wxml 外面应用即可

<!-- 应用 vantUI 的 van-steps 组件简略实现快递状况 -->
<van-steps
  steps="{{steps}}"
  direction="vertical"
  active-color="#ee0a24"
/>

这个是 vantUI 官网提供给咱们的组件固定写法，咱们只须要按需更改 vant-steps 组件外面的参数即可。

官网有很多参数阐明，大家能够看看：

官网组件的应用阐明文档是这个网址（https://vant-contrib.gitee.io/vant-weapp/#/steps）

代码写完了，该如何上线微信小程序呢？首先点击微信开发者工具的右上角“上传”，而后依照提醒输出信息上传即可，
上传胜利后，登录微信公众平台，在“版本治理”的开发版提交审核，审核通过后点击公布即可应用。具体能够依照官网的提醒操作即可，识字就行，非常简单哈。

到这里，代码根本编写实现了哈，须要源码学习能够点击这里获取

这期分享次要是解说简易版的快递查问，如果想要丰盛一点的界面和性能，能够学完这期常识后，本人去进行二次开发就行。

欢送关注【小秃僧】微信公众号，回复“云开发训练营”支付进阶教程哦！学完这篇，大家再去看这个训练营就更加容易了解了！
end

欢送关注微信公众号：小秃僧

关于javascript:云开发10分钟零基础学会做一个快递查询微信小程序快速掌握微信小程序开发技能轮播图API请求

1、轮播图

1.1、图解实现轮播图的业务逻辑

1.2、写获取轮播图的 JavaScript 代码

1.3、写展现轮播图的 wxml、wxss 代码

2、申请快递查问的数据接口

2.1、申请极速数据的快递查问接口

2.2、图解查问快递的业务逻辑

2.3、写申请数据的 JavaScript 代码

2.4、写展现数据的 wxml 代码

3、总结