一、引言

1.1 小程序开发现状与挑战

1.2 uni-app 的市场价值

class UniAppMarketAnalysis {
    /** 小程序平台市场份额 */
    static getPlatformShare() {
        return {
            '微信小程序': '45%',
            '支付宝小程序': '20%', 
            '百度小程序': '12%',
            '字节跳动小程序': '10%',
            'QQ小程序': '8%',
            '其他': '5%'
        };
    }

    /** 开发效率对比 */
    static getEfficiencyComparison() {
        return {
            '原生开发': {
                '开发周期': '8-12周',
                '维护成本': '高',
                '跨端适配': '需重复开发',
                '团队要求': '平台专属技术栈'
            },
            'uni-app开发': {
                '开发周期': '3-5周',
                '维护成本': '降低60%',
                '跨端适配': '一套代码多端',
                '团队要求': 'Vue技术栈通用'
            }
        };
    }
}

二、技术背景

2.1 uni-app 架构原理

graph TB
    A[Vue单文件组件] --> B[uni-app编译器]
    B --> C[平台特定代码]
    
    C --> C1[微信小程序]
    C --> C2[支付宝小程序] 
    C --> C3[百度小程序]
    C --> C4[H5]
    C --> C5[App]
    
    B --> D[统一的JS API]
    B --> E[统一的组件库]
    B --> F[统一的生命周期]
    
    D --> G[平台桥接层]
    E --> G
    F --> G
    
    G --> H[原生渲染引擎]

2.2 核心技术特性对比

三、环境准备

3.1 开发环境配置

// package.json
{
  "name": "uni-app-project",
  "version": "1.0.0",
  "description": "uni-app跨端小程序项目",
  "scripts": {
    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
    "dev:app": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch"
  },
  "dependencies": {
    "@dcloudio/uni-app": "^2.0.0",
    "@dcloudio/uni-mp-vue": "^2.0.0",
    "vue": "^2.6.11",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@dcloudio/uni-cli-shared": "^2.0.0",
    "@dcloudio/vue-cli-plugin-uni": "^2.0.0",
    "@vue/cli-service": "^4.5.0",
    "sass": "^1.26.0",
    "sass-loader": "^8.0.0"
  }
}

3.2 项目配置文件

// vue.config.js
const path = require('path')

module.exports = {
  transpileDependencies: ['@dcloudio/uni-ui'],
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  },
  // 小程序专用配置
  pluginOptions: {
    'mp-weixin': {
      setting: {
        urlCheck: false,
        es6: true,
        enhance: true,
        postcss: true,
        preloadBackgroundData: false,
        minified: true,
        newFeature: true,
        coverView: true,
        nodeModules: false,
        autoAudits: false,
        showShadowRootInWxmlPanel: true,
        scopeDataCheck: false,
        checkInvalidKey: true,
        checkSiteMap: true,
        uploadWithSourceMap: true,
        compileHotReLoad: false,
        babelSetting: {
          ignore: [],
          disablePlugins: [],
          outputPath: ''
        },
        useIsolateContext: true,
        useCompilerModule: false,
        userConfirmedUseCompilerModuleSwitch: false
      }
    }
  }
}

四、核心架构实现

4.1 应用入口和配置

// main.js
import Vue from 'vue'
import App from './App'
import store from './store'

// 引入uni-ui组件库
import uniUI from '@/uni_modules/uni-ui'
Vue.use(uniUI)

// 引入自定义组件
import '@/components/global'

Vue.config.productionTip = false
Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({
  store,
  ...App
})

app.$mount()

// pages.json - 页面路由配置
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": true,
        "onReachBottomDistance": 50
      }
    },
    {
      "path": "pages/user/user",
      "style": {
        "navigationBarTitleText": "个人中心",
        "navigationBarBackgroundColor": "#007AFF"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "rpxCalcMaxDeviceWidth": 960,
    "rpxCalcBaseDeviceWidth": 375
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#007AFF",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "iconPath": "static/tabbar/user.png",
        "selectedIconPath": "static/tabbar/user-active.png",
        "text": "我的"
      }
    ]
  },
  "condition": {
    "current": 0,
    "list": [
      {
        "name": "测试页面",
        "path": "pages/test/test",
        "query": "id=1"
      }
    ]
  }
}

4.2 Vuex 状态管理适配

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 需要持久化的状态
const PERSISTENT_KEYS = ['userInfo', 'token', 'settings']

