快速开始指南

第一步：修改项目配置

1.1 修改 package.json

# 修改项目名称
"name": "manulife-weapp"  # 改为您的项目名称

# 修改描述
"description": "基于Taro 4 + Vue 3 + NutUI的微信小程序模板"  # 改为您的项目描述

1.2 修改服务器配置

编辑 src/utils/config.js：

const BASE_URL = process.env.NODE_ENV === 'production'
    ? 'https://your-production-domain.com'  // 🔧 改为生产环境域名
    : 'https://your-dev-domain.com'         // 🔧 改为开发环境域名

export const REQUEST_DEFAULT_PARAMS = {
    f: 'YOUR_MODULE',           // 🔧 改为业务模块标识
    client_name: 'YOUR_APP',    // 🔧 改为应用名称
}

1.3 修改微信小程序 AppID

编辑 project.config.json：

{
  "appid": "your-appid"  // 🔧 改为您的微信小程序 AppID
}

第二步：安装依赖

# 进入项目目录
cd manulife-weapp

# 安装依赖（推荐使用 pnpm）
pnpm install

# 或使用 npm
npm install

第三步：定义您的 API 接口

编辑 src/api/index.js，添加业务接口：

import { buildApiUrl } from '@/utils/tools'

// 示例：获取用户信息
export const getUserInfoAPI = (params) => {
    return buildApiUrl('getUserInfo', params)
}

// 示例：提交表单
export const submitFormAPI = (params) => {
    return buildApiUrl('submitForm', params)
}

第四步：配置页面路由

编辑 src/app.config.js，添加您的页面：

export default {
  pages: [
    'pages/index/index',      // 首页
    'pages/login/index',      // 登录页（必须保留）
    'pages/your-page/index',  // 🔧 添加您的页面
  ],
  tabBar: {
    color: '#999',
    selectedColor: '#007AFF',
    backgroundColor: '#fff',
    list: [
      {
        pagePath: 'pages/index/index',
        text: '首页',
        iconPath: 'assets/images/home.png',
        selectedIconPath: 'assets/images/home-active.png'
      },
      // 🔧 添加更多 tabbar 页面
    ]
  }
}

第五步：启动开发

# 微信小程序开发
pnpm dev:weapp

# H5 开发
pnpm dev:h5

第六步：微信开发者工具

1. 打开微信开发者工具
2. 导入项目，选择 dist 目录
3. AppID 使用测试号或您的 AppID

核心功能说明

🔐 认证系统

模板已内置完整的微信登录认证流程：

• 静默认证：应用启动时自动执行
• 401 自动刷新：接口返回 401 时自动刷新会话
• 登录页回跳：登录完成后自动返回原页面

重要：后端需提供 /srv/?a=openid 接口

🌐 网络请求

使用统一的 HTTP 客户端（src/utils/request.js）：

import request from '@/api/fn'

// GET 请求
export const getListAPI = (params) => {
    return request.get('/your-action', params)
}

// POST 请求
export const submitDataAPI = (data) => {
    return request.post('/your-action', data)
}

🧭 导航跳转

使用 useGo hook 进行页面跳转：

import { useGo } from '@/hooks/useGo'

const go = useGo()

// 跳转到页面（自动补全路径）
go('/your-page')

// 带参数跳转
go('/your-page?id=123')

// TabBar 页面跳转
go('/index')  // 自动使用 switchTab

💾 状态管理

使用 Pinia 进行状态管理：

// src/stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null
  }),
  actions: {
    setUserInfo(info) {
      this.userInfo = info
    }
  }
})

常见问题

Q: 如何去除可选功能？

如果不需要以下功能，可以直接删除对应文件：

• 二维码组件：src/components/qrCode.vue、qrCodeSearch.vue
• 海报生成器：src/components/PosterBuilder/
• 微信支付：src/utils/wechatPay.js、src/api/wx/
• 离线缓存：src/composables/useOfflineBookingCache.js、useOfflineBookingCachePolling.js
• 时间选择器：src/components/time-picker-data/

Q: 如何修改设计稿尺寸？

当前配置为双设计宽度体系：

• NutUI 组件：375px
• 其他页面：750px

如需修改，编辑 config/index.js 中的 designWidth 配置。

Q: 认证流程不工作？

1. 检查后端 /srv/?a=openid 接口是否正常
2. 检查 src/utils/config.js 中的 BASE_URL 是否正确
3. 查看微信开发者工具控制台错误信息

下一步

• 📖 阅读完整文档：README.md
• 🎨 查看 NutUI 组件库：https://nutui.jd.com/taro/
• 📚 Taro 官方文档：https://taro-docs.jd.com/

需要帮助？

遇到问题可以：

1. 查看 README.md 详细文档
2. 检查 src/utils/config.js 配置
3. 查看浏览器/小程序控制台错误信息