小米风格电商小程序源码包，含视频+图文导入指南，开发者开箱就能跑

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

简介：直接可用的微信小程序仿小米商城完整项目，覆盖首页、商品列表、详情页、购物车、订单管理等核心电商功能模块。代码结构规范，每个页面都按WXML、WXSS、JS、JSON四文件标准组织；全局配置集中在app.和app.js中，窗口样式、路由跳转、生命周期逻辑清晰；app.wxss统一定义基础样式，pages目录下各页面独立可维护，utils里封装了时间处理、网络请求等常用工具函数。配套两套导入教学：一份带详细截图的Word文档，从创建项目开始一步步说明；另一份是实操录制的MP4视频，演示如何在微信开发者工具中导入源码、填写AppID、编译调试并真机预览。所有代码已在最新版开发者工具验证通过，无需修改即可成功编译运行，适合新手练手、教学演示或快速搭建垂直电商原型。

1. 这不是“套模板”，而是一套真正能跑通的电商小程序骨架

如果你在搜索引擎里搜“小米商城小程序源码”，大概率会看到一堆标题党：写着“高仿”“完整版”“带后台”，点进去却发现只有首页轮播图+几个静态商品卡片，连跳转都报错，更别说加购物车、下单、支付这些核心链路。我做过三年小程序教学，也帮二十多个中小团队搭过电商原型，见过太多所谓“开箱即用”的源码包——解压后第一件事不是运行，而是花两小时修路径、改appid、补缺失的npm包，最后发现连登录态都没做，用户一刷新就回到未登录状态。这套小米风格电商小程序源码，是我去年给本地一家数码配件厂商做快速验证时沉淀下来的最小可行产品（MVP）骨架。它不追求炫酷动画或复杂营销组件，但把电商最核心的五个闭环环节——曝光（首页）、筛选（列表）、决策（详情）、履约（购物车→订单）、反馈（订单管理）——全部用原生小程序语法扎实实现。所有页面严格遵循WXML+WXSS+JS+JSON四文件结构，没有用任何第三方UI库（比如WeUI或Vant），所有样式都是手写WXSS，所有交互逻辑都在JS里明明白白写清楚。配套的图文文档和视频教程，也不是那种“点击这里→点击那里→好了”的流水账，而是真实还原了我在开发者工具里操作时遇到的三个典型卡点：AppID填错导致云函数调用失败、pages目录下.json文件路径大小写不一致引发编译报错、真机调试时手机端提示“网络请求域名未配置”。你拿到手的第一分钟，就能在模拟器里点进商品详情页，把商品加入购物车，再跳到订单页完成下单流程——整个过程不需要改一行代码，也不需要查文档。它适合谁？不是给想接外包的大神，而是给刚学完小程序基础语法、正对着官方文档发懵的新手；是给高校老师准备实训课作业的现成素材；也是给产品经理快速验证一个垂直品类（比如宠物用品、户外装备）电商流程是否走得通的最小原型。关键词里写的“微信小程序”“小米商城仿写”“电商源码”“小程序导入教程”，每一个都不是虚的——它就是为解决“学了语法却不会搭完整项目”这个最痛的点而生的。

2. 为什么选这套结构？不是炫技，而是为了让你少踩坑

2.1 四文件结构：不是教条，是协作与维护的生命线

很多人初学小程序时，喜欢把WXML、WXSS、JS全塞进一个文件里，觉得“方便”。等项目页面超过5个，就会发现：改一个按钮颜色要翻三处代码，加个新接口要同时改JS里的请求和WXML里的绑定，最后连自己都忘了某个变量是在哪个文件里定义的。这套源码坚持每个页面独立的WXML+WXSS+JS+JSON四文件，表面看是多建了三个文件，实际是把关注点彻底分离。WXML只管“长什么样”，WXSS只管“怎么好看”，JS只管“怎么动”，JSON只管“页面配置”。比如pages/index/index.wxml里只写结构：

<view class="container">
  <swiper autoplay interval="3000" duration="500" circular>
    <swiper-item wx:for="{{banners}}" wx:key="id">
      <image src="{{item.imgUrl}}" mode="aspectFill" class="banner-img"/>
    </swiper-item>
  </swiper>
  <view class="nav-list">
    <navigator url="/pages/category/category" class="nav-item">分类</navigator>
    <navigator url="/pages/search/search" class="nav-item">搜索</navigator>
  </view>
</view>

而pages/index/index.js里只处理数据和逻辑：

