小程序的构成文件

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

主要构成文件

文件作用

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容