Day 2：多页面导航 + tabBar + 响应式布局

教学目标

把「一个页面」扩展成「一个有结构的产品骨架」——能导航，能切 Tab，布局自适应屏幕宽度。

课堂流程建议（60min）

关键代码：导航 + 传参

复制// pages/home/home.js
Page({
  goNews() {
    wx.navigateTo({ url: '/pages/news/news?type=top' })
  },
  goChat() {
    wx.switchTab({ url: '/pages/chat/chat' })  // tabBar 页必须用 switchTab
  }
})

// pages/news/news.js  - 接收参数
Page({
  data: { type: 'top', list: [] },
  onLoad(options) {
    const type = options.type || 'top'
    this.setData({ type })
    this.loadNews(type)
  },
  loadNews(type) {
    // Day3 填充网络请求
    wx.showLoading({ title: '加载中' })
    // ...
  }
})

关键代码：宫格布局 WXSS

复制/* pages/home/home.wxss */
.grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  gap: 20rpx;
}
.item {
  width: calc(33.33% - 14rpx);
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,.08);
}
.icon { font-size: 52rpx; margin-bottom: 12rpx; }
.label { font-size: 26rpx; color: #455A64; font-weight: bold; }

Day 3：网络请求 + 聚合数据服务 + Mock兜底

教学目标

让学生理解：接口是产品的心脏，但课堂要有「不断电」的备份方案（mock 数据）。掌握封装 request 的工程思维。

课堂主线（60min）

关键代码：utils/request.js

复制// utils/request.js
const BASE_JUHE = 'https://v.juhe.cn'

function request(url, method = 'GET', data = {}) {
  return new Promise((resolve, reject) => {
    wx.showNavigationBarLoading()
    wx.request({
      url,
      method,
      data,
      timeout: 10000,
      success(res) {
        wx.hideNavigationBarLoading()
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(new Error('HTTP ' + res.statusCode))
        }
      },
      fail(err) {
        wx.hideNavigationBarLoading()
        wx.showToast({ title: '网络异常', icon: 'error' })
        reject(err)
      }
    })
  })
}

// 新闻接口封装
function getNews(type = 'top', key) {
  if (!key) return Promise.resolve(MOCK_NEWS)   // 无 Key 走 mock
  return request(`${BASE_JUHE}/toutiao/index?type=${type}&key=${key}`)
    .catch(() => MOCK_NEWS)                      // 接口失败也走 mock
}

// 笑话接口封装
function getJoke(key) {
  if (!key) return Promise.resolve(MOCK_JOKE)
  return request(`${BASE_JUHE}/joke/content/list.php?sort=rand&page=1&pagesize=1&key=${key}`)
    .catch(() => MOCK_JOKE)
}

// Mock 数据
const MOCK_NEWS = {
  reason: 'mock',
  result: {
    data: [
      { title: '【演示】今日科技头条：AI大模型持续演进', category: '科技', date: '2025-05-14', url: 'https://example.com' },
      { title: '【演示】全球气候峰会：各国承诺碳中和目标', category: '国际', date: '2025-05-14', url: 'https://example.com' },
      { title: '【演示】本地餐饮业恢复强劲，夜经济持续升温', category: '本地', date: '2025-05-14', url: 'https://example.com' }
    ]
  }
}

const MOCK_JOKE = {
  reason: 'mock',
  result: {
    data: [{ content: '演示笑话：程序员最喜欢的运动是什么？—— 跑（bug）步！' }]
  }
}

module.exports = { request, getNews, getJoke }

关键代码：新闻页调用

复制// pages/news/news.js
const { getNews } = require('../../utils/request')

Page({
  data: { list: [], loading: true },
  onLoad() {
    const key = wx.getStorageSync('juhe_key') || ''
    getNews('top', key).then(res => {
      const list = (res.result && res.result.data) || []
      this.setData({ list, loading: false })
    })
  },
  goDetail(e) {
    const url = encodeURIComponent(e.currentTarget.dataset.url)
    wx.navigateTo({ url: `/pages/webview/webview?url=${url}` })
  }
})

Day 4：多厂商大模型 AI 对话集成

教学目标

理解 OpenAI 兼容接口的统一格式，实现可复用的 AI 调用工具函数，在小程序中完整展示「配置 Key → 发送消息 → 查看模型信息」全流程。

