从 H5 到独立 App：电商互动玩法的跨端重构与工程实践

// pages.json (UniApp 路由与原生 TabBar 配置示例)
{
  "pages": [
    {"path": "pages/index/index", "style": {"navigationBarTitleText": "首页"}},
    {"path": "pages/warehouse/index", "style": {"navigationBarTitleText": "我的仓库"}},
    {"path": "pages/user/index", "style": {"navigationBarTitleText": "个人中心"}}
  ],
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#333333",
    "list": [
      {"pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tab_home.png"},
      {"pagePath": "pages/warehouse/index", "text": "仓库", "iconPath": "static/tab_box.png"},
      {"pagePath": "pages/user/index", "text": "我的", "iconPath": "static/tab_user.png"}
    ]
  }
}

// 前端抽选交互与业务状态解耦示例 (Vue3 / UniApp)
<script setup>
import { ref } from 'vue';
import { apiDrawBlindBox } from '@/api/game';

const isAnimating = ref(false);
const drawResult = ref(null);

const handleDraw = async (boxId) => {
  if (isAnimating.value) return;
  
  try {
    // 1. 发起后端请求，获取计算结果（此时不立刻展示）
    const res = await apiDrawBlindBox({ id: boxId });
    drawResult.value = res.data;
    
    // 2. 触发前端原生级复杂动画
    isAnimating.value = true;
    playOpenBoxAnimation().then(() => {
        // 3. 动画结束后，再渲染真实的奖品数据
        showResultModal(drawResult.value);
        isAnimating.value = false;
    });
  } catch (error) {
    uni.showToast({ title: '系统繁忙', icon: 'none' });
  }
};
</script>

// PHP 后端统一认证聚合逻辑片段
class AuthService {
    public function unifiedLogin($loginType, $credentials) {
        $user = null;
        
        // 根据不同端来源，解析对应的身份标识
        if ($loginType === 'wechat_mini') {
            $openId = $this->wxService->getOpenId($credentials['code']);
            $user = UserModel::findByOpenId($openId);
        } elseif ($loginType === 'app_sms') {
            $this->smsVerify($credentials['phone'], $credentials['code']);
            $user = UserModel::findByPhone($credentials['phone']);
        }
        
        // 若用户不存在，执行静默注册
        if (!$user) {
            $user = $this->createNewUser($credentials);
        }
        
        // 统一签发平台级别的 JWT，屏蔽多端差异
        $token = JWT::encode(['uid' => $user->id, 'exp' => time() + 86400], config('jwt.secret'));
        return ['token' => $token, 'uid' => $user->id];
    }
}

// 基于 Pinia 的全局用户资产状态管理
import { defineStore } from 'pinia';
import { apiGetUserAssets } from '@/api/user';

export const useUserStore = defineStore('user', {
  state: () => ({
    coins: 0,
    fragments: 0,
    warehouseItemCount: 0
  }),
  actions: {
    // 全局资产刷新动作
    async fetchAssets() {
      const res = await apiGetUserAssets();
      this.coins = res.data.coins;
      this.fragments = res.data.fragments;
      this.warehouseItemCount = res.data.warehouse_count;
    },
    // 本地乐观更新，用于高频消费场景
    deductCoins(amount) {
      if (this.coins >= amount) {
        this.coins -= amount;
      }
    }
  }
});