微信小程序首页开发实战：从组件化架构到性能优化全解析

简介：这是一份微信小程序首页界面布局源码，适合正在入门小程序开发或需要快速搭建首页的读者，可广泛应用于电商、资讯、工具等多类小程序。示例实现了屏幕滚动时顶部搜索栏的显示与隐藏、自定义顶部状态栏、水平滚动菜单栏等常见交互，并为每个按钮和图片都配置了操作监听事件，可根据实际需求灵活修改跳转页面路径。资源包共19个文件，压缩后仅39KB，包含png图片素材、json配置文件、js逻辑脚本、wxss样式以及wxml页面结构，图片负责界面图标与菜单占位，配置与脚本支撑项目运行，结构清晰，便于直接复用或分模块学习。目前已有4229人学习下载。通过这份源码，能够掌握小程序首页布局的基本思路，学会处理滚动显隐与菜单横向滑动，提升样式编写和组件拆解效率；源码保留完整的扩展入口，允许按业务场景自行调整，适合练习与二次开发。 小程序首页看似简单，真正要把结构、性能和体验都做到位，背后有不少门道。尤其是第一次从零搭建首页的同学，很容易在导航栏适配、组件复用、数据请求这几个环节翻车。这篇文章我把一个可直接运行的微信小程序首页示例（包含完整源码思路）拆开揉碎讲清楚，从架构设计、核心代码实现，到支付对接、违规申诉、常见报错排查，一次性讲透。

1. 首页整体设计与架构思路

1.1 首页在微信小程序里的定位

小程序不像 App 那样有独立的“桌面”，用户打开后看到的第一个页面就是首页。首屏加载速度、信息呈现效率、操作路径的直观程度，直接决定用户愿不愿意继续往下点。说得直白点，首页就是整个小程序的“门面”和“分流器”：门面负责留住用户，分流器负责把用户导向各个功能模块。

这个示例首页面向的是工具类小程序场景，包含三大块内容：

• 顶部导航与搜索入口：承担品牌展示和功能引导作用，让用户一进来就知道这个小程序能干什么。
• 金刚区功能入口：用图标加文字的网格布局，把核心功能平铺出来，用户点哪里就去哪里，路径最短。
• 内容推荐流：以卡片列表形式展示最新内容或热门服务，兼顾信息展示与转化。

1.2 为什么采用“组件化 + 数据驱动”的结构

很多初学者写首页喜欢把所有的view、image、text堆在一个.wxml文件里，样式也全写在同一个.wxss中。页面简单还好说，一旦功能变多，这种“面条代码”会非常痛苦：改一个按钮的样式可能要翻几百行代码，新增一个入口要复制粘贴一大段结构。

这个示例从一开始就采用组件化拆分，原因有三个：

1. 可维护性：每个模块独立成组件，改轮播不会影响金刚区，出了问题定位也快。
2. 可复用性：比如商品卡片组件，首页推荐流能用，搜索页结果列表也能用，甚至未来做活动专题页还能继续用。
3. 性能优化空间：组件可以单独控制渲染时机，配合wx:if或hidden做懒加载，比整体渲染更灵活。

数据驱动则是小程序框架本身就推荐的做法：界面状态由data决定，业务逻辑只负责修改数据，不直接操作 DOM。这样代码思路清晰，也方便后期接入接口数据。

1.3 页面结构拆分

整个首页的页面结构分为三个层级：

pages/index/ ├── index.wxml // 页面结构模板 ├── index.wxss // 页面样式 ├── index.js // 页面逻辑与数据 ├── index.json // 页面配置 └── components/ // 自定义组件目录 ├── search-bar/ // 搜索栏组件 ├── banner/ // 轮播组件 ├── grid-nav/ // 金刚区导航组件 └── product-card// 商品/内容卡片组件

实际开发过程中，我习惯先用静态数据把页面跑通，再替换成接口数据。这样能先把 UI 和交互调到位，不用等后端接口。

2. 核心细节解析与实操要点

2.1 导航栏适配：小程序顶部导航栏高度的那点坑

导航栏是首页第一个“暗坑”。很多新手发现，自己在 iPhone 上调试好好的页面，换到安卓机上就出现了元素被状态栏遮挡或者间距不对的问题，本质上是没有处理好状态栏高度兼容。