const store = new Vuex.Store({
  state: {
    // 用户信息
    userInfo: uni.getStorageSync('userInfo') || null,
    token: uni.getStorageSync('token') || '',
    
    // 应用状态
    isLoading: false,
    networkType: 'wifi',
    
    // 全局配置
    settings: {
      theme: 'light',
      language: 'zh-CN',
      notification: true
    }
  },
  
  mutations: {
    // 更新用户信息
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo
      if (userInfo) {
        uni.setStorageSync('userInfo', userInfo)
      } else {
        uni.removeStorageSync('userInfo')
      }
    },
    
    // 更新token
    SET_TOKEN(state, token) {
      state.token = token
      if (token) {
        uni.setStorageSync('token', token)
      } else {
        uni.removeStorageSync('token')
      }
    },
    
    // 更新加载状态
    SET_LOADING(state, isLoading) {
      state.isLoading = isLoading
    },
    
    // 更新网络状态
    SET_NETWORK_TYPE(state, networkType) {
      state.networkType = networkType
    },
    
    // 更新设置
    UPDATE_SETTINGS(state, settings) {
      state.settings = { ...state.settings, ...settings }
      uni.setStorageSync('settings', state.settings)
    }
  },
  
  actions: {
    // 登录动作
    async login({ commit }, loginData) {
      commit('SET_LOADING', true)
      
      try {
        const result = await uni.request({
          url: '/api/login',
          method: 'POST',
          data: loginData
        })
        
        if (result.data.success) {
          commit('SET_USER_INFO', result.data.userInfo)
          commit('SET_TOKEN', result.data.token)
          return Promise.resolve(result.data)
        } else {
          return Promise.reject(new Error(result.data.message))
        }
      } catch (error) {
        return Promise.reject(error)
      } finally {
        commit('SET_LOADING', false)
      }
    },
    
    // 登出动作
    logout({ commit }) {
      commit('SET_USER_INFO', null)
      commit('SET_TOKEN', '')
      uni.reLaunch({ url: '/pages/login/login' })
    },
    
    // 检查网络状态
    checkNetwork({ commit }) {
      uni.getNetworkType({
        success: (res) => {
          commit('SET_NETWORK_TYPE', res.networkType)
        }
      })
    }
  },
  
  getters: {
    isLoggedIn: state => !!state.token,
    userAvatar: state => state.userInfo?.avatar || '/static/avatar-default.png',
    userName: state => state.userInfo?.name || '未登录'
  }
})

// 监听网络变化
uni.onNetworkStatusChange((res) => {
  store.commit('SET_NETWORK_TYPE', res.networkType)
})

export default store

4.3 主页面组件实现

<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <custom-nav-bar title="首页" :show-back="false">
      <template #right>
        <view class="nav-right" @click="handleSearch">
          <uni-icons type="search" size="24" color="#333"></uni-icons>
        </view>
      </template>
    </custom-nav-bar>
    
    <!-- 下拉刷新 -->
    <scroll-view 
      scroll-y 
      class="scroll-view"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onPullDownRefresh"
      @scrolltolower="onReachBottom"
    >
      <!-- 轮播图 -->
      <swiper 
        class="banner-swiper" 
        indicator-dots 
        autoplay 
        circular
        indicator-active-color="#007AFF"
      >
        <swiper-item v-for="(banner, index) in bannerList" :key="index">
          <image 
            :src="banner.image" 
            mode="aspectFill" 
            class="banner-image"
            @click="handleBannerClick(banner)"
          />
        </swiper-item>
      </swiper>
      
      <!-- 功能网格 -->
      <view class="grid-section">
        <view class="section-title">快捷功能</view>
        <view class="grid-container">
          <view 
            v-for="(item, index) in quickActions" 
            :key="index"
            class="grid-item"
            @click="handleGridClick(item)"
          >
            <view class="grid-icon">
              <uni-icons :type="item.icon" size="28" :color="item.color"></uni-icons>
            </view>
            <text class="grid-text">{{ item.name }}</text>
          </view>
        </view>
      </view>
      
      <!-- 内容列表 -->
      <view class="content-section">
        <view class="section-header">
          <text class="section-title">最新内容</text>
          <text class="section-more" @click="handleViewMore">查看更多</text>
        </view>
        
        <view class="content-list">
          <content-card 
            v-for="item in contentList" 
            :key="item.id"
            :data="item"
            @click="handleContentClick(item)"
          />
        </view>
        
        <!-- 加载更多 -->
        <view v-if="hasMore" class="load-more">
          <text v-if="!loadingMore">上拉加载更多</text>
          <text v-else class="loading-text">加载中...</text>
        </view>
        <view v-else class="no-more">
          <text>没有更多内容了</text>
        </view>
      </view>
    </scroll-view>
    
    <!-- 回到顶部 -->
    <view 
      v-if="showBackTop" 
      class="back-top" 
      @click="scrollToTop"
    >
      <uni-icons type="arrow-up" size="20" color="#fff"></uni-icons>
    </view>
    
    <!-- 全局加载 -->
    <uni-load-more v-if="isLoading" status="loading"></uni-load-more>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import CustomNavBar from '@/components/CustomNavBar.vue'
