Build a Complete Multi‑Platform E‑Commerce App from Scratch: Full Development Workflow

Core Goal

Walk through a complete real‑world e‑commerce development workflow: requirement analysis → architecture setup → page development → feature integration → optimization → publishing. After completing the tutorial you can independently launch the project.

Project Overview

Small, launch‑ready mall with the following features:

Home page (carousel, navigation, product recommendations)

Product list (search, filter, infinite scroll)

Product detail (image, price, add‑to‑cart)

Shopping cart (add/remove, select, total calculation, checkout)

User profile (info, logout)

Login / registration

Supports publishing to H5, WeChat mini‑program, and native App.

Architecture Setup (Follow the Steps)

1. Page Planning (pages.json)

pages: [
  // Home
  { "path": "pages/index/index" },
  // Product list
  { "path": "pages/goods/list" },
  // Product detail
  { "path": "pages/goods/detail" },
  // Cart
  { "path": "pages/cart/cart" },
  // Login
  { "path": "pages/user/login" },
  // User profile
  { "path": "pages/user/user" }
]

2. tabBar Configuration (Bottom Navigation)

"tabBar": {
  "list": [
    { "pagePath": "pages/index/index", "text": "首页" },
    { "pagePath": "pages/goods/list", "text": "商品" },
    { "pagePath": "pages/cart/cart", "text": "购物车" },
    { "pagePath": "pages/user/user", "text": "我的" }
  ]
}

3. Directory Structure

/components       // Common components (product card, navigation bar)
/pages            // All pages
/static           // Images, icons
/utils            // Utilities (request wrapper)
manifest.json     // Multi‑platform configuration
pages.json        // Routing and navigation

4. Request Wrapper (utils/request.js)

export default function request(options) {
  return new Promise((resolve, reject) => {
    uni.showLoading({ title: '加载中...' })
    uni.request({
      url: 'https://xxx.com/api' + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      success: res => resolve(res.data),
      fail: err => reject(err),
      complete: () => uni.hideLoading()
    })
  })
}

Core Page Development

Home Page (index.vue)

Essential features:

Carousel (swiper/uni‑swiper)

Navigation grid (uni‑grid)

Product recommendations (uni‑card + custom card)

Pull‑down refresh

<!-- Carousel -->
<swiper indicator-dots autoplay circular>
  <swiper-item v-for="item in banner" :key="item.id">
    <image :src="item.image" mode="widthFix"></image>
  </swiper-item>
</swiper>

<!-- Navigation -->
<uni-grid :column="4">
  <uni-grid-item v-for="item in nav" :key="item.id" :text="item.name"></uni-grid-item>
</uni-grid>

<!-- Product Recommendations -->
<goods-card v-for="item in goods" :key="item.id" :goods="item" @click="toDetail(item.id)"></goods-card>

Product List Page (list.vue)

Essential features:

Search box (input)

List rendering

Click to view detail

Infinite scroll (load more)

Pull‑down refresh

Core lifecycle logic:

onLoad() { this.getList() },
onReachBottom() { this.loadMore() },
onPullDownRefresh() { this.refresh() }

Product Detail Page (detail.vue)

Core logic:

onLoad receives product ID

Request detail API

Display image, title, price, description

Add to cart (store in cache)

addToCart() {
  let cart = uni.getStorageSync('cart') || []
  cart.push(this.goodsInfo)
  uni.setStorageSync('cart', cart)
  uni.showToast({ title: '加入成功' })
}

Login Page (login.vue)

Essential features:

Phone number and password inputs

Form validation

Submit request

Cache token

Navigate to home on success

login() {
  // validation ...
  request({ url: '/login', method: 'POST', data: { phone, pwd } }).then(res => {
    uni.setStorageSync('token', res.token)
    uni.switchTab({ url: '/pages/index/index' })
  })
}

Cart Page (cart.vue)

Core functions:

Read products from cache

Increase/decrease quantity

Select single / all

Realtime total price calculation

Delete product

checkAll() {
  this.isAllCheck = !this.isAllCheck
  this.cart.forEach(item => item.checked = this.isAllCheck)
  this.computePrice()
}

User Page (user.vue)

Read cached user info and display

Links to orders, favorites, settings

Logout (clear cache and navigate to login)

logout() {
  uni.clearStorageSync()
  uni.navigateTo({ url: '/pages/user/login' })
}

Full Project Debugging Checklist

Page navigation works

Parameter passing is correct

Cart cache persists

Multi‑platform UI displays correctly

No errors or stutters

Project Optimization (Zero‑Experience Friendly)

Image compression

Remove unused code and images

Unified request loading handling

Error capture and empty‑state handling

Enable mini‑program sub‑packages

Publishing Process (Three Major Steps)

1. Publish WeChat Mini‑Program

Configure AppID

HBuilderX → Run → Mini‑program simulator

WeChat DevTools → Upload → Submit for review

2. Publish H5

Release → Generate H5 site

Upload packaged files to a server for access

3. Publish Android App

Set icon and launch page

Release → Cloud native packaging for native App

Generate APK and install

Practical Summary

You have now completed a full‑stack e‑commerce project, mastered front‑back interaction, multi‑platform adaptation, core caching, login, and cart logic, and performed packaging and deployment.