Page({
  data: {
    banners: []
  },
  onLoad() {
    this.loadBanners();
  },
  loadBanners() {
    // 实际项目中这里会调用utils/request封装的GET请求
    // 但源码里直接mock了静态数据，避免新手被网络配置绊住
    this.setData({
      banners: [
        { id: 1, imgUrl: '/images/banner1.png' },
        { id: 2, imgUrl: '/images/banner2.png' }
      ]
    });
  }
});

这种分离带来的好处，在多人协作时尤其明显：UI设计师改WXSS不影响JS逻辑，后端同学提供新接口，前端只需改JS里的请求地址和data字段，WXML里绑定的变量名都不用动。更重要的是，它强制你养成“先想结构、再写样式、最后加交互”的工程化思维——这比学会十个API重要得多。

2.2 全局配置集中化：app.json和app.js的分工哲学

很多新手一上来就在每个页面的.json文件里反复写"navigationBarTitleText": "首页"，结果改个标题要手动改七八个文件。这套源码把所有全局配置收束到app.json里：

{
  "pages": [
    "pages/index/index",
    "pages/product/list",
    "pages/product/detail",
    "pages/cart/cart",
    "pages/order/list"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ff6700",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "小米商城",
    "backgroundColor": "#f5f5f5"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#ff6700",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/tabbar/home.png",
        "selectedIconPath": "assets/tabbar/home-active.png"
      }
    ]
  }
}

这里的关键在于"window"对象——它定义了所有页面共用的导航栏样式、背景色，而不是每个页面单独配。而app.js则专注生命周期管理：

App({
  onLaunch() {
    // 小程序初始化完成时触发，适合放全局初始化逻辑
    // 源码里这里只做了基础日志打印，避免新手被复杂的云开发初始化吓退
    console.log('小程序启动');
  },
  onShow() {
    // 小程序切前台时触发，比如从后台返回
  },
  onHide() {
    // 小程序切后台时触发
  }
});

为什么不在onLaunch里直接调用登录接口？因为源码定位是“可运行的骨架”，不是“生产级应用”。真实项目里这里会集成用户登录态、设备信息上报、版本检测，但对新手来说，先让页面跑起来比理解鉴权流程更重要。等你能熟练操作购物车增删了，再回头加登录态，才是符合认知曲线的学习路径。

2.3 utils工具库：不是炫技，是帮你绕过“重复造轮子”的陷阱

utils文件夹里只有三个文件：util.js（时间格式化）、request.js（请求封装）、validate.js（表单校验）。没有堆砌几十个函数，每个都直击新手高频痛点。比如util.js里的日期格式化：

function formatTime(date) {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

看起来简单，但新手自己写常犯两个错：一是忘记月份要+1（JavaScript里Date.getMonth()返回0-11），二是没处理个位数补零（比如8月变成”8/1”而不是”08/01”）。这个函数抄过去就能用，省下调试半小时。再看request.js，它没用任何第三方库，只用小程序原生wx.request，但做了三件事：统一基础URL前缀、自动携带token（源码里mock为空字符串，留出扩展位）、错误统一处理：

function request(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: 'https://api.example.com' + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Authorization': wx.getStorageSync('token') || ''
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(`HTTP ${res.statusCode}`));
        }
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
}

关键点在于：它把wx.request的回调地狱变成了Promise链式调用，后续在页面JS里可以直接await request({url: '/products'})，而不是嵌套三层回调。这对刚学异步编程的新手，是认知负担的大幅降低。

3. 导入实操：从解压到真机预览，每一步都踩过坑

3.1 开发者工具创建项目：别急着导入，先确认环境

拿到源码包，第一步不是双击project.config.json，而是打开微信开发者工具，点击“新建项目”。这里有个极易被忽略的细节：项目目录必须选择源码包解压后的根目录，而不是NanaXDpkJ0M8ewb512J9-master-39aeddfa4e3018e4498d674c70f1698486cf5207这个文件夹本身。因为解压后的真实结构是：

NanaXDpkJ0M8ewb512J9-master-39aeddfa4e3018e4498d674c70f1698486cf5207/
├── app.json
├── app.js
├── app.wxss
├── pages/
├── utils/
├── project.config.json
└── ...

而project.config.json里写的miniprogramRoot是./，意味着它默认把当前目录当作小程序根目录。如果你选错了目录层级，开发者工具会报错“找不到app.json”。我第一次教学生时，有七个人卡在这一步，有人选了桌面，有人选了压缩包所在文件夹，折腾四十分钟才发现该点进那个带app.json的文件夹。所以图文教程里第一步截图，特意放大了资源管理器的路径栏，视频教程里我甚至用鼠标拖拽着箭头，一帧一帧指给你看“这里，就是这个蓝色文件夹，双击进去”。

