企业官网建设流程全解析

wechat-miniprogram-examples项目结构深度拆解：3个案例的目录布局与文件职责一次看懂

【免费下载链接】wechat-miniprogram-examplesWeChat mini program examples. 微信小程序示例项目地址: https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples

对于想快速上手微信小程序开发的新手来说，最有效的方式莫过于阅读一份结构清晰、注释完整的微信小程序示例源码。而 wechat-miniprogram-examples 正是这样一个宝藏仓库：它由「豆瓣图书」「事项助手」「知乎日报」三个真实案例组成，从单页面到多页面、从简单网络请求到复杂组件封装，完整覆盖了微信小程序项目结构从入门到进阶的各个阶段。本文将以目录布局和文件职责为切入点，带你把这三个案例的骨架一次看懂，帮助你建立属于自己的小程序目录结构知识体系。

1. 豆瓣图书：最简小程序目录布局的教科书 📚

作为作者的第一个微信小程序，豆瓣图书的目录结构非常精简，非常适合理解小程序最核心的目录组织方式。整体只有三个顶层目录：

• pages/：页面目录，存放所有页面
• utils/：工具目录，封装公共方法
• images/：静态图片资源目录

其中pages目录下每个页面（index 首页、detail 详情页）都遵循「四件套」规范：.js逻辑文件、.json配置文件、.wxml结构文件、.wxss样式文件。这四类文件共同构成了小程序页面文件组成的最小单元。

1.1 utils 目录：网络请求与工具函数的职责划分

豆瓣图书的网络层设计非常干净，所有请求逻辑集中在 api.js 中。它用wx.request封装了一个返回 Promise 的request函数，并对外暴露requestSearchBook（搜索图书）和requestBookDetail（获取图书详情）两个接口；而 util.js 则负责formatNumber、isFunction等纯函数工具。请求接口与业务工具分离，是新手最容易忽视却最重要的目录设计原则。

1.2 app.json：页面注册与窗口配置的入口

app.json 中通过pages数组声明页面路径、通过window配置导航栏颜色与标题。注意：新增页面必须在这里注册，否则小程序无法识别，这是目录结构之外最容易踩的坑。

2. 事项助手：common 公共目录与本地存储设计 🗓️

第二个案例事项助手引入了common/公共代码目录，与pages/、images/并列，用于存放跨页面复用的模块。它虽然只有 index 和 detail 两个页面，但目录设计的含金量在于数据层的封装。

2.1 common 目录四件套：各司其职

• constant.js：集中管理常量，如本地存储 key（ITEMS_SAVE_KEY）和事项优先级LEVEL
• curd.js：封装基于wx.setStorage/wx.getStorage的增删改查类Curd，提供insert、update、find、remove等方法
• data.js：数据初始化与组装逻辑
• util.js：通用工具函数

这种「常量 + 数据操作 + 工具」的分层方式，让页面代码只需关注渲染与交互，数据逻辑完全下沉到 common 层，是小程序项目结构走向工程化的关键一步。

2.2 为什么本地存储要封装成 Curd？

事项助手的 todo 数据全部保存在本地存储中，Curd类将存储读写统一封装为 Promise 风格 API，并在removeRange中处理批量删除。这样即便后续将本地存储替换为云端接口，页面代码也几乎不需要改动——这就是目录职责分离带来的可维护性红利。

3. 知乎日报：多页面 + 自定义组件的完整目录范例 🏆

知乎日报是三个案例中目录结构最复杂的，也是最能体现微信小程序进阶开发的例子。它的目录新增了两个重量级角色：components/组件目录和 6 个功能页面，覆盖首页、详情、评论、收藏、设置与 WebView 跳转。

3.1 components 目录：五个可复用组件的布局之道

components/下每个组件同样遵循四件套结构，作者将高频 UI 抽象为独立组件：

• clist：评论列表
• nlist：新闻列表
• slider：轮播图
• drawer：侧滑抽屉菜单
• floataction：悬浮操作按钮

以 drawer 为例，它封装了抽屉的开合状态与遮罩层交互；页面只需在.json中声明usingComponents即可引用。把重复 UI 抽成组件、把页面做薄，正是多页面小程序目录布局的核心思路。

3.2 utils 目录的五件套进阶

对比豆瓣图书的 2 个文件，知乎日报的 utils 扩充到 5 个：

• api.js：集中管理知乎日报的新闻、评论、主题等所有接口
• curd.js 与 data.js：收藏功能的本地存储封装
• htmlParseUtil.js：将详情页 HTML 解析为富文本
• util.js：日期格式化等公共函数

此外 app.json 中一次性注册了 6 个页面，配合webview页面实现在小程序内打开外部网页，完整演示了复杂业务场景下的小程序目录结构组织方式。

4. 三个案例的通用目录布局规律总结 ✅

看完三个案例，你会发现再复杂的微信小程序示例也逃不出这几条铁律：

给新手的三条实践建议：

1. 从单页面起步：先模仿豆瓣图书的目录，跑通「页面四件套 + utils 请求」的最小闭环
2. 及时抽取公共层：当第二个页面开始复用逻辑时，就该像事项助手一样建立common/目录
3. 大胆拆分组件：页面超过 3 个、出现重复 UI 时，向知乎日报学习，用components/把页面做薄

这份微信小程序项目结构深度拆解覆盖了从 2 个页面到 6 个页面、从无组件到 5 个组件的完整演进路径。建议你在本地打开三个案例，对照着 DouBanBookApp、MatterAssistant 和 ZhiHuDaily 的目录逐个文件点开看看，亲手跑一遍，你的小程序目录布局直觉会在一天之内建立起来。🚀

【免费下载链接】wechat-miniprogram-examplesWeChat mini program examples. 微信小程序示例项目地址: https://gitcode.com/gh_mirrors/we/wechat-miniprogram-examples