import ContentCard from '@/components/ContentCard.vue'

export default {
  components: {
    CustomNavBar,
    ContentCard
  },
  
  data() {
    return {
      bannerList: [],
      quickActions: [
        { name: '功能1', icon: 'home', color: '#007AFF', path: '/pages/func1/func1' },
        { name: '功能2', icon: 'star', color: '#FF9500', path: '/pages/func2/func2' },
        { name: '功能3', icon: 'gear', color: '#34C759', path: '/pages/func3/func3' },
        { name: '功能4', icon: 'person', color: '#FF3B30', path: '/pages/func4/func4' }
      ],
      contentList: [],
      currentPage: 1,
      pageSize: 10,
      hasMore: true,
      isLoading: false,
      loadingMore: false,
      isRefreshing: false,
      scrollTop: 0,
      showBackTop: false
    }
  },
  
  computed: {
    ...mapState(['userInfo', 'isLoggedIn'])
  },
  
  onLoad() {
    this.initPage()
  },
  
  onShow() {
    this.checkLoginStatus()
  },
  
  onPullDownRefresh() {
    this.onPullDownRefresh()
  },
  
  onReachBottom() {
    this.onReachBottom()
  },
  
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
    this.showBackTop = e.scrollTop > 300
  },
  
  methods: {
    ...mapActions(['checkNetwork']),
    
    // 初始化页面
    async initPage() {
      this.isLoading = true
      await Promise.all([
        this.loadBannerData(),
        this.loadContentData(true)
      ])
      this.isLoading = false
      this.checkNetwork()
    },
    
    // 加载轮播图数据
    async loadBannerData() {
      try {
        const res = await this.$http.get('/api/banner')
        this.bannerList = res.data
      } catch (error) {
        console.error('加载轮播图失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    
    // 加载内容数据
    async loadContentData(isRefresh = false) {
      if (this.loadingMore || (!isRefresh && !this.hasMore)) return
      
      if (isRefresh) {
        this.currentPage = 1
        this.hasMore = true
        this.isRefreshing = true
      } else {
        this.loadingMore = true
      }
      
      try {
        const res = await this.$http.get('/api/content', {
          params: {
            page: this.currentPage,
            size: this.pageSize
          }
        })
        
        const newData = res.data.list || []
        
        if (isRefresh) {
          this.contentList = newData
        } else {
          this.contentList = [...this.contentList, ...newData]
        }
        
        this.hasMore = newData.length === this.pageSize
        this.currentPage++
        
      } catch (error) {
        console.error('加载内容失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        if (isRefresh) {
          this.isRefreshing = false
          uni.stopPullDownRefresh()
        } else {
          this.loadingMore = false
        }
      }
    },
    
    // 下拉刷新
    onPullDownRefresh() {
      this.loadContentData(true)
    },
    
    // 上拉加载更多
    onReachBottom() {
      this.loadContentData(false)
    },
    
    // 检查登录状态
    checkLoginStatus() {
      if (!this.isLoggedIn) {
        // 未登录处理
        console.log('用户未登录')
      }
    },
    
    // 处理轮播图点击
    handleBannerClick(banner) {
      if (banner.link) {
        uni.navigateTo({
          url: banner.link
        })
      }
    },
    
    // 处理网格点击
    handleGridClick(item) {
      if (item.path) {
        uni.navigateTo({
          url: item.path
        })
      }
    },
    
    // 处理内容点击
    handleContentClick(item) {
      uni.navigateTo({
        url: `/pages/detail/detail?id=${item.id}`
      })
    },
    
    // 查看更多
    handleViewMore() {
      uni.navigateTo({
        url: '/pages/list/list?type=all'
      })
    },
    
    // 搜索处理
    handleSearch() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },
    
    // 回到顶部
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.scroll-view {
  height: calc(100vh - 44px);
}

.banner-swiper {
  height: 200px;
  
  .banner-image {
    width: 100%;
    height: 100%;
  }
}

.grid-section {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
  }
  
  .grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .grid-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20rpx;
    
    .grid-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16rpx;
    }
    
    .grid-text {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.content-section {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .section-more {
      font-size: 28rpx;
      color: #007AFF;
    }
  }
}

.load-more, .no-more {
  text-align: center;
  padding: 30rpx;
  font-size: 28rpx;
  color: #999;
}

.loading-text {
  color: #007AFF;
}

.back-top {
  position: fixed;
  right: 30rpx;
  bottom: 120rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: rgba(0, 122, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.nav-right {
  padding: 10rpx;
}
</style>

五、多端适配方案

5.1 条件编译实现

// utils/platform.js
// 平台判断工具类
class Platform {
  // 获取当前平台
  static getPlatform() {
    // #ifdef MP-WEIXIN
    return 'weixin'
    // #endif
    
    // #ifdef MP-ALIPAY
    return 'alipay'
    // #endif
    
    // #ifdef H5
    return 'h5'
    // #endif
    
    // #ifdef APP-PLUS
    return 'app'
    // #endif
    
    return 'unknown'
  }
  
  // 判断是否是微信小程序
  static isWeixin() {
    return this.getPlatform() === 'weixin'
  }
  
  // 判断是否是支付宝小程序
  static isAlipay() {
    return this.getPlatform() === 'alipay'
  }
  
  // 判断是否是H5
  static isH5() {
    return this.getPlatform() === 'h5'
  }
  
  // 判断是否是App
  static isApp() {
    return this.getPlatform() === 'app'
  }
  
  // 平台特定的API调用
  static async requestPayment(orderInfo) {
    // #ifdef MP-WEIXIN
    return await uni.requestPayment({
      provider: 'wxpay',
      ...orderInfo
    })
    // #endif
    
    // #ifdef MP-ALIPAY
    return await uni.requestPayment({
      provider: 'alipay',
      ...orderInfo
    })
    // #endif
    
    // #ifdef H5
    // H5支付处理
    return await this.h5Payment(orderInfo)
    // #endif
    
    // #ifdef APP-PLUS
    return await uni.requestPayment({
      provider: 'appleiap',
      ...orderInfo
    })
    // #endif
  }
}

export default Platform

5.2 统一API封装

// utils/request.js
import { http } from '@escook/request-miniprogram'

// 配置请求根路径
http.baseUrl = 'https://api.example.com'

// 请求拦截器
http.beforeRequest = function(options) {
  uni.showLoading({
    title: '加载中...'
  })
  
  // 添加token
  const token = uni.getStorageSync('token')
  if (token) {
    options.header = {
      ...options.header,
      'Authorization': `Bearer ${token}`
    }
  }
}

// 响应拦截器
http.afterRequest = function() {
  uni.hideLoading()
}

// 封装统一的请求方法
class Request {
  static get(url, data = {}, options = {}) {
    return new Promise((resolve, reject) => {
      http.get(url, data, options).then(res => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(new Error(res.errMsg))
        }
      }).catch(reject)
    })
  }
  
  static post(url, data = {}, options = {}) {
    return new Promise((resolve, reject) => {
      http.post(url, data, options).then(res => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(new Error(res.errMsg))
        }
      }).catch(reject)
    })
  }
  
  // 上传文件
  static upload(filePath, formData = {}) {
    return new Promise((resolve, reject) => {
      uni.uploadFile({
        url: http.baseUrl + '/api/upload',
        filePath: filePath,
        name: 'file',
        formData: formData,
        header: {
          'Authorization': `Bearer ${uni.getStorageSync('token')}`
        },
        success: (res) => {
          const data = JSON.parse(res.data)
          resolve(data)
        },
        fail: reject
      })
    })
  }
}

