微信小程序目录结构解析

这是我新创建的小程序demo,目录结构为一下形式:

一个小程序包括一个描述整体的app和多个描述各自页面的page;

小程序demo目录截图_1

在上面那个简单的目录中我们可以看到:

pages文件夹(用来归类整个小程序所有界面,例如其下的welcome就是首页欢迎界面);

welcome文件夹(是我自己定义的用来存放首页欢迎界面所有文件的文件夹);

一个小程序主题有三部分组成,必须要放在根目录中,归纳为:

文件                                  必要                                       作用

app.js                                是                                           小程序逻辑

app.json                            是                                          小程序公共设置

app.wxss                           否                                           小程序公共样式表


一个小程序界面有四部分组成:

文件                             必要                                       作用

.js                                是                                           页面逻辑

.json                            否                                          页面配置

.wxss                          否                                           页面样式表

.wxml                          是                                           页面结构

具体的来说:

.js文件是小程序的逻辑文件,也可称之为事件交互文件、脚本文件,用于处理界面的点击事件等功能,像设置初始数据,定义事件,数据的交互,逻辑的运算,变量的声明,数组,对象,函数,注释的方式等,其语法与javascript相同。

.json该配置文件只能配置本级目录下的页面配置文件,并且只能对导航栏的相关文件进行配置修改,如用于修改导航栏显示样式,如导航的文字,背景颜色,文字颜色等。其语法跟json语法相同。

.wxml文件是界面文件,是页面结构文件,用于构建页面,在页面上增加控件。全称是weixin markup lanuage的缩写,微信标记语言。跟其他一般标记语言一样,标签成对, 标签名小写。可以通过引用class来控制外观,也可以通过绑定事件来进行逻辑的处理,通过渲染来完成我们需要的列表等。是连接用户操作和后端逻辑的纽带桥梁。我们在页面的看到的元素,都可以在这里编辑。

.wxss是样式表文件,类似于前端中的css,是为.wxml文件和page文件进行美化的文件,让界面显示的更加美观。例如对文字的大小,颜色,图片的宽高,设置个.wxml中个组件的位置,间距等。

注意:

1.小程序每个页面必须有.wxml和.js文件,其他两种类型的文件可以不需要

2.文件名称必须与页面的文件夹名称相同


app.js : 系统的方法处理全局文件,也就是说文件中规定的函数和数据,在整个小程序中,每一个框架页面和文件都可以使用this获取。每个小程序都会有一个app.js文件,有且只有一个,位于项目的根目录!app.js的作用就是告诉小程序,注册一个小程序实例使用app(object)的形式注册,实现小程序在不同阶段的需要实现的事件功能;

app.json : 系统全局配置文件,是必须包含的。包含设置页面路径,设置底部,网络,调试模式,设置导航头的颜色,字体大小,下面有没有tabbar等功能,具体页面的配置在页面的json文件中单独修改,任何一个页面都需要在app.json中注册,如果不在json中添加,页面是无法打开的。

app.wxss : 全局的界面美化代码,并不是必须的。其优先级同样没有框架中的wxss的优先级高。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容