UniApp跨平台开发实战：从零构建企业级电商应用完整指南 | 多端一体化解决方案

1.1 创建TypeScript支持的UniApp项目

# 使用Vue3 + TypeScript模板创建项目
vue create -p dcloudio/uni-preset-vue#vite-ts my-mall

# 安装必要依赖
npm install pinia @pinia/npm-detection
npm install uview-ui
npm install @uni-helper/uni-app-types --save-dev

# 配置tsconfig.json
{
  "compilerOptions": {
    "types": ["@dcloudio/types", "@uni-helper/uni-app-types"]
  }
}

1.2 项目目录结构优化

src/
├── api/           # 接口管理
├── components/    # 公共组件
├── composables/   # Vue组合式函数
├── pages/         # 页面文件
├── static/        # 静态资源
├── store/         # Pinia状态管理
├── types/         # TypeScript类型定义
├── utils/         # 工具函数
└── uni.scss       # 全局样式变量

2.1 基于Pinia的全局状态管理

// store/user.ts - 用户状态管理
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import type { UserInfo } from '@/types/user'

export const useUserStore = defineStore('user', () => {
  const userInfo = ref(null)
  const token = ref('')
  const cartCount = ref(0)

  // 计算属性
  const isLogin = computed(() => !!token.value)
  
  // Actions
  const login = async (credentials: LoginParams) => {
    const res = await uni.request({
      url: '/api/auth/login',
      method: 'POST',
      data: credentials
    })
    
    token.value = res.data.token
    userInfo.value = res.data.userInfo
    uni.setStorageSync('token', token.value)
  }

  const updateCartCount = (count: number) => {
    cartCount.value = count
    // 同步到tabBar徽章
    if (count > 0) {
      uni.setTabBarBadge({
        index: 2,
        text: count.toString()
      })
    } else {
      uni.removeTabBarBadge({ index: 2 })
    }
  }

  return { userInfo, token, cartCount, isLogin, login, updateCartCount }
})

2.2 多平台适配的请求封装

// utils/request.ts - 统一请求拦截器
import { useUserStore } from '@/store/user'

const BASE_URL = process.env.VITE_API_BASE_URL

interface RequestOptions {
  url: string
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
  data?: any
  header?: Record
  loading?: boolean
}

export const request = async (options: RequestOptions): Promise => {
  const userStore = useUserStore()
  
  // 显示加载提示
  if (options.loading !== false) {
    uni.showLoading({ title: '加载中...', mask: true })
  }

  try {
    const header = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${userStore.token}`,
      ...options.header
    }

    const res = await uni.request({
      url: `${BASE_URL}${options.url}`,
      method: options.method || 'GET',
      data: options.data,
      header
    })

    // 处理不同平台的响应结构
    #ifdef MP-WEIXIN
    const data = res.data as ApiResponse
    #endif
    
    #ifdef H5
    const data = res.data.data as T
    #endif

    if (res.statusCode !== 200) {
      throw new Error(data.message || '请求失败')
    }

    return data
  } catch (error) {
    // 统一错误处理
    uni.showToast({
      title: error.message || '网络错误',
      icon: 'none'
    })
    throw error
  } finally {
    uni.hideLoading()
  }
}

4.1 图片懒加载与优化

// 图片懒加载组件
<image 
  :src="thumbnail"
  :lazy-load="true"
  :webp="true"
  @load="handleImageLoad"
  @error="handleImageError"
  mode="aspectFill">
<loading v-if="!loaded" />
</image>

4.2 分包加载策略

// pages.json 分包配置
{
  "pages": [
    { "path": "pages/index/index", "style": { ... } }
  ],
  "subPackages": [
    {
      "root": "pagesA",
      "pages": [
        { "path": "product/detail", "style": { ... } },
        { "path": "product/list", "style": { ... } }
      ]
    },
    {
      "root": "pagesB",
      "pages": [
        { "path": "user/order", "style": { ... } },
        { "path": "user/address", "style": { ... } }
      ]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["pagesA"]
    }
  }
}