小程序的基本目录结构
在微信小程序的基本目录结构中,项目主目录下有2个子目录(pages和utils)和4个文件(app.js、app.json、app.wxss和project.config.json)。
pages目录中有2个子目录,分别是index和logs,每个子目录中保存着一个页面的相关文件。通常,一个页面包含4个不同扩展名(.wxml、.wxss、.js、.json)的文件,分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。按照规定,同一个页面的4个文件必须具有相同的路径与文件名。utils目录用来存放一些公共的.js文件,当某个页面需要用到utils.js函数时,可以将其引入后直接使用。在微信小程序中,可以为一些图片、音频等资源类文件单独创建子目录用来存放。
主体文件
微信小程序的主体部分由3个文件组成,这3个文件必须放在项目的主目录中,负责小程序的整体配置,它们的名称是固定的。 app.js 小程序逻辑文件,主要用来注册小程序全局实例。在编译时,app.js文件会和其他页面文件中同样有效。该文件在项目中不不可缺少。
app.json 小程序公共设置文件,配置小程序全局设置。该文件在项目中不可缺少。
app.wxss 小程序主样式表文件,类似HTML的.CSS文件。在主样式表文件中设置的样式在其他页面中同样有效。该文件在项目中不是必需的。
页面文件
小程序通常是由多个页面组成的,每个页面包含4个文件,同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时,小程序会根据app.json设置的路径找到相对应的资源进行数据绑定。
.js文件 页面逻辑文件,在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
.wxml 页面结构文件,用于设计页面的布局、数据绑定等,类似HTML中的.html文件。该文件在页面中不可缺少。
.wxss文件 页面样式表文件,用于定义本页面中用到的各类样式表。当页面中有样式表文件时,文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则,直接使用app.wxss中指定的样式规则。该文件在页面中不可缺少。
.json文件 页面配置文件。该文件在页面中不可缺少。
小程序的开发框架
微信团队为小程序的开发提供了MINA框架。MINA框架通过微信客户端提供文件系统、网络通信、任务管理、数据安全等基础功能,对上层提供了一整套JavaScriptAPI,让开发者能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。
小程序MINA框架如图:
小程序MINA框架将整个系统划分为视图层和逻辑层。
视图层
MINA框架的视图层由WXML与WXSS编写,由组件来进行展示。对于微信小程序而言,视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构;.wxss文件用于描述页面的
样式。
逻辑层
逻辑层用于处理事务逻辑。对于微信小程序而言,逻辑层就是所有.js脚本文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
数据层
数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用。
配置文件
全局配置文件
(1)全局配置项
(2)window配置项及其描述
(3)tabBar配置项
(4)tabBar中list选项
(5)netwTimeout配置项
逻辑层文件
(1)项目逻辑文件
(2)页面逻辑文件配置项
页面初始数据
js文件
wxml文件
运行结果
(2)页面结构文件
算术运算
运行结果
逻辑运算
运行结果
三元运算
运行结果
条件数据绑定
1、wx:if条件数据绑定
运行结果
模板
模板运行结果:
冒泡事件:
页面样式文件
WXSS一些常用属性如下:
本章小结
讲解了小程序的目录结构,通过目录结构介绍了小程序的框架,最后主要介绍了小程序文件的类型及其配置。还有三种运算的讲解和小程序模板。