大家好,我是小兔僧,这次分享是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(使用官方的
