详细内容到小程序构成官方文档查看
主要构成文件
.wxss
后缀的 WXSS 样式文件 WXSS
文件作用
JSON 配置
app.json 全局配置
- 全局配置包括了小程序的页面路径、窗口表现、设置网络超时时间、设置多 tab 等。
- 常用 pages 和 window
- 通过 app.json 的 pages 字段可以知道当前小程序的所有页面路径。
page.json 页面配置
page.json 是对当前页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项。
project.config.json 工具配置
用于个性化工具配置,当重新安装工具或者换电脑工作时,只要载入同一个项目的代码包,开发者工具就自动会帮忙恢复到当时开发项目时的个性化配置。
sitemap 配置
- 根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引,如果没有这个文件,默认为允许被索引。
- 可对特定页面的索引进行关闭。
WXML 模板
- 类似 Vue.js 的template模板,可以把变量或者要展示的内容放到组件中。
- 原生组件的层级是最高的,因为原生组件脱离在 WebView 渲染流程外。
page.wxml 页面结构
WXSS 样式
具有 CSS 大部分的特性,新增了尺寸单位(rpx),提供了全局的样式和局部样式,仅支持部分 CSS 选择器。
app.wxss 全局样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。
page.wxss 页面样式
在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
JS 脚本逻辑
使用事件响应用户操作
app.js 小程序逻辑
page.js 页面逻辑
文件结构
page --page.js
--page.json
--page.wxml
--page.wxss
app.js
app.json
app.wxss
project.config.json