3.2 AppID配置：不是填错，而是根本没填

很多新手导入后点“编译”，看到红字报错：“Error: app.json: ["pages"] must be Array”，第一反应是去查app.json语法。其实90%的情况是：你根本没填AppID。开发者工具右上角有个“详情”按钮，点开后切换到“本地设置”选项卡，找到“AppID”输入框——这里必须填你自己的小程序AppID，不能为空。源码里app.json的"pages"数组是完整的，报错只是因为工具检测到AppID为空，拒绝加载任何配置。填完AppID后，记得点右上角的“重新编译”，而不是关掉再开。视频教程里我故意演示了一次填错AppID（输成一串字母），然后展示控制台报错信息，再对比正确填写后的绿色成功提示，就是为了强化这个认知：AppID不是可选项，是小程序运行的“身份证”。

3.3 真机调试：为什么手机扫不出二维码？

编译成功后，开发者工具右上角有“预览”按钮，生成二维码。这时常见问题：手机微信扫了没反应，或者提示“该小程序不存在”。原因有三个：第一，手机和电脑没连同一个Wi-Fi（这是最傻也最常见的错误，我亲眼见三个学生为此打电话问客服）；第二，开发者工具的“服务端口”被防火墙拦截，解决方案是在“设置→安全设置”里勾选“允许通过网络访问本地服务”；第三，也是最隐蔽的——你的小程序还没在微信公众平台提交审核，处于“开发版本”状态，而微信要求真机调试必须开启“调试模式”。解决方法：在开发者工具顶部菜单栏，点击“项目→管理项目设置”，找到“调试基础库版本”，选一个稳定版本（比如2.28.2），然后在手机微信“发现→小程序→右上角三个点→设置→关于小程序→检查新版本”，确保手机微信已更新。图文教程里专门用一页截图，标注了Wi-Fi名称、防火墙设置开关、手机检查更新的路径，连字体大小都调到最大，就为了让你一眼看清。

4. 核心功能模块拆解：不只是能跑，更要懂它怎么跑

4.1 首页：轮播图+宫格导航的性能优化实践

首页的轮播图用的是小程序原生<swiper>组件，但源码做了两个关键优化：一是autoplay设为true的同时，interval设为3000毫秒（3秒），避免过于频繁的切换让用户眼花；二是circular设为true，实现无缝循环，但这会带来一个问题：当只有两张图片时，滑动会卡顿。源码在index.js里加了判断：

loadBanners() {
  const banners = [
    { id: 1, imgUrl: '/images/banner1.png' },
    { id: 2, imgUrl: '/images/banner2.png' }
  ];
  // 如果只有两张，复制一份保证无缝
  if (banners.length === 2) {
    banners.push(...banners);
  }
  this.setData({ banners });
}

这不是过度设计，而是真实场景需求——小商家初期可能就拍两张主推图，但用户体验不能打折。再看宫格导航，<navigator>标签里url属性写的是/pages/category/category，注意前面的斜杠。新手常写成pages/category/category（漏掉开头斜杠），导致跳转失败。源码里所有页面路径都严格以/开头，这是小程序路由的硬性要求。另外，navigator的hover-class默认是navigator-hover，但源码在app.wxss里重置了：

.navigator-hover {
  background-color: rgba(0,0,0,0.05);
}

这样点击时才有轻微灰底反馈，否则用户会怀疑按钮没点上。这些细节，文档里不会写，但实际体验差就差在这一毫秒的反馈上。

4.2 商品详情页：图片懒加载与规格选择的交互逻辑

详情页的主图用<image>组件，但加了lazy-load属性：

<image 
  src="{{product.mainImage}}" 
  mode="aspectFill" 
  class="main-image"
  lazy-load
/>

lazy-load是小程序基础库2.7.0+支持的特性，意思是图片进入视口才开始加载，避免首屏渲染时一次性拉取十几张大图导致卡顿。源码里所有商品图都放在/images/products/目录下，命名规则是product_1.jpg、product_2.jpg，这样在列表页用/images/products/product_${item.id}.jpg就能动态拼接，不用每个商品单独存路径。规格选择用的是<picker>组件，但源码没用默认的下拉框，而是自定义了<view>模拟：

