小程序的构成文件

详细内容到小程序构成官方文档查看

主要构成文件

• .json 后缀的 JSON 配置文件 小程序全局配置、页面配置和开发者工具配置。

• .wxml 后缀的 WXML 模板文件 WXML、WXML语法参考、小程序组件

• .wxss 后缀的 WXSS 样式文件 WXSS

• .js 后缀的 JS 脚本逻辑文件 事件、小程序API、WXS语法

文件作用

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