课堂主线（60min）

4大厂商 API 对比

关键代码：utils/aiChat.js

复制// utils/aiChat.js
const PROVIDERS = {
  deepseek: { url: 'https://api.deepseek.com/v1/chat/completions', defaultModel: 'deepseek-chat' },
  qwen:     { url: 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions', defaultModel: 'qwen-turbo' },
  moonshot: { url: 'https://api.moonshot.cn/v1/chat/completions', defaultModel: 'moonshot-v1-8k' },
  doubao:   { url: 'https://ark.cn-beijing.volces.com/api/v3/chat/completions', defaultModel: '' }
}

function chat(provider, apiKey, model, messages, systemPrompt = '你是一个智能助手，回答简洁清晰。') {
  const cfg = PROVIDERS[provider]
  if (!cfg) return Promise.reject(new Error('未知厂商'))

  const t0 = Date.now()
  const allMessages = [
    { role: 'system', content: systemPrompt },
    ...messages
  ]

  return new Promise((resolve, reject) => {
    wx.request({
      url: cfg.url,
      method: 'POST',
      timeout: 30000,
      header: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + apiKey
      },
      data: {
        model: model || cfg.defaultModel,
        messages: allMessages,
        temperature: 0.7
      },
      success(res) {
        const duration = Date.now() - t0
        if (res.statusCode === 200 && res.data.choices) {
          resolve({
            text: res.data.choices[0].message.content,
            usage: res.data.usage || {},
            duration,
            model: res.data.model || model,
            status: res.statusCode
          })
        } else {
          reject({
            status: res.statusCode,
            msg: (res.data && res.data.error && res.data.error.message) || JSON.stringify(res.data)
          })
        }
      },
      fail(err) {
        reject({ status: -1, msg: err.errMsg || '网络异常' })
      }
    })
  })
}

function loadConfig() {
  return {
    provider: wx.getStorageSync('ai_provider') || 'deepseek',
    key: wx.getStorageSync('ai_key') || '',
    model: wx.getStorageSync('ai_model') || ''
  }
}

function saveConfig(provider, key, model) {
  wx.setStorageSync('ai_provider', provider)
  wx.setStorageSync('ai_key', key)
  wx.setStorageSync('ai_model', model)
}

module.exports = { chat, loadConfig, saveConfig, PROVIDERS }

关键代码：对话页 JS

复制// pages/chat/chat.js
const { chat, loadConfig } = require('../../utils/aiChat')

Page({
  data: {
    messages: [],       // 对话历史 [{role:'user'|'assistant', content}]
    inputText: '',
    sending: false,
    lastMeta: null      // 最后一次调用信息
  },
  onLoad() {
    const cfg = loadConfig()
    this.setData({ cfg })
  },
  onInput(e) {
    this.setData({ inputText: e.detail.value })
  },
  async send() {
    const text = this.data.inputText.trim()
    if (!text || this.data.sending) return

    const cfg = loadConfig()
    if (!cfg.key) {
      wx.showModal({ title: '提示', content: '请先在「我的」页面配置 API Key', showCancel: false })
      return
    }

    // 加入用户消息
    const messages = [...this.data.messages, { role: 'user', content: text }]
    this.setData({ messages, inputText: '', sending: true })

    try {
      const res = await chat(cfg.provider, cfg.key, cfg.model, messages)
      // 加入 AI 回复
      const updated = [...messages, { role: 'assistant', content: res.text }]
      this.setData({
        messages: updated,
        sending: false,
        lastMeta: {
          provider: cfg.provider,
          model: res.model,
          duration: res.duration + 'ms',
          promptTokens: res.usage.prompt_tokens || '-',
          completionTokens: res.usage.completion_tokens || '-',
          totalTokens: res.usage.total_tokens || '-'
        }
      })
    } catch(err) {
      const updated = [...messages, { role: 'assistant', content: `[错误 ${err.status}] ${err.msg}` }]
      this.setData({ messages: updated, sending: false })
    }
  },
  clearHistory() {
    wx.showModal({
      title: '确认', content: '清空对话历史？',
      success: (res) => { if(res.confirm) this.setData({ messages: [], lastMeta: null }) }
    })
  }
})

Day 5：上线部署 + 答辩演示

上午：最终检查清单

下午：合法域名配置 + 上传

答辩演示路径（建议3-5分钟）