export default Request

六、实际应用场景

6.1 电商小程序案例

<!-- pages/product/detail.vue -->
<template>
  <view class="product-detail">
    <!-- 商品图片轮播 -->
    <swiper class="image-swiper" indicator-dots circular>
      <swiper-item v-for="(image, index) in product.images" :key="index">
        <image :src="image" mode="aspectFit" @click="previewImage(index)"></image>
      </swiper-item>
    </swiper>
    
    <!-- 商品信息 -->
    <view class="product-info">
      <view class="price-section">
        <text class="current-price">¥{{ product.price }}</text>
        <text v-if="product.originalPrice" class="original-price">¥{{ product.originalPrice }}</text>
        <text class="sales">已售{{ product.sales }}件</text>
      </view>
      
      <view class="title">{{ product.title }}</view>
      <view class="description">{{ product.description }}</view>
    </view>
    
    <!-- 规格选择 -->
    <view class="spec-section" @click="showSpecPopup = true">
      <text class="spec-label">选择规格</text>
      <text class="spec-value">{{ selectedSpecs }}</text>
      <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="action-bar">
      <view class="action-left">
        <button class="action-btn" @click="addToCart">
          <uni-icons type="cart" size="20"></uni-icons>
          <text>购物车</text>
        </button>
        <button class="action-btn" @click="toggleFavorite">
          <uni-icons :type="isFavorite ? 'heart-filled' : 'heart'" size="20" :color="isFavorite ? '#ff3b30' : '#333'"></uni-icons>
          <text>收藏</text>
        </button>
      </view>
      
      <view class="action-right">
        <button class="add-cart-btn" @click="addToCart">加入购物车</button>
        <button class="buy-now-btn" @click="buyNow">立即购买</button>
      </view>
    </view>
    
    <!-- 规格选择弹窗 -->
    <uni-popup ref="specPopup" type="bottom" :safe-area="false">
      <view class="spec-popup">
        <view class="popup-header">
          <image :src="product.images[0]" class="popup-image"></image>
          <view class="popup-info">
            <view class="popup-price">¥{{ product.price }}</view>
            <view class="popup-stock">库存{{ product.stock }}件</view>
          </view>
          <uni-icons type="close" size="20" @click="showSpecPopup = false"></uni-icons>
        </view>
        
        <scroll-view scroll-y class="spec-list">
          <view v-for="spec in product.specs" :key="spec.name" class="spec-item">
            <view class="spec-name">{{ spec.name }}</view>
            <view class="spec-options">
              <text 
                v-for="option in spec.options" 
                :key="option" 
                class="spec-option"
                :class="{ active: selectedSpec[spec.name] === option }"
                @click="selectSpec(spec.name, option)"
              >
                {{ option }}
              </text>
            </view>
          </view>
        </scroll-view>
        
        <view class="quantity-section">
          <text class="quantity-label">购买数量</text>
          <uni-number-box v-model="quantity" :min="1" :max="product.stock"></uni-number-box>
        </view>
        
        <button class="confirm-btn" @click="confirmSelection">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data() {
    return {
      product: {},
      showSpecPopup: false,
      selectedSpec: {},
      quantity: 1,
      isFavorite: false
    }
  },
  
  computed: {
    ...mapState(['userInfo']),
    selectedSpecs() {
      return Object.values(this.selectedSpec).join(' ') || '请选择规格'
    }
  },
  
  onLoad(options) {
    this.productId = options.id
    this.loadProductDetail()
    this.checkFavoriteStatus()
  },
  
  methods: {
    ...mapActions(['addToCart']),
    
    async loadProductDetail() {
      try {
        const res = await this.$http.get(`/api/products/${this.productId}`)
        this.product = res.data
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    
    // 预览图片
    previewImage(index) {
      uni.previewImage({
        urls: this.product.images,
        current: index
      })
    },
    
    // 选择规格
    selectSpec(name, value) {
      this.$set(this.selectedSpec, name, value)
    },
    
    // 确认选择
    confirmSelection() {
      if (Object.keys(this.selectedSpec).length === 0) {
        uni.showToast({
          title: '请选择规格',
          icon: 'none'
        })
        return
      }
      this.showSpecPopup = false
    },
    
    // 添加到购物车
    async addToCart() {
      if (!this.userInfo) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      
      if (Object.keys(this.selectedSpec).length === 0) {
        this.showSpecPopup = true
        return
      }
      
      try {
        await this.$store.dispatch('addToCart', {
          productId: this.productId,
          specs: this.selectedSpec,
          quantity: this.quantity
        })
        
        uni.showToast({
          title: '添加成功'
        })
      } catch (error) {
        uni.showToast({
          title: '添加失败',
          icon: 'none'
        })
      }
    },
    
    // 立即购买
    buyNow() {
      if (!this.userInfo) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      
      if (Object.keys(this.selectedSpec).length === 0) {
        this.showSpecPopup = true
        return
      }
      
      const orderData = {
        productId: this.productId,
        specs: this.selectedSpec,
        quantity: this.quantity
      }
      
      uni.navigateTo({
        url: `/pages/order/confirm?data=${encodeURIComponent(JSON.stringify(orderData))}`
      })
    },
    
    // 切换收藏
    async toggleFavorite() {
      if (!this.userInfo) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      
      try {
        if (this.isFavorite) {
          await this.$http.delete(`/api/favorites/${this.productId}`)
        } else {
          await this.$http.post('/api/favorites', {
            productId: this.productId
          })
        }
        this.isFavorite = !this.isFavorite
      } catch (error) {
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        })
      }
    },
    
    // 检查收藏状态
    async checkFavoriteStatus() {
      if (!this.userInfo) return
      
      try {
        const res = await this.$http.get(`/api/favorites/status?productId=${this.productId}`)
        this.isFavorite = res.data.isFavorite
      } catch (error) {
        console.error('检查收藏状态失败:', error)
      }
    }
  }
}
</script>

