大家好，我叫小秃僧
这次分享的是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
1、轮播图
1.1、图解实现轮播图的业务逻辑
由上图可知，一进入小程序就要获取数据库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就能够实现获取轮播图的性能了，对吧。
非常简单！！！持续
1.2、写获取轮播图的JavaScript代码
/** * 页面的初始数据 */ 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是有值了，能够用来展现了，持续往下看如何展现？
1.3、写展现轮播图的wxml、wxss代码
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;}2、申请快递查问的数据接口
2.1、申请极速数据的快递查问接口
咱们先申请极速数据的快递查问接口，
申请数据的官方网站：https://www.jisuapi.com/
本人依照官网提醒去注册登录，而后申请数据就行，这个不难！
申请数据后，咱们须要登录微信公众平台，抉择微信小程序登录，配置一下服务器申请域名，就是把极速数据的接口域名（https://api.jisuapi.com）放进去即可，如下图：
点击开发治理，再点击开发设置，再点击服务器域名批改，增加request域名即可，就是把https://api.jisuapi.com放入即可。
2.2、图解查问快递的业务逻辑
2.3、写申请数据的JavaScript代码
咱们须要把快递单号传给极速数据，那咱们须要先获取用户输出的快递单号，对吧，所以定义一个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) } }) },2.4、写展现数据的wxml代码
展现快递物流状况，咱们懒得写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）
代码写完了，该如何上线微信小程序呢？ 首先点击微信开发者工具的右上角“上传”，而后依照提醒输出信息上传即可，
上传胜利后，登录微信公众平台，在“版本治理”的开发版提交审核，审核通过后点击公布即可应用。具体能够依照官网的提醒操作即可，识字就行，非常简单哈。
3、总结
到这里，代码根本编写实现了哈，须要源码学习能够点击这里获取
这期分享次要是解说简易版的快递查问，如果想要丰盛一点的界面和性能，能够学完这期常识后，本人去进行二次开发就行。
欢送关注【小秃僧】微信公众号，回复“云开发训练营”支付进阶教程哦！学完这篇，大家再去看这个训练营就更加容易了解了！
end
欢送关注微信公众号：小秃僧