<view class="spec-item" wx:for="{{product.specs}}" wx:key="id">
  <text class="spec-name">{{item.name}}</text>
  <view class="spec-options">
    <view 
      class="spec-option {{item.selected ? 'active' : ''}}" 
      wx:for="{{item.options}}" 
      wx:key="id"
      bindtap="selectSpec"
      data-spec-id="{{item.id}}"
      data-option-id="{{index}}"
    >
      {{item.options[index]}}
    </view>
  </view>
</view>

bindtap事件里selectSpec函数会更新data中的selected状态，并实时计算价格变动。为什么不用原生<picker>？因为原生组件样式无法深度定制，而小米风格要求规格按钮有圆角、阴影、选中态高亮，自定义<view>才能完全控制。视频教程里我专门录了两分钟，演示如何用Chrome开发者工具调试这个点击事件，看data如何变化，再看价格数字如何实时更新——让抽象的“响应式数据绑定”变成肉眼可见的过程。

4.3 购物车：本地存储的可靠性边界

购物车数据存在wx.setStorageSync里，而不是云数据库。源码里cart.js的addToCart函数：

function addToCart(product, quantity = 1) {
  let cart = getCart();
  const exist = cart.find(item => item.id === product.id);
  if (exist) {
    exist.quantity += quantity;
  } else {
    cart.push({
      id: product.id,
      name: product.name,
      price: product.price,
      image: product.image,
      quantity: quantity
    });
  }
  wx.setStorageSync('cart', cart);
}

这里有个隐藏知识点：wx.setStorageSync有10MB存储上限，但更重要的是，它不是实时同步的。如果用户快速连续点击“加入购物车”十次，理论上可能因异步写入丢失部分数据。源码没做防抖，因为定位是学习骨架，但我在图文教程的“注意事项”里明确写了：“生产环境务必加节流，或改用云数据库”。同样，getCart()函数用了try...catch包裹wx.getStorageSync：

function getCart() {
  try {
    return wx.getStorageSync('cart') || [];
  } catch (e) {
    console.error('读取购物车失败', e);
    return [];
  }
}

因为小程序有时会因存储损坏清空本地数据，try...catch能防止整个购物车模块崩溃。这种“防御性编程”思维，是文档里不会教，但工作中天天用的硬技能。

4.4 订单管理：分页加载的临界点处理

订单列表页用<scroll-view>实现滚动加载，但源码没用复杂的节流防抖，而是用了一个极简方案：监听bindscrolltolower事件，每次到底部就加载下一页：

onReachBottom() {
  if (this.data.hasMore) {
    this.loadOrders(this.data.page + 1);
  }
}

关键在hasMore的判断逻辑：

loadOrders(page) {
  // mock数据，实际应调用API
  const newOrders = mockOrders.slice((page - 1) * 10, page * 10);
  const hasMore = newOrders.length === 10;
  this.setData({
    orders: this.data.orders.concat(newOrders),
    page: page,
    hasMore: hasMore
  });
}

这里hasMore由本次加载的数据量是否等于每页数量决定。如果API返回少于10条，说明到底了，hasMore变false，后续滚动不再触发加载。这个逻辑看似简单，但新手常犯的错是：把hasMore写死成true，导致无限加载空白页；或者在setData里没用concat而是直接赋值，覆盖了之前的数据。源码里每一行都有注释，视频教程里我甚至用不同颜色的光标，逐行讲解concat和直接赋值的区别。

5. 常见问题与排查技巧实录：那些文档里不会写的坑

5.1 编译报错“Cannot find module ‘xxx’”：不是缺包，是路径错了

新手导入后常看到红色报错：“Cannot find module ‘../utils/request’”。第一反应是npm install，但小程序原生开发根本不用npm。真实原因是：import语句里的相对路径写错了。比如pages/product/detail.js里写：

const request = require('../../utils/request.js');

而实际request.js在utils/目录下，detail.js在pages/product/目录下，向上两级是项目根目录，再进utils，路径没错。但如果误写成'../../../utils/request.js'（多了一个..），就会报这个错。排查方法：在开发者工具左侧“调试器→Console”里，输入require.resolve('../utils/request.js')，如果返回路径，说明路径正确；如果报错，就说明路径不对。图文教程里专门做了个表格，列出pages下各页面到utils的正确相对路径：

这个表格是我帮学生debug时总结的，比背规则管用。

5.2 真机预览图片不显示：不是代码问题，是域名没配

