当前位置：首页 > 网站教程 > 正文

人人商城小程序怎么开发？ | 小程序开发入门教程

admin
网站教程
2026-02-08
3728

人人商城小程序开发方案

需求分析与功能规划

人人商城是一个基于微信小程序的电商平台,需要实现以下核心功能：

用户系统：注册/登录、个人信息管理、收货地址管理
商品展示：首页推荐、商品分类、搜索功能、商品详情
购物流程：加入购物车、结算下单、微信支付
订单管理：订单状态跟踪（待付款/待发货/待收货/已完成）
营销功能：优惠券、限时折扣、积分系统
后台管理：商品管理、订单管理、用户管理（需单独开发）

技术栈选择

前端：微信小程序原生框架 + WXML/WXSS/JavaScript
后端：微信云开发（CloudBase）提供数据库、存储和云函数
支付系统：微信支付（需企业资质）
UI框架：使用ColorUI组件库加速开发

界面设计思路

采用简洁明快的电商设计风格：

主色调：橙色（活力、热情）
辅助色：蓝色（信任、专业）
字体：系统默认字体 + 苹方字体
布局：卡片式设计，大间距，清晰的产品展示

小程序代码实现

目录结构

miniprogram/ ├── pages/ │ ├── index/ # 首页 │ ├── category/ # 分类页 │ ├── product/ # 商品详情页 │ ├── cart/ # 购物车 │ ├── order/ # 订单页 │ └── user/ # 个人中心 ├── components/ # 公共组件 ├── cloudfunctions/ # 云函数 ├── images/ # 图片资源 ├── styles/ # 公共样式 └── app.js # 小程序入口

核心页面实现

首页 (index/index.wxml)

<view class="container">  <view class="search-bar"> <input placeholder="搜索商品" bindconfirm="searchProducts" /> <icon type="search" size="20" /> </view>  <swiper autoplay interval="3000" circular> <swiper-item wx:for="{{banners}}" wx:key="index"> <image src="{{item.image}}" mode="aspectFill" /> </swiper-item> </swiper>  <view class="category-grid"> <view wx:for="{{categories}}" wx:key="id" bindtap="navigateToCategory"> <image src="{{item.icon}}" /> <text>{{item.name}}</text> </view> </view>  <view class="section-title">热门推荐</view> <view class="product-list"> <view wx:for="{{recommendProducts}}" wx:key="id" class="product-item" bindtap="viewProduct" data-id="{{item.id}}"> <image src="{{item.cover}}" /> <view class="info"> <text class="title">{{item.name}}</text> <text class="price">¥{{item.price}}</text> <text class="sold">已售{{item.sales}}件</text> </view> </view> </view> </view>

商品详情页 (product/index.wxml)

<view class="product-detail">  <swiper class="product-swiper"> <swiper-item wx:for="{{product.images}}" wx:key="index"> <image src="{{item}}" mode="aspectFit" /> </swiper-item> </swiper>  <view class="info-box"> <view class="price-row"> <text class="current-price">¥{{product.price}}</text> <text class="original-price" wx:if="{{product.originalPrice}}">¥{{product.originalPrice}}</text> <text class="sales">销量: {{product.sales}}</text> </view> <text class="title">{{product.name}}</text> <view class="tags"> <text wx:for="{{product.tags}}" wx:key="index">{{item}}</text> </view> </view>  <view class="spec-selector" bindtap="selectSpec"> <text>选择：{{selectedSpec || '请选择规格'}}</text> <icon type="arrowright" size="16" /> </view>  <view class="detail-content"> <rich-text nodes="{{product.detail}}" /> </view>  <view class="action-bar"> <view class="action-btn cart" bindtap="addToCart"> <icon type="cart" size="24" /> <text>购物车</text> </view> <view class="action-btn buy" bindtap="buyNow"> 立即购买 </view> </view> </view>

购物车页面 (cart/index.wxml)

<view class="cart-container">  <view class="cart-list"> <view wx:for="{{cartItems}}" wx:key="id" class="cart-item"> <checkbox checked="{{item.checked}}" bindtap="toggleCheck" data-id="{{item.id}}" /> <image src="{{item.image}}" /> <view class="info"> <text class="title">{{item.name}}</text> <text class="spec">{{item.spec}}</text> <view class="price-row"> <text class="price">¥{{item.price}}</text> <view class="count-control"> <button bindtap="decreaseCount" data-id="{{item.id}}">-</button> <text>{{item.count}}</text> <button bindtap="increaseCount" data-id="{{item.id}}">+</button> </view> </view> </view> </view> </view>  <view class="settle-bar"> <checkbox checked="{{allChecked}}" bindtap="toggleAll" /> <text>全选</text> <view class="total"> <text>合计：</text> <text class="price">¥{{totalPrice}}</text> </view> <view class="settle-btn" bindtap="checkout"> 结算({{checkedCount}}) </view> </view> </view>

