如何快速搭建微信小程序商城？海风小店开源项目超详细指南 🚀

海风小店（hioshop-miniprogram）是一款功能完整的开源微信小程序商城项目，支持商品展示、购物车管理、订单支付等核心电商功能。本教程将带你从0到1搭建属于自己的微信小程序商城，无需复杂编程基础，新手也能轻松上手！

📋 1. 项目核心功能与优势

海风小店作为轻量化开源商城解决方案，具备以下亮点：

• 完整电商流程：覆盖商品浏览、加入购物车、订单结算、支付反馈全链路
• 原生微信体验：适配微信生态的界面设计，支持微信登录与支付
• 零成本启动：开源免费，无需购买商业授权即可商用
• 灵活扩展：模块化代码结构，支持自定义商品分类、会员体系等功能

图：海风小店核心功能模块示意图，展示从商品浏览到订单管理的完整流程

🔧 2. 一键部署：3分钟环境搭建

2.1 准备工作清单

开始前请确保已安装：

• 微信开发者工具（官方下载）
• Git 版本控制工具

2.2 快速获取源码

git clone https://gitcode.com/gh_mirrors/hi/hioshop-miniprogram

2.3 启动项目步骤

1. 打开微信开发者工具
2. 选择「导入项目」
3. 填写项目目录（克隆的本地仓库路径）
4. 输入小程序 AppID（无 AppID 可选择「测试号」）
5. 点击「导入」完成部署

图：微信开发者工具导入项目界面，按图示步骤即可完成部署

📁 3. 项目结构全解析

3.1 核心目录说明

hioshop-miniprogram/
├── app.js           # 全局应用入口
├── app.json         # 小程序配置文件
├── pages/           # 业务页面目录
│   ├── index/       # 商城首页
│   ├── goods/       # 商品详情页
│   ├── cart/        # 购物车页面
│   └── ucenter/     # 用户中心
├── components/      # 可复用组件
├── images/          # 静态资源图片
└── utils/           # 工具函数库

3.2 关键文件功能

app.json - 小程序配置中枢

该文件定义了小程序的页面路由、窗口样式和底部导航栏：

{
  "pages": ["pages/index/index", "pages/goods/goods"],
  "window": {
    "navigationBarTitleText": "海风小店",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "list": [
      {"pagePath": "pages/index/index", "text": "首页"},
      {"pagePath": "pages/cart/cart", "text": "购物车"}
    ]
  }
}

图：由 tabBar 配置生成的底部导航栏，包含首页、分类、购物车和我的四个核心入口

app.js - 应用生命周期管理

负责小程序初始化、微信登录和全局数据管理：

App({
  onLaunch: function() {
    // 微信登录逻辑
    wx.login({
      success: (res) => {
        // 获取用户登录凭证
      }
    });
  },
  globalData: {
    userInfo: null,
    token: ''
  }
})

✨ 4. 功能模块使用指南

4.1 商品展示功能

商品页面（pages/goods/goods.js）支持：

• 多图轮播展示
• 规格选择（尺寸/颜色）
• 加入购物车/立即购买
• 商品详情富文本展示

4.2 订单管理流程

1. 购物车结算：选择商品 → 确认数量 → 点击「结算」
2. 地址管理：在「我的-地址管理」中添加/编辑收货地址
3. 支付流程：支持在线支付和线下付款两种模式
4. 订单跟踪：在「我的订单」中查看物流状态

图：订单结算页面展示，包含地址选择、商品清单和支付方式选择

⚙️ 5. 个性化配置技巧

5.1 修改商城名称

打开 app.json 文件，修改 navigationBarTitleText 字段：

"window": {
  "navigationBarTitleText": "我的专属商城"
}

5.2 更换底部导航图标

替换 images/nav/ 目录下的图标文件，支持 PNG 格式图片，建议尺寸：81×81px

5.3 调整主题颜色

修改 app.json 中的 tabBar 配置：

"tabBar": {
  "selectedColor": "#ff4400",  // 选中项颜色
  "backgroundColor": "#f8f8f8"  // 背景色
}

🛠️ 6. 常见问题解决

Q: 导入项目后提示「找不到页面」？

A: 检查 app.json 中的 pages 数组是否包含正确的页面路径，确保文件名与目录名一致

Q: 微信登录失败如何处理？

A: 确认网络连接正常，测试号可能存在登录限制，建议使用正式 AppID

Q: 如何添加新的商品分类？

A: 1. 在 pages/category/ 目录添加分类页面
2. 在 app.json 注册新页面路径
3. 在 tabBar 配置中添加导航项

📈 7. 项目扩展建议

1. 对接支付接口：修改 services/pay.js 接入微信支付
2. 添加会员体系：扩展 ucenter 模块实现积分功能
3. 接入物流查询：在 express-info 页面集成物流 API
4. 开发营销工具：添加优惠券、秒杀等促销组件

用户中心界面
图：用户中心页面，可扩展会员等级、积分商城等功能模块

🎯 总结

通过本指南，你已掌握海风小店微信小程序商城的部署方法和核心功能。这个开源项目不仅适合电商创业者快速启动业务，也可作为学习微信小程序开发的实战案例。立即动手部署，30分钟即可拥有自己的微信商城！

需要进一步开发支持？可查阅项目中的 utils/util.js 工具库和 components/ 组件目录，获取更多技术细节。