微信小程序的导航栏分为两种：默认导航栏和自定义导航栏。默认导航栏由微信统一渲染，样式有限，但胜在不用操心适配。自定义导航栏则是把navigationStyle设置为custom，完全由自己绘制，这时候就必须要动态获取状态栏高度。

我封了一个通用的获取导航栏高度的方法：

// utils/system.js function getNavBarHeight() { const systemInfo = wx.getSystemInfoSync() const menuButton = wx.getMenuButtonBoundingClientRect() // 状态栏高度 const statusBarHeight = systemInfo.statusBarHeight || 20 // 导航栏内容高度（胶囊按钮高度 + 上下间距） const navBarHeight = (menuButton.top - statusBarHeight) * 2 + menuButton.height return { statusBarHeight, navBarHeight, totalHeight: statusBarHeight + navBarHeight } } module.exports = { getNavBarHeight }

这里面的计算逻辑值得解释一下：wx.getMenuButtonBoundingClientRect()获取的是胶囊按钮（就是右上角那三个点）的位置信息，menuButton.top是胶囊按钮距离屏幕顶部的距离，减去状态栏高度就是胶囊按钮距离状态栏底部的距离，这个距离在自定义导航栏的视觉设计中上下是一致的，所以乘 2 加高度就是整个自定义导航区域的总高度。

拿到这个高度后，在index.js的onLoad中设置到data，然后在wxml里用内联样式绑定：

<view class="custom-nav" style="padding-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;"> <view class="nav-title">首页</view> </view>

2.2 轮播图组件：不只是 swiper 的简单套用

轮播图是首页的视觉重心，但轮播组件远不是把swiper标签一放、填几张图那么简单。实际开发中常见的问题有：图片比例失真、循环播放卡顿、点击事件失效、自动播放与用户手势冲突。

我的做法是在banner组件里做三件事：

1. 固定图片填充模式：mode="aspectFill"，保证图片不变形，超出部分裁剪。
2. 设置circular="{{true}}"开启循环播放，autoplay="{{true}}"开启自动播放，interval="4000"控制间隔。
3. 通过bindchange事件监听当前索引，配合指示器 dots 做高亮切换。

轮播图的数据结构建议统一成这样：

banners: [ { id: 1, imageUrl: '/assets/banner-1.png', linkUrl: '/pages/activity/detail?id=1' }, { id: 2, imageUrl: '/assets/banner-2.png', linkUrl: '/pages/activity/detail?id=2' } ]

linkUrl字段是给点击跳转用的，bindtap里读取当前项的数据做wx.navigateTo跳转。注意不要在swiper上直接绑bindtap，因为用户滑动时也会触发 tap，要在swiper-item内部的元素上绑定。

2.3 金刚区导航：宫格布局的弹性方案

金刚区就是首页那一排排的图标入口，通常以 4 列或 5 列排列。实现方式有两种：flex布局和grid布局。我更推荐flex + flex-wrap，因为它在处理动态条目数时更灵活。