在开发者工具里图片显示正常，但真机扫码后全是空白占位符。99%是因为：你没在微信公众平台配置request合法域名。小程序所有网络请求（包括wx.request和<image>的src）都必须走HTTPS，且域名要在后台“开发管理→开发设置→服务器域名”里备案。源码里图片用的是本地路径/images/xxx.png，所以没问题；但如果你把src改成https://example.com/image.jpg，就必须把example.com加到request域名列表里。排查方法：真机调试时打开“调试→Network”，刷新页面，看图片请求是否显示红色404。如果是，就去后台加域名。视频教程里我演示了从微信公众平台后台进入设置页的完整路径，连鼠标悬停在“开发设置”上的提示文字都截下来了，就为了让你知道该点哪里。

5.3 加入购物车没反应：不是逻辑错，是事件绑定漏了

点击“加入购物车”按钮，控制台没报错，但购物车数量没变。检查bindtap事件是否写在<button>上：

<!-- 错误写法：事件绑在view上，view不响应点击 -->
<view bindtap="addToCart">加入购物车</view>

<!-- 正确写法：button自带点击态，且更语义化 -->
<button bindtap="addToCart">加入购物车</button>

<view>默认不响应点击事件，必须加catchtap或bindtap并设置cursor: pointer样式，但<button>天生支持。源码里所有可点击区域都用<button>或<navigator>，这是小程序最佳实践。我在教学时让学生故意把<button>改成<view>，然后观察真机点击时的手势反馈差异——<button>有水波纹，<view>没有，这就是用户体验的分水岭。

5.4 tabBar不显示：不是配置错，是页面路径没注册

按理说app.json里写了tabBar，但底部导航栏就是不出现。检查tabBar的list里pagePath是否和pages数组里的路径完全一致。源码里写的是：

"list": [
  {
    "pagePath": "pages/index/index",
    "text": "首页"
  }
]

而pages数组里是：

"pages": [
  "pages/index/index",
  "pages/product/list"
]

两者必须完全匹配，包括大小写。曾经有学生把pages/index/index写成Pages/Index/Index（Windows系统不区分大小写，但线上环境区分），导致tabBar消失。排查方法：在开发者工具“调试器→Console”里输入wx.getTabBar()，如果返回undefined，说明tabBar根本没加载，大概率是路径不匹配。图文教程里用加粗字体强调：“pagePath必须与pages数组中的路径一字不差，包括大小写和斜杠方向”。

6. 后续可扩展的方向：从骨架到产品的跃迁路径

这套源码不是终点，而是起点。我自己用它做过三次升级：第一次加了微信支付，把订单页的“立即支付”按钮连到wx.requestPayment；第二次接入了云开发，把购物车数据从本地存储迁移到云数据库，解决了多设备同步问题；第三次加了商品搜索，用云函数实现模糊匹配。但对新手，我建议按这个顺序渐进：先吃透现有五个页面的数据流向——首页怎么把banner数据传给WXML，详情页怎么把商品ID传给购物车，购物车怎么把选中项传给订单页。画一张简单的数据流图，用纸笔就行，不用任何工具。等你能闭着眼睛说出“用户点击首页商品，触发navigator跳转到/pages/product/detail?id=123，detail.js的onLoad从options.id取值，再调用request拉商品详情，最后setData更新WXML绑定”，你就真正入门了。之后再考虑加功能：比如把utils/request.js里的mock API换成真实的后端地址，把app.js里的onLaunch加上登录态检查，把购物车的本地存储换成云数据库。不要一上来就想做“完整商城”，先让一个商品从首页到下单的闭环跑通十遍，比堆一百个没用的功能更有价值。最后分享一个小技巧：每次改完代码，不要只点“编译”，而是点“清除缓存并重新编译”，特别是改了app.json或project.config.json之后。我踩过三次坑，都是因为缓存导致新配置不生效，白白浪费两小时查bug。

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

简介：直接可用的微信小程序仿小米商城完整项目，覆盖首页、商品列表、详情页、购物车、订单管理等核心电商功能模块。代码结构规范，每个页面都按WXML、WXSS、JS、JSON四文件标准组织；全局配置集中在app.和app.js中，窗口样式、路由跳转、生命周期逻辑清晰；app.wxss统一定义基础样式，pages目录下各页面独立可维护，utils里封装了时间处理、网络请求等常用工具函数。配套两套导入教学：一份带详细截图的Word文档，从创建项目开始一步步说明；另一份是实操录制的MP4视频，演示如何在微信开发者工具中导入源码、填写AppID、编译调试并真机预览。所有代码已在最新版开发者工具验证通过，无需修改即可成功编译运行，适合新手练手、教学演示或快速搭建垂直电商原型。

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