这篇主要是给大家讲解下小程序整体的代码结构形式,那么事不宜迟,Let's go.
首先打开项目(看吧,项目又自己跑好了),我们可以这样简单的理解,小程序对应的一个页面就是由👇的四个文件组成(这个理解只是前期帮助小白们适应下代码,实际上如果加上组件,就不是这么个回事)
.wxml文件就是俗称的html(什么!没听说过,出门右转百度谢谢)在小程序的展示(大概先这么理解吧...),简单来说就是画页面的,然后这个文件配合.wxss文件(也就是相当于css文件)就能制作出各种精美的页面了,那么到这来,这两文件就介绍完毕了(wtf,黑人问号,这啥都没讲),主要这里涉及到两个文件是写一个页面的主要文件,如果要展开说明,那么又要开辟一个非常长的篇幅,所以超级小白们自己百度前端基础知识html+css吧
(大概过了一万年后)经过自己对于html+css的自学,是不是对画页面有了非常深刻的理解了呢,那么现在来说下.js文件,html+css负责页面内容的展示,那么页面上要处理的一些逻辑或者数据要在哪里处理呢,就是在这个js文件里面,很遗憾这块的知识怕比html+css还要多,那么请超级小白绕道百度自行学习js的知识吧.
那么接下来我们来看看index.json文件,json文件是整个模块的配置文件,那么点进来一看,只写了一个usingComponents,对没错,就是表面的意思👉"使用中的组件",这个地方主要是用来配置使用的组件,那说到组件我们这篇先不对此展开说明,后面会单独开一篇来对组件进行介绍.
好了,本篇的重点来了,让我们把目光移向这个地方👇
那从上面一大堆的介绍,这里的文件看起来就没有那么陌生了吧,只是这里没有wxml文件.先看app.json,这个文件是整个小程序的配置文件,点开一看,这里是一个字典,首先先看第一个pages这个字段,这个字段是干什么用的呢.你需要展示的页面都需要在这里配置,比如这里原本就帮我们创建的index页面跟logs页面,如果需要展示到这两个页面,那么需要在这里写上路径.然后接着往下看,有个window的字段,这里呢主要是设置小程序的状态栏、导航条、标题、窗口背景色等等,这里举个🌰让大家能够更浅显易懂,往下看
这里把颜色值改成黑色,然后点击编译(不用再强调在哪个地方了吧,笑),小程序的头部是不是变成黑色了,是的,这里的配置会整体改变小程序的样式,那么因为这里可配置的属性很多,大家参照官网开心的搞事情吧(嘿嘿)👉官方文档.然后介于这些篇章主要是给小白们看的,我们再动手做一个tabBar出来(tabBar不懂是啥?叫你不学好英语🦶).看下面的配置信息
跟这样写,然后点击编译,来吧,看看这可人的效果!👇
是不是!有木有!好的,这就是tabBar,接下来如果要做出酷炫的东西,那么准备好切图,打开👉官方文档,自己动手做起来吧(讲真,怎么感觉像开了个小朋友学画画的频道了,笑).
那么关于配置方面的东西我们讲解到这里,其他的字段都可以参照👉官方文档来进行配置,先熟悉下配置,下篇我们开始介绍一些常用的控件,go!
