微信小程序学习日记 L01 目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
刚刚接触到小程序，使用 微信开发者工具 新建完项目之后，会有一个这样的初始结构：

├─pages
│  ├─index
│  │     index.js
│  │     index.json
│  │     index.wxml
│  │     index.wxss
│  │      
│  └─logs
│        logs.js
│        logs.json
│        logs.wxml
│        logs.wxss
│          
├─utils
│     util.js
├─ app.js
├─ app.json
├─ app.wxss
├─ project.config.json
└─ sitemap.json

先看最外层的文件 [ app.js, app.json, app.wxss, project.config.json, sitemap.json ]

• app.js 小程序实例化，可配置小程序实例

  • 设置生命周期回调和事件监听
  • 配置小程序全局对象 globalData
  • 全局可以通过 getApp() 方法获取小程序实例
    恶

• app.json 小程序全局公共配置、默认配置项

  • "pages" 页面路由配置
  • "window" 全局默认页我面样式配置 配置文档
  • "tabBar" 底部 选项卡 配置就
  • "usingComponents" 全局自定义组件配置 使用自定义组件
  • 其它他配置项可以查看 👉 全局配置 | 微信开放文档

• app.wxss 小程序全局样式

  • 小程序全局的样式配置，会被局部样式覆盖
  • 具有 CSS 大部分特性
  • 当前支持的选择器 👉 选择器 | 微信开放文档
  • 拓展了一个尺寸单位 rpx 尺寸单位 | 微信开放文档

• project.config.json 小程序项目配置文件

  • 可以直接配置本地小程序项目属性，工具栏-设置-项目设置 中设置的配置项
  • 每次提交项目时不会提交该文件

• sitemap.json 配置小程序及其页面是否允许被微信搜索索引

  • rules 索引规则，具体可查看 sitemap 配置 | 微信开放文档
  • 如果没有 sitemap.json ，默认所有页面都允许被索引

---

然后看 pages 目录

小程序的页面目录

pages/index 下是包括了4种文件的 [ js, wxml, json, wxss ], 和根目录一样，只是多了一个 wxml 文件，
分别对应的是：

• js - 注册页面，配置页面的初始数据、生命周期回调、事件处理函数等 配置文档
• wxml - 组件的结构，微信自己的一套类似 html 的标签语言，来构建出页面结构 WXML | 微信开放文档
  • <view> 对应 <div> 标签
  • <text> 对应 <span> 标签
  • <template> 对应 Vue 的 <template> 模板标签
  • <image> 对应 <img> 标签
  • 其它更多标签可以查看 视图容器 | 微信开放文档
• json - 当前页面配置，类似 app.json
  • 会覆盖 app.json 的 window 中相同的配置项
  • 具体配置查看 👉 配置文档
  • 非必须项，可以被删除
• wxss - 组件的样式
  • 会覆盖 app.wxss 当中相同的选择器样式
  • 非必须项，可以被删除

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

微信客户端会先根据 index.json 配置生成一个界面，顶部的颜色和文字都可以在这个 json 文件里边定义好。然后微信就会装载这个页面的 WXML 结构和 WXSS 样式，最后微信会装载 index.js

---

utils 目录

一般来说 utils 目录下是一些被抽离出来的公共代码，比如说你封装好的请求函数，和默认给你的时间格式化和数字格式化。
通过 export 导出，在需要的文件中通过 import 引入。

但是不支持 绝对路径，需要使用 相对路径 来引入，这个比较麻烦需要自己注意。

---

最后

在正常使用过程中，我们还会遇到 component - 自定义组件，它和 pages 页面组件类似，也是由 [ json, wxml, wxss, js ] 4个文件组成，但是稍有不同。

你可以单独新建一个顶级的 components 目录，例如：/components/userInfo/...，
也可以放到不同 page 对应的目录下 /pages/home/components/userInfo/...

不同点：

首先，.json 文件中需要声明 component 为 true

{
  "component": true
}

然后是在 .js 文件中注册组件的不同， 需要使用 Component() 来注册组件，多了 properties 属性和 methods 属性。

具体配置就不多说了，直接参看文档 Component 构造器 | 微信开放文档

总结

整体和 Vue 的遍写思路很像了，

• .js 文件对应的是 Vue 文件的 <script> 部分
• .wxml 文件对应的是 Vue 文件的 <template> 部分
• .wxss 文件时 Vue 文件中的 <style> 部分
• .json 文件算是 Vue 实例初始化时的 options

本文所描述小程序最新版本 v2.17.0 (2021-04-28)