一款商城小程序

scriptsboy

于 2025-07-16 10:59:39 发布

阅读量731

点赞数 10

CC 4.0 BY-SA版权

分类专栏：消费支付文章标签：小程序

本文链接：https://blog.youkuaiyun.com/scriptsboy/article/details/149390179

最近一直想做一个小程序，希望同时能够满足支付宝、微信平台，同时提供后端管理平台方便进行管理维护。基于需求，打算设计了一款名为“ProjectMall”（项目商城）的小程序，主要针对软件开发/项目外包场景（从订单状态如“澄清中、开发中、交付中”来看，这更像是项目服务售卖，而非实体商品）。它支持：

商品管理：管理员后台上传/编辑项目服务（如“APP开发服务”、“网站定制”）。
线上售卖：用户浏览、下单。
支付方式：支持多种支付接入，包括微信支付、支付宝支付。简单实现：管理员在后台上传支付码（二维码）或设置支付链接，用户扫码/跳转支付。实际开发中可集成官方支付API（如微信支付商户号），但为简化，我在代码中模拟了支付流程（真实上线需接入官方SDK）。
订单管理：支持指定状态（澄清中、开发中、交付中、已交付、验收中、已验收、付款中、已付款、已完成）。管理员可更新状态，用户可查看。

小程序基于微信小程序框架设计（因为微信生态更成熟，用户基数大），但我会说明如何适配支付宝小程序（支付宝小程序使用类似语法，如AXML/AXSS/JS，需调整页面后缀和API调用）。如果您需要纯支付宝版本，我可以进一步调整。

响应结构：

产品设计与交互：包括整体架构、用户旅程、UI/UE优化。
技术实现与源代码：提供完整、可运行的微信小程序源代码（使用Taro或原生小程序框架模拟）。代码是简化的示例（实际生产需添加后端服务器，如Node.js + MongoDB），但足够详细，包括前端页面、逻辑和模拟数据。
优化建议与注意事项：基于搜索结果和我的经验。

当前日期：2025年07月15日（参考搜索结果中提到的相关开发经验，如小程序开发职位和设计规范）。

1. 产品设计与交互

整体架构

目标用户：
- 买家（用户）：需要软件开发/项目服务的个人或企业（如创业者、公司）。
- 卖家（管理员）：项目服务提供商（如开发团队），负责商品管理和订单处理。
核心功能模块：
- 首页：商品（服务）列表展示、搜索。
- 商品详情：服务介绍、价格、下单。
- 订单列表：用户查看订单状态，管理员管理订单。
- 后台管理：商品上传/编辑、订单状态更新、支付码设置（简单表单上传二维码图片或链接）。
- 支付：支持微信/支付宝支付。简单模式：管理员上传支付二维码，用户扫码支付；高级模式：集成API自动收款。
订单状态流程（基于您的指定，设计为线性状态机）：
1. 澄清中（需求确认）。
2. 开发中（项目实施）。
3. 交付中（上传成果）。
4. 已交付（买家接收）。
5. 验收中（买家测试）。
6. 已验收（确认OK）。
7. 付款中（发起支付）。
8. 已付款（支付成功）。
9. 已完成（订单关闭）。
数据流：使用云开发（如微信云开发或阿里云）存储商品/订单数据，避免复杂后端。支付使用官方API或模拟二维码。

用户旅程（交互设计）

买家旅程：
1. 进入小程序 → 首页浏览商品列表（卡片式展示：服务名称、价格、简介）。
2. 点击商品 → 详情页（富文本介绍、图片、立即下单按钮）。
3. 下单 → 填写需求描述 → 提交订单（初始状态：澄清中）。
4. 查看订单 → 订单列表页，显示状态进度条（可视化如进度圈）。
5. 支付环节：在“付款中”状态，显示支付二维码/链接，用户扫码支付 → 状态更新为“已付款”。
管理员旅程（需登录，简单使用微信/支付宝授权）：
1. 后台入口（隐藏tab或按钮）→ 商品管理页：上传服务（名称、价格、描述、支付码）。
2. 订单管理页：查看所有订单，更新状态（下拉选择器）。
关键交互：
- 下拉刷新订单列表。
- 实时通知：使用小程序订阅消息推送状态变更（e.g., “您的订单已进入开发中”）。
- 错误处理：如支付失败，弹窗提示重试。

UI/UE优化

基于搜索结果3（支付宝/微信小程序设计规范），参考Material Design和Human Interface Guidelines进行优化：

UI风格：简洁、现代。使用微信/支付宝原生组件（如van-button from Vant Weapp库）。颜色：主色蓝色（#007AFF，代表信任），辅助色灰色。字体：PingFang SC，字号14-18px。
UE优化：
- 一致性：所有页面统一导航栏（顶部tab：首页、订单、我的）。
- 直观性：订单状态使用进度条+图标（e.g., 澄清中用问号图标，开发中用齿轮图标）。动画：页面切换用淡入淡出，避免卡顿。
- 可用性：按钮大而明显（e.g., “下单”按钮全宽）。表单输入：自动校验（如价格必填）。
- 性能：懒加载图片，减少HTTP请求。适配暗黑模式。
- Accessibility：添加ARIA标签，支持语音阅读。
- 基于经验：从搜索结果1和19，我的设计强调用户积累（如小程序积累8000+用户）和项目管理（如从程序员到项目经理的转型），确保小程序有“收入潜力”（e.g., 通过支付抽成）。
A/B测试建议：测试两种支付UI（二维码 vs. 一键支付），优化转化率。

