当前位置: 首页 > Web前端 > HTML

【云开发】零基础10分钟学会快速查询微信小程序,快速掌握微信小程序开发技巧(轮播图、API请求)

时间:2023-03-28 14:59:35 HTML

大家好,我是小兔僧,这次分享是10分钟零基础学会快速查询微信小程序,快速掌握微信小程序开发技巧。这篇文章比较基础,特别适合还没有开发微信小程序的童鞋们。我会详细解释一些概念和逻辑,并尽量用图片解释得更清楚。分享快乐!读完本文,至少要学会以下几点来了解微信开发者工具和云开发代码目录轮播图的实现使用wx.微信小程序上线全过程。先看效果:看完了快速查询微信小程序的效果,为了更好的理解和学习,我们先来了解一下微信开发者工具和云开发目录,用2张图来理解,哪个是更直观的微信开发者工具大致如下:云开发代码目录大致如下:cloudfunction是存储云函数的文件,每个云函数都有一个index.js,这个index.js是写代码的文件,其他文件可以忽略.页面文件存放页面文件。图中的索引是一个页面文件。这个页面文件由四个文件组成: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可以防止冒泡事件!由于篇幅有限,本文不专门讲云函数和冒泡事件的相关知识。如果不了解这两个知识点,不影响快查询微信小程序的开发。慢慢说吧。好了,正式进入快递查询微信小程序学习。@toc1,轮播图1.1,图解实现轮播图的业务逻辑从上图可以看出,一旦进入小程序,我们必须获取数据库banner表的轮播图,对吧,那么我们首先要有横幅数据库表,横幅表中还有几个轮播。那么如何在数据库中创建banner表,并将轮播图片上传到banner表中呢?云开发已经帮我们想好了,给我们提供了一个非常好用的cms管理后台。我们可以激活和使用它,如何激活和使用它?继续点击微信开发者工具左上角的“云开发”,进入云开发控制台,然后点击“更多”,选择“内容管理”,点击激活,设置账号密码,等待几分钟.激活成功后会有一个网址,复制这个网址到浏览器访问,输入刚才设置的账号密码,登录,然后创建后台数据管理项目,步骤如下:点击后中,开始创建Banner数据库表创建一个banner数据库表成功如下图:创建一个img字段用来存放轮播的网络地址,如下图:创建img字段成功后,开始上传轮播图,如下图:点击内容集,然后点击新建,然后上传,一张轮播图上传完成,可以继续上传第二张和第三张图。这个完成意味着我们的云数据库有一个轮播图片。即轮播图片存储在banner数据库表中,但是此时我们需要更改banner数据库表的访问权限,因为该数据库表默认是不允许任何用户获取访问权限的,如图下图:选择“所有用户都可以读取,只有创建者可以读写”,就是所有微信用户都可以访问轮播图。至此,轮播图我们就有了,开始写代码获取并显示。首先,在app.json文件中,我们定义了进入时显示的页面是index,因为是第一个进入微信小程序的,所以我们要马上获取轮播图并显示出来,对吧,然后我们如何这样一进来就开始执行获取轮播的代码,我们可以把获取轮播的代码写在index页面的onLoad()的生命周期函数中。这里引入生命周期函数,简单的说,一个生命周期函数ion是在某个时间点自动执行的函数。这个理解没问题。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也指向同一个对象letthat=thisdb.collection('banner').get({success:function(res){//获取成功//通过setData()方法赋值给data中的banner数组console.log(res)that.setData({banner:res.data})},fail(er){console.log('获取失败,所以执行了fail函数,也就是打印了我的语句')}})},我们在页面的data对象中定义了一个空的banner数组获取轮播图片后,给数据t中的banner数组赋值通过setData()方法。这时候横幅就有了价值,可以用来展示。继续看怎么显示呢?1.3.编写显示轮播的wxml和wxss代码wxml(使用官方的等组件显示):我们使用wx:for循环遍历js文件中的banner数组。wxss(定义轮播的样式,比如宽高):.banner{width:100%;显示:弹性;框大小:边框框;高度:350rpx;}.banner_image{宽度:100%;显示:弹性;框大小:边框框;height:500rpx;}2.请求快递查询数据接口2.1、申请极速数据快递查询接口我们首先申请极速数据快递查询接口,申请数据官网:https://www.jisuapi.com/按照官方提示注册登录,然后申请数据就可以了,不难!申请完数据后,我们需要登录微信公众平台,选择微信小程序登录,配置服务器请求域名,即把接口域名(https://api.jisuapi.com)的速度数据进去,如下图:点击开发管理,点击开发设置,点击服务器域名修改,添加请求域名,把https://api.jisuapi.com填进去即可。2.2.图形化查询快递业务逻辑2.3.编写用于请求数据的JavaScript代码。我们需要将快递单号传给速递数据,那么我们需要先获取用户输入的快递单号对吧,所以定义一个getnumInput()函数来获取用户输入的快递单号//获取用户输入的快递单号getnumInput:function(e){letthat=this;that.setData({num:e.detail.value,})},只要用户输入,就会触发getnumInput函数的执行。我们通过setData()方法将用户输入的快递单号赋值给data对象中的num变量,保存,输入完成后,用户点击查询,会触发chaxun()的执行functiontorequestdata//查询函数chaxun:function(){letthat=this;wx.showLoading({title:'Querying',})wx.request({url:'https://api.jisuapi.com/express/query',data:{type:'auto',number:that.data.nu??m,appkey:'ef1e557c16514d',//填写自己的速度数据的appkey},success:function(res){//使用console.log()方法打印下面接口返回的数据res看看whattypeofdataconsole.log(res)//定义一个arr数组,对数组进行处理,使数组成为vantUI步骤可接受的数组格式letarr=[]for(leti=0;ivan-stepssteps="{{steps}}"direction="vertical"active-color="#ee0a24"/>这个是vantUI官方提供的组件的固定写法,我们只需要改变其中的参数即可vant-steps组件根据需要。官方参数说明很多,大家可以看看:官方组件文档是这个网站(https://vant-contrib.gitee.io/vant-weapp/#/steps)代码写完了,如何启动微信小程序?首先点击微信开发者工具右上角的“上传”,然后根据提示输入信息进行上传。上传成功后,登录微信公众平台,在开发版“版本管理”中提交审核。审核通过后点击发布即可使用。具体可以按照官方提示操作,读写即可。这很简单。3.综上所述,代码基本写好了。如果需要学习源码,可以点此获取。本次分享主要是讲解简易版的快递查询。如果你想丰富界面和功能,可以学习这些知识。自己二次开发就好了。欢迎关注【小秃头和尚】微信公众号,回复“云开发训练营”领取进阶教程!学习完这篇文章,大家到本次训练营去了解会更容易!完欢迎关注微信公众号:小秃头和尚