核心逻辑实现

购物车管理 (cart/index.js)

Page({ data: { cartItems: [], allChecked: false, totalPrice: 0, checkedCount: 0 }, onShow() { this.loadCartData(); }, // 加载购物车数据 loadCartData() { const cartItems = wx.getStorageSync('cart') || []; this.calculateTotal(cartItems); this.setData({ cartItems }); }, // 计算总价和选中状态 calculateTotal(cartItems) { let totalPrice = 0; let checkedCount = 0; let allChecked = true; cartItems.forEach(item => { if (item.checked) { totalPrice += item.price * item.count; checkedCount++; } if (!item.checked) allChecked = false; }); this.setData({ totalPrice: totalPrice.toFixed(2), checkedCount, allChecked }); }, // 切换选中状态 toggleCheck(e) { const id = e.currentTarget.dataset.id; const cartItems = this.data.cartItems.map(item => { if (item.id === id) { item.checked = !item.checked; } return item; }); this.calculateTotal(cartItems); this.setData({ cartItems }); this.saveCart(cartItems); }, // 全选/取消全选 toggleAll() { const allChecked = !this.data.allChecked; const cartItems = this.data.cartItems.map(item => { item.checked = allChecked; return item; }); this.calculateTotal(cartItems); this.setData({ cartItems, allChecked }); this.saveCart(cartItems); }, // 增加数量 increaseCount(e) { const id = e.currentTarget.dataset.id; this.updateItemCount(id, 1); }, // 减少数量 decreaseCount(e) { const id = e.currentTarget.dataset.id; this.updateItemCount(id, -1); }, // 更新商品数量 updateItemCount(id, delta) { const cartItems = this.data.cartItems.map(item => { if (item.id === id) { const newCount = item.count + delta; if (newCount > 0 && newCount <= item.stock) { item.count = newCount; } } return item; }); this.calculateTotal(cartItems); this.setData({ cartItems }); this.saveCart(cartItems); }, // 保存购物车数据 saveCart(cartItems) { wx.setStorageSync('cart', cartItems); }, // 结算 checkout() { if (this.data.checkedCount === 0) { wx.showToast({ title: '请选择商品', icon: 'none' }); return; } const selectedItems = this.data.cartItems.filter(item => item.checked); wx.navigateTo({ url: `/pages/order/checkout?items=${JSON.stringify(selectedItems)}` }); } });

订单支付流程 (order/checkout.js)

Page({ data: { address: null, // 收货地址 items: [], // 订单商品 totalPrice: 0, // 订单总价 coupon: null // 优惠券 }, onLoad(options) { const items = JSON.parse(options.items); this.calculateTotal(items); this.setData({ items }); this.loadDefaultAddress(); }, // 计算订单总价 calculateTotal(items) { const totalPrice = items.reduce((sum, item) => { return sum + (item.price * item.count); }, 0); this.setData({ totalPrice }); }, // 加载默认收货地址 loadDefaultAddress() { const address = wx.getStorageSync('defaultAddress'); this.setData({ address }); }, // 选择收货地址 selectAddress() { wx.navigateTo({ url: '/pages/user/address/list' }); }, // 选择优惠券 selectCoupon() { wx.navigateTo({ url: '/pages/user/coupon/list' }); }, // 提交订单 submitOrder() { if (!this.data.address) { wx.showToast({ title: '请选择收货地址', icon: 'none' }); return; } const order = { items: this.data.items, address: this.data.address, totalPrice: this.data.totalPrice, coupon: this.data.coupon, createTime: new Date().getTime() }; // 实际开发中应调用云函数创建订单 this.createOrder(order); }, // 创建订单（模拟） createOrder(order) { wx.showLoading({ title: '创建订单中...' }); // 模拟网络请求 setTimeout(() => { wx.hideLoading(); // 跳转到支付页面 wx.navigateTo({ url: `/pages/order/pay?orderId=${order.id}&amount=${order.totalPrice}` }); // 从购物车中移除已购买商品 this.removePurchasedItems(order.items); }, 1500); }, // 移除已购买商品 removePurchasedItems(purchasedItems) { const cartItems = wx.getStorageSync('cart') || []; const newCart = cartItems.filter(item => !purchasedItems.some(p => p.id === item.id) ); wx.setStorageSync('cart', newCart); } });

优化方向

性能优化：
- 使用图片懒加载
- 数据分页加载
- 使用微信小程序分包加载
用户体验优化：
- 加入骨架屏
- 实现下拉刷新和上拉加载
- 添加购物车动画效果
- 安全优化：
  - 敏感操作使用云函数处理
  - 用户数据加密存储
  - 接口请求参数校验
  - 扩展功能：
    - 加入分销系统
    - 实现会员等级体系
    - 开发直播带货功能