.grid-nav { display: flex; flex-wrap: wrap; padding: 20rpx 0; } .grid-nav-item { width: 25%; /* 4列布局 */ display: flex; flex-direction: column; align-items: center; margin-bottom: 30rpx; } .grid-nav-item icon { width: 96rpx; height: 96rpx; } .grid-nav-item text { margin-top: 12rpx; font-size: 24rpx; color: #333; }

这里有个小技巧：如果入口数量不固定，可以用 JS 动态计算宽度，比如 5 个入口就width: 20%，3 个入口就width: 33.33%。我通常会在数据源里加一个columns字段来配置列数。

金刚区的点击事件推荐用事件委托，不用在每个 item 上单独绑bindtap。在父容器上绑定，通过><view class="grid-nav" bindtap="onGridNavTap"> <view class="grid-nav-item" wx:for="{{navList}}" wx:key="id">onGridNavTap(e) { const index = e.currentTarget.dataset.index const item = this.data.navList[index] if (item.url) { wx.navigateTo({ url: item.url }) } }

这样做的好处是，即使未来navList数据是从接口动态获取的，也不需要额外绑定事件，数据变化后视图自动更新，事件逻辑完全不用动。

2.4 推荐流卡片：列表渲染与下拉刷新

首页推荐流通常展示内容卡片列表，常见做法是用wx:for循环渲染卡片组件。这里有一个性能关键点：不要直接在循环里写复杂的内联结构，而是封装成product-card组件。

组件的properties定义好接收的数据结构，内部自行处理展示逻辑：

// components/product-card/product-card.js Component({ properties: { product: { type: Object, value: {} } }, methods: { onCardTap() { const product = this.data.product wx.navigateTo({ url: `/pages/product/detail?id=${product.id}` }) } } })

页面的index.js中维护一份productList数据，并在onPullDownRefresh和onReachBottom中分别处理下拉刷新与触底加载：

onPullDownRefresh() { // 模拟重新请求第一页数据 this.setData({ productList: this.generateMockData(1) }) wx.stopPullDownRefresh() }, onReachBottom() { // 模拟加载下一页数据 const nextPage = this.data.currentPage + 1 const newList = this.generateMockData(nextPage) this.setData({ productList: this.data.productList.concat(newList), currentPage: nextPage }) }

2.5 页面配置与全局配置的区别

首页功能写完后，记得在index.json中做页面级配置。这里有几个容易忽略的点：

• 启用下拉刷新必须在页面 json 中声明"enablePullDownRefresh": true，光在app.json里配全局的没用（全局配置不包含这个字段）。
• 自定义导航栏时需要在页面 json 中加"navigationStyle": "custom"。注意：这个配置只对当前页面生效。
• 设置页面标题"navigationBarTitleText": "首页"，这个在默认导航栏下显示在顶部，自定义导航栏下需要自己在wxml里渲染。

3. 实操过程与核心功能实现

3.1 完整源码结构一览

先给你看下这个示例首页的完整代码结构。我用微信开发者工具默认模板创建项目后，主要修改了以下文件：

project.config.json // 项目配置，appid换成自己的 app.json // 全局配置，注册页面和窗口样式 app.wxss // 全局样式，设置公共类 pages/index/index.wxml // 首页模板 pages/index/index.wxss // 首页样式 pages/index/index.js // 首页逻辑 pages/index/index.json // 首页配置 components/search-bar/ // 搜索栏组件 components/banner/ // 轮播组件 components/grid-nav/ // 金刚区组件 components/product-card/ // 内容卡片组件

3.2 首页模板核心代码

下面给出index.wxml的关键片段，完整代码可以在源码包中查看：

<!-- 自定义导航栏 --> <view class="nav-wrapper" style="padding-top: {{statusBarHeight}}px;"> <view class="nav-content" style="height: {{navBarHeight}}px;"> <text class="nav-title">我的小程序</text> </view> </view> <!-- 搜索栏 --> <search-bar bind:search="onSearch"></search-bar> <!-- 轮播图 --> <banner banners="{{banners}}"></banner> <!-- 金刚区导航 --> <grid-nav nav-list="{{navList}}"></grid-nav> <!-- 推荐内容 --> <view class="section-header"> <text class="section-title">热门推荐</text> </view> <view class="product-list"> <product-card wx:for="{{productList}}" wx:key="id" product="{{item}}" ></product-card> </view>

这里用到了自定义组件的bind:search事件，这是组件向页面通信的方式。子组件内部触发this.triggerEvent('search', { keyword })，页面通过bind:search监听并响应。

3.3 首页逻辑核心代码

index.js的核心逻辑分为三块：生命周期处理、数据初始化、事件响应。

// pages/index/index.js const { getNavBarHeight } = require('../../utils/system') Page({ data: { statusBarHeight: 20, navBarHeight: 44, banners: [], navList: [], productList: [], currentPage: 1, pageSize: 10, keyword: '' }, onLoad() { // 获取导航栏高度信息 const { statusBarHeight, navBarHeight } = getNavBarHeight() this.setData({ statusBarHeight, navBarHeight }) // 初始化数据（实际开发中替换为接口请求） this.setData({ banners: this.generateBanners(), navList: this.generateNavList(), productList: this.generateMockData(1) }) }, generateBanners() { return [ { id: 1, imageUrl: '/assets/banner1.png', linkUrl: '/pages/activity/detail?id=1' }, { id: 2, imageUrl: '/assets/banner2.png', linkUrl: '/pages/activity/detail?id=2' } ] }, generateNavList() { return [ { id: 1, name: '分类', icon: '/assets/icon-category.png', url: '/pages/category/index' }, { id: 2, name: '购物车', icon: '/assets/icon-cart.png', url: '/pages/cart/index' }, { id: 3, name: '订单', icon: '/assets/icon-order.png', url: '/pages/order/index' }, { id: 4, name: '个人中心', icon: '/assets/icon-user.png', url: '/pages/user/index' } ] }, generateMockData(page) { const list = [] for (let i = (page - 1) * this.data.pageSize; i < page * this.data.pageSize; i++) { list.push({ id: i + 1, title: `推荐内容 ${i + 1}`, cover: `/assets/product-${(i % 4) + 1}.png`, price: (i * 10 + 9.9).toFixed(2), sales: Math.floor(Math.random() * 500) }) } return list }, onSearch(e) { const keyword = e.detail.keyword this.setData({ keyword }) // 实际开发中跳转到搜索结果页 wx.navigateTo({ url: `/pages/search/result?keyword=${keyword}` }) } })

这里有个值得注意的点：generateMockData是我用来做本地模拟的，真实项目中要把这部分注释掉，换成wx.request请求后端接口。前后端分离的开发模式下，我习惯先在本地定好数据结构，等接口联调时直接替换请求层。

3.4 全局配置与样式

app.json中，注册页面和设置窗口样式：

{ "pages": [ "pages/index/index", "pages/category/index", "pages/cart/index", "pages/user/index" ], "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTitleText": "我的小程序", "navigationBarTextStyle": "black", "backgroundColor": "#f6f6f6" }, "style": "v2", "sitemapLocation": "sitemap.json" }

全局样式app.wxss中，我习惯定义几个通用的工具类：

/* app.wxss */ page { background-color: #f6f6f6; font-size: 28rpx; color: #333; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif; } .container { padding: 20rpx 30rpx; } .card { background: #fff; border-radius: 16rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04); }

rpx这个单位是微信小程序特有的响应式单位，不管屏幕宽度是多少，750rpx始终等于屏幕宽度。这是小程序适配方案的核心，写样式时用rpx做单位，就基本不用考虑不同机型屏幕宽度问题。

3.5 自定义组件实现示例

以search-bar组件为例，完整的自定义组件由四个文件组成：

<!-- components/search-bar/index.wxml --> <view class="search-bar"> <view class="search-input-wrapper"> <input class="search-input" placeholder="搜索感兴趣的内容" bindinput="onInput" bindconfirm="onConfirm" /> </view> <view class="search-btn" bindtap="onSearch">搜索</view> </view>

// components/search-bar/index.js Component({ data: { keyword: '' }, methods: { onInput(e) { this.setData({ keyword: e.detail.value }) }, onConfirm() { this.triggerEvent('search', { keyword: this.data.keyword }) }, onSearch() { this.triggerEvent('search', { keyword: this.data.keyword }) } } })

triggerEvent是自定义组件向父级页面传递数据的方法，第一个参数是自定义事件名，第二个参数是要传递的数据对象。父组件通过bind:search接收。

3.6 首页常见报错与解决方案

开发过程中难免遇到报错，我把高频出现的问题整理成表格，方便你直接对照排查：

3.7 抓包调试与协议分析（理论备注）

调试时如果发现数据对不上或者跳转到了错误的页面，我一般会用抓包工具看看实际请求了什么。关于抓包的具体操作流程（比如如何配置代理、如何查看请求参数和返回内容），这些属于技术常识，不同工具的操作路径也大同小异。

值得说明的是：小程序官方强调用户隐私与数据安全，任何调试行为都必须以合规为前提，在自己确有权限的应用范围内排查问题。配置抓包工具之前，先想清楚两个问题：你是否有权对这个应用做协议分析？你获取的数据是否涉及他人隐私？如果这两个问题有任何一个存在疑问，建议立即停止。

3.8 微信支付集成与参数配置

首页完成、业务功能上线后，很多小程序都会遇到支付需求。微信支付的对接在技术上并不复杂，但步骤很琐碎，经常有人卡在参数配置上。

微信支付 V3 的对接流程大致是：

1. 申请支付商户号：需要企业资质，个体工商户也可以申请。
2. 配置 API 密钥：在商户平台设置 APIv3 密钥，用于回调验签和敏感信息加密。
3. 生成证书与密钥：微信支付 API 使用证书签名，需要生成商户私钥、商户证书序列号。
4. 服务端统一下单：后端调用微信支付接口POST /v3/pay/transactions/jsapi生成预支付交易单，拿到prepay_id。
5. 前端拉起支付：后端返回prepay_id后，前端用wx.requestPayment调起支付面板。

核心参数说明：

• appid：小程序 AppID
• mchid：商户号
• description：商品描述
• out_trade_no：商户订单号，唯一
• notify_url：支付结果回调地址
• amount.total：支付金额，单位是分

前端调用代码示例：

wx.requestPayment({ timeStamp: res.data.timeStamp, nonceStr: res.data.nonceStr, package: res.data.package, // 注意此处字段名就叫 package，不能改名 signType: 'RSA', paySign: res.data.paySign, success: function (res) { // 支付成功 }, fail: function (err) { // 支付失败或取消 } })

这里有一个非常容易踩的坑：package是 JavaScript 的保留字，但在微信支付参数里它就叫这个名字，不能换成其他字段名。而且支付参数必须全部由后端生成，前端拿到什么用什么，绝对不能在客户端拼签名，否则会被认定存在安全风险。

3.9 支付功能被限制后的处理流程

有时候小程序会因为内容审核、用户投诉等原因，出现“支付功能暂时无法使用”的提示。遇到这种情况，不要慌，按照下面的流程逐步排查：

1. 查看站内信：登录小程序管理后台，查看站内信中关于处罚或限制的具体说明，了解是哪一个功能模块违反了哪一条规定。
2. 确认违规类型：是涉及虚拟支付、类目不符，还是用户投诉，不同违规类型对应的整改要求不同。
3. 整改并提交申诉：
   • 修改代码，删除违规功能或调整业务流程。
   • 在后台提交申诉材料，说明整改情况。
   • 等待平台审核（通常 1~7 个工作日）。
4. 联系客服：如果长时间未处理，可以通过官方客服渠道询问进展。

这个过程我有两点切身体会：

• 不要删了直接重提，平台审核人员能看到完整的修改记录，只是在形式上“假装”删除，很容易被驳回。
• 保留整改前后对比截图，申诉时把整改说明写详细，一次性通过的概率会大很多。

3.10 HBuilderX 与微信开发者工具的关系

如果你用uni-app开发小程序，会遇到通过 HBuilderX 运行到小程序模拟器提示“不是开发者”的情况。这是因为 HBuilderX 只是编译工具，最终运行还是要依赖微信开发者工具。

解决办法是：

1. 打开 HBuilderX，菜单栏选择“运行” -> “运行到小程序模拟器” -> “微信开发者工具”。
2. 如果提示不是开发者，检查微信开发者工具的“设置” -> “安全设置”中，是否开启了“服务端口”。
3. 确认 HBuilderX 中配置的微信开发者工具安装路径正确。

顺带提一句，如果你只是做微信原生小程序开发，用微信开发者工具就够了，不一定要引入 HBuilderX。两者适用场景不同，不要混用。

4. 常见问题排查与优化心得

4.1 键盘弹起遮挡内容的处理方法

在小程序中使用输入框时，经常会遇到手机上软键盘弹起把输入框或查询按钮遮挡的问题。首页搜索框如果也遇到类似情况，推荐在input上设置adjust-position="{{false}}"禁止页面自动上推，然后在bindfocus事件中把输入框滚动到可视区域。

<input class="search-input" placeholder="搜索感兴趣的内容" adjust-position="{{false}}" bindfocus="onInputFocus" />

onInputFocus() { setTimeout(() => { wx.pageScrollTo({ scrollTop: 0, duration: 200 }) }, 100) }

也可以直接在page.json中配置"disableScroll": true，禁用页面滚动，让内容固定在可视区内。但这种方法只适用于单页面的简单交互，如果页面内容多就不太适合。

如果你想监听键盘高度做更精细的处理，可以调用wx.onKeyboardHeightChange：

wx.onKeyboardHeightChange(res => { // res.height 为键盘高度，为0表示键盘收起 this.setData({ keyboardHeight: res.height }) })

4.2 swiper 嵌套 video 导致全屏错位问题

这个需求很具体：iOS 上swiper里嵌套video组件，点击全屏播放时会出现全屏错位、退出后布局塌陷的问题。原因是video是原生组件，层级永远最高，在 iOS 的swiper中切换页面时容易出问题。

常规解决方案有两个：

1. 避免在 swiper 中嵌套 video：需要轮播视频时，用视频封面图做轮播，点击后再跳转到视频播放页。
2. 如果是视频列表：不要用swiper，改用scroll-view横向滚动，里面放video，避免原生组件和滑动容器冲突。

我实测下来，方案一是最省心的，不仅规避了 bug，还能减少同时加载多个视频带来的性能损耗。

4.3 反编译相关话题（合规提醒）

网上经常有人讨论“微信小程序反编译”，即通过工具把已发布的小程序包还原成源码。

我想认真提醒一句：小程序代码是加密存储在微信服务器上的，正常渠道无法直接获取他人的原始源代码。所谓“反编译”针对的是本地缓存中未加密的代码包，这本质上属于破解他人知识产权的行为，既违反《微信小程序平台运营规范》，也可能涉及侵权风险。

如果你确实想看某个小程序的实现方式，更合理的做法是：

• 在开发者社区搜索类似需求的方案。
• 使用小程序官方的“体验版”功能，让开发者主动展示代码效果。
• 如果是学习目的，网上有大量开源的完整项目、课程源码可供参考。

靠“反编译”拿到别人源码，学到的只是表面的 HTML 结构，丢失的却是原理层面的理解。这个行业最值钱的能力是“为什么这样做”，不是“代码长什么样”。

4.4 性能优化经验

首页作为流量入口，性能优化是重头戏。分享几条我压箱底的经验：

1. 图片懒加载。

image组件有一个lazy-load属性，设置为true后，图片会在进入视口时才加载：

<image src="{{item.cover}}" lazy-load="{{true}}" mode="aspectFill"></image>

首屏图片是按需加载了，但推荐流里的图片数量大，建议配合服务端做图片压缩或 CDN 缩放，比如把大图裁切成适合列表展示的尺寸。

2. 数据分批加载。

一次请求几十条数据，渲染时间会明显变长。推荐onReachBottom触底加载的设计，每次请求 10 条左右，实现“边滑边加载”的效果。注意在加载完成前用loading状态锁住，避免重复请求：

onReachBottom() { if (this.data.loading) return this.setData({ loading: true }) // 请求下一页数据 wx.request({ url: 'https://api.example.com/list', data: { page: this.data.currentPage + 1 }, success: (res) => { this.setData({ productList: this.data.productList.concat(res.data.list), currentPage: this.data.currentPage + 1, loading: false }) } }) }

3. 避免在 data 中放入大数据对象。

setData是双线程通信，数据量越大性能损耗越明显。如果组件内部有临时状态不需要渲染到视图，不要塞进data，直接挂在this上即可。

4.5 开发工具选择建议

最后聊聊开发工具。纯微信小程序开发，直接用微信开发者工具，它集成了代码编辑、模拟器、调试器、真机调试等功能，是最顺手的选择。

如果要用uni-app做跨端开发，那工作流就是：HBuilderX 编写代码 -> 编译成小程序 -> 用微信开发者工具预览调试。这种方式能一套代码同时发布到微信、支付宝、百度等平台，但代价是要接受不同平台之间的兼容性差异。

对于刚开始学小程序的同学，我的建议是：先只用微信开发者工具，用原生语法把基础打扎实。等你理解了小程序的生命周期、组件通信、事件机制后，再上跨端框架会事半功倍。反过来，一上来就用框架，很容易把框架的语法误当成小程序原生的能力，遇到问题排查起来非常被动。

写在最后

首页的代码看起来不长，但每一个细节都藏着小程序开发的底层逻辑：导航栏适配是基础环境问题，组件化是工程化思维，数据流设计是架构能力，后端交互是完整业务的拼图。把示例源码一行一行读透、改一遍、跑一遍，比看十篇教程都有用。

实际开发中我还有一个习惯，每做完一个页面都会重新整理一遍组件目录，把可复用的部分抽出来。做小程序和做任何工程一样，空间换时间，前期做了合理的抽象，后期每一次迭代都会越来越轻松。

本文还有配套的精品资源，点击获取