七、测试与部署

7.1 单元测试配置

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  },
  testMatch: [
    '**/tests/unit/**/*.spec.[jt]s?(x)'
  ],
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/App.vue'
  ],
  moduleNameMapping: {
    '^@/(.*)$': '<rootDir>/src/$1'
  }
}

7.2 自动化构建部署

# .github/workflows/deploy.yml
name: Deploy Uni-app

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    strategy:
      matrix:
        platform: [mp-weixin, h5]
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
        cache: 'npm'
    
    - name: Install dependencies
      run: npm install
    
    - name: Run tests
      run: npm run test:unit
    
    - name: Build for ${{ matrix.platform }}
      run: npm run build:${{ matrix.platform }}
      env:
        NODE_ENV: production
    
    - name: Deploy to CDN
      if: matrix.platform == 'h5'
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist/build/h5
    
    - name: Upload to WeChat MP
      if: matrix.platform == 'mp-weixin'
      uses: wechat-miniprogram/miniprogram-ci-action@v1
      with:
        appid: ${{ secrets.MP_APPID }}
        privatekey: ${{ secrets.MP_PRIVATE_KEY }}
        projectpath: ./dist/build/mp-weixin
        version: ${{ github.sha }}
        desc: 'Auto deploy from CI'

八、总结

