微信小程序学习日记 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 小程序实例化,可配置小程序实例

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

  • app.wxss 小程序全局样式

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

    • 可以直接配置本地小程序项目属性,工具栏-设置-项目设置 中设置的配置项
    • 每次提交项目时不会提交该文件
  • 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.jsonwindow 中相同的配置项
    • 具体配置查看 👉 配置文档
    • 非必须项,可以被删除
  • 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 文件中需要声明 componenttrue

{
  "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)