微信小程序-项目结构

欢迎大家关注我的个人微信订阅号 A321之旅。

项目结构看着不起眼，但对一个项目而言是极其重要的。它体现了项目的设计思想，自顶向下的规划，各模块组件间的划分以及对应用场景的预判等。好的项目结构会导致开发效率大幅提升，很多问题在进行项目结构划分时就已经有了基本判断和思路，所以后续遇到实际问题时也能快速解决。项目结构也是一个持续完善的过程，随着所遇场景的复杂化也会变得越来越复杂，越来越专属。当另一个项目进行参考项目结构时，就需要进行相应的裁剪。

项目结构

当前我的小程序开发还是很简单的，延续着微信小程序的基本结构，只是一些细节点做了约定。

• 截图
  这是以截图的方式描述项目结构，更加概略一些，但有些细节无法体现。
  
• tree查看
  这是通过 tree 指令获得的目录结构，并进行了删减去重，能体现出更细节的结构内容。

.
├── app.js
├── app.json
├── app.wxss
├── components
│   └── scroll-view-pulldown
│       ├── scroll-view-pulldown.js
│       ├── scroll-view-pulldown.json
│       ├── scroll-view-pulldown.wxml
│       └── scroll-view-pulldown.wxss
├── pages
│   ├── authorize
│   │   └── pages
│   │       ├── authorize.js
│   │       ├── authorize.json
│   │       ├── authorize.wxml
│   │       └── authorize.wxss
│   ├── imgs
│   ├── logs
│   ├── tabBar
│   │   ├── focus
│   │   ├── index
│   │   └── mine
│   └── template
│       ├── banner-template.wxml
│       └── banner-template.wxss
├── project.config.json
├── sitemap.json
└── utils
    ├── ald-stat.js
    ├── ald-stat-conf.js
    ├── request.js
    └── util.js

系统文件

系统文件是指微信所提供的各个文件，网上有很多解释和说明，这里只是对重要的部分进行简略描述，有个整体印象即可，并对其中有意思的部分做出个人理解。

参考文档：

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

• project.config.json
  此为小程序开发者工具自动生成的，是开发者工具所需要的配置信息，一般不需要修改。但在使用其他项目作为初始模板时，可以在此手动修改 appid 和 projectname 信息，也可以通过工具的界面进行修改。

• app.json
  本文件是对微信小程序进行全局配置，作用域为整个小程序，但各个页面下的.json文件内的配置高于此优先级，相同项会以页面所对应的.json文件为准，覆写型。一般作为全局的默认配置项。

• app.wxss
  本文件是全局性的样式设置，相同项会被页面的.wxss文件内容覆写，一般作为全局的默认样式或共性样式，如提示框、状态颜色、背景色等。

• app.js
  项目的入口文件，即微信小程序从此开始执行，通过App创建应用对象。一般用于引入公共第三方库、通用工具内容、各环境访问地址切换等。
  各环境访问地址切换应该有更好的方式，等我想明白了再更新这里，现在是我简单粗暴的用注释的方式。

• sitemap.json
  通过此文件允许微信进行搜索，当开发者允许微信索引时，微信会通过内部爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。这样就能知道是爬虫在访问了。如果没有 sitemap.json ，则默认为所有页面都允许被索引。一般而言，都是使用默认项，即允许全部页面被索引。

• pages
  小程序的各个页面的所在目录，一般会以各个子模块或功能的名称作为子目录。可通过右键菜单进行创建，在创建 Page 时，也建议通过右键菜单进行创建，这样可以自动同步更新 app.json 中的 pages 内容。等后续讲到分包加载时，需要考虑将 pages 的内容移动到 subPackages 中。手工复制后，再修改 app.json 的内容是一样的。

  • pages/*.wxml
    WXML（WeiXin Markup Language）是一套标签语言，用于构建页面结构的。通过各个组件（view等）构建页面结构，通过 {{message}} 进行数据绑定，通过 wx:for="{{array}}" 进行列表循环，通过 wx:if="{{view == 'WEBVIEW'}}" 实现条件判断。
    参考文档 ：
    https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

  • pages/tabBar
    这是底部导航组件的所在位置，很常见的一个功能。建议在微信小程序的底部导航栏进行显示的页面都在此下创建。底部导航组件可以显示的最少2个，最多5个。
    
    通过在 app.json 中的 tabBar 声明底部导航栏显示的页面。

"tabBar": {
  "list": [
    {
      "pagePath": "pages/tabBar/index/index",
      "text": "首页",
      "iconPath": "pages/imgs/index.png",
      "selectedIconPath": "pages/imgs/index_selected.png"
    },

个性约定

个性约定是指结合项目自身的个性化约定，说明这么做的目的及优劣势。

• utils
  统一存放工具类，包含自定义的工具类和外部引用的一些工具类

  • ald-stat*.js
    引入的第三方阿拉丁统计类

  • request.js
    用于与后台服务交互，核心是 getReuqest, postReuqest, requestAll 三个方法，使用 wx.request 调用后台。

  • util.js
    常用的工具类封装。

• components
  统一存放自定义组件，以各个自定义组件的名字命名目录，自定义组件的名字以连字符 -连接。