2. 技术实现与源代码

技术栈

框架：微信小程序原生（WXML/WXSS/JS）。集成Vant Weapp UI库（需在小程序开发者工具中安装）。
数据存储：使用微信云开发（数据库模拟商品/订单）。支付：模拟二维码显示（真实需接入微信支付API）。
适配支付宝小程序：将WXML改为AXML，WXSS改为ACSS，API从wx.改为my.（e.g., wx.request → my.request）。支付用支付宝的tradePay API。
开发环境：微信开发者工具。代码假设已配置云开发。

完整源代码

以下是完整的小程序源代码（目录结构）。复制到微信开发者工具中即可运行（需新建项目，启用云开发）。代码包括模拟数据，实际需替换为真实后端。

项目目录结构：

ProjectMall
├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index (首页)
│   │   ├── index.wxml
│   │   ├── index.wxss
│   │   ├── index.js
│   │   └── index.json
│   ├── product-detail (商品详情)
│   │   ├── product-detail.wxml
│   │   ├── product-detail.wxss
│   │   ├── product-detail.js
│   │   └── product-detail.json
│   ├── orders (订单列表)
│   │   ├── orders.wxml
│   │   ├── orders.wxss
│   │   ├── orders.js
│   │   └── orders.json
│   ├── admin (后台管理)
│   │   ├── admin.wxml
│   │   ├── admin.wxss
│   │   ├── admin.js
│   │   └── admin.json
├── utils
│   └── util.js (工具函数)
└── cloud (云开发配置，开发者工具自动生成)

app.js (全局逻辑)

// app.js
App({
   
   
  onLaunch() {
   
   
    // 初始化云开发
    if (!wx.cloud) {
   
   
      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
   
   
      wx.cloud.init({
   
   
        env: 'your-cloud-env-id', // 替换为您的云环境ID
        traceUser: true,
      });
    }
    // 模拟登录（实际用wx.login）
    this.globalData.userId = 'user123'; // 买家
    this.globalData.isAdmin = false; // 是否管理员，实际基于登录判断
  },
  globalData: {
   
   
    userId: '',
    isAdmin: false,
    orderStates: ['澄清中', '开发中', '交付中', '已交付', '验收中', '已验收', '付款中', '已付款', '已完成'] // 订单状态
  }
});

app.json (全局配置)

{
   
   
  "pages": [
    "pages/index/index",
    "pages/product-detail/product-detail",
    "pages/orders/orders",
    "pages/admin/admin"
  ],
  "window": {
   
   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#007AFF",
    "navigationBarTitleText": "ProjectMall",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
   
   
    "color": "#999",
    "selectedColor": "#007AFF",
    "list": [
      {
   
   
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png", // 需添加图标
        "selectedIconPath": "images/home-active.png"
      },
      {
   
   
        "pagePath": "pages/orders/orders",
        "text": "订单",
        "iconPath": "images/order.png",
        "selectedIconPath": "images/order-active.png"
      },
      {
   
   
        "pagePath": "pages/admin/admin",
        "text": "后台",
        "iconPath": "images/admin.png",
        "selectedIconPath": "images/admin-active.png"
      }
    ]
  },
  "usingComponents": {
   
   
    "van-button": "@vant/weapp/button/index", // 需安装Vant
    "van-card": "@vant/weapp/card/index",
    "van-progress": "@vant/weapp/progress/index"
  }
}

app.wxss (全局样式)

/* app.wxss */
.page {
   
   
  background: #f8f8f8;
  padding: 20rpx;
}
.button {
   
   
  background: #007AFF;
  color: white;
  border-radius: 10rpx;
}

pages/index/index.wxml (首页 - 商品列表)

<view class="page">
  <view wx:for="{
    
    {products}}" wx:key="id" class="card">
    <van-card title="{
    
    {item.name}}" thumb="{
    
    {item.image}}" desc="{
    
    {item.desc}}" price="{
    
    {item.price}}">
      <view slot="footer">
        <van-button type="primary" size="small" bindtap="toDetail" data-id="{
    
    {item.id}}">查看详情</van-button>
      </view>
    </van-card>
  </view>
</view>

pages/index/index.js (首页逻辑)

// pages/index/index.js
const app = getApp();
Page({
   
   
  data: {
   
   
    products: [] // 商品列表
  },
  onLoad() {
   
   
    this.loadProducts();
  },
  loadProducts() {
   
   
    wx.cloud.database().collection('products').get().then(res => {
   
   
      this.setData({
   
    products: res.