8.1 技术优势总结

开发效率对比

性能表现基准

class PerformanceBenchmark {
    static getPerformanceData() {
        return {
            '启动时间': {
                '微信原生': '1.2s',
                'uni-app': '1.5s',
                '差异': '+0.3s (可优化)'
            },
            '包体积': {
                '微信原生': '1.2MB',
                'uni-app': '1.8MB', 
                '差异': '+0.6MB (含框架)'
            },
            '渲染性能': {
                '微信原生': '90fps',
                'uni-app': '85fps',
                '差异': '-5fps (可接受)'
            },
            '内存占用': {
                '微信原生': '45MB',
                'uni-app': '55MB',
                '差异': '+10MB (优化后)'
            }
        };
    }
}

8.2 最佳实践总结

架构设计原则

class UniAppBestPractices {
    static getArchitecturePrinciples() {
        return {
            '组件化开发': '基于Vue的单文件组件规范',
            '状态管理': 'Vuex统一状态管理，支持持久化',
            '路由管理': 'pages.json统一配置，支持条件编译',
            'API封装': '统一请求拦截，错误处理',
            '多端适配': '条件编译，平台特定代码隔离'
        };
    }
    
    static getPerformanceOptimization() {
        return {
            '图片优化': '使用WebP格式，合理压缩',
            '代码分割': '按需加载，减少首包体积',
            '数据缓存': '合理使用本地存储',
            '渲染优化': '避免频繁setData，使用虚拟列表'
        };
    }
}

8.3 未来展望

技术演进趋势

class UniAppFuture {
    static getTechnologyTrends() {
        return {
            '2024': [
                'Vue 3全面支持',
                'Vite构建工具集成',
                'TypeScript深度优化',
                '跨端能力进一步增强'
            ],
            '2025': [
                'WebAssembly支持',
                'AI能力集成',
                '元宇宙场景适配',
                '更优的性能表现'
            ]
        };
    }
    
    static getIndustryTrends() {
        return {
            '小程序生态': '进一步扩大市场份额',
            '技术标准化': '跨端框架成为主流',
            '开发工具': '更智能的开发体验',
            '应用场景': '从工具型向复杂应用发展'
        };
    }
}