NOTE
欢迎来到“从零搭建AI小程序全栈实战”系列文章！
此为本系列的第四篇文章，你可以点击跳转到第一篇文章在系列文章中快速跳转。

一、这篇文章将要做的#

1.1 回顾#

上一篇我们完成了后端工程化加固，现在 Spring Boot 有统一响应、异常处理、接口文档、数据校验
当前状态：后端接口全部就绪，/api/images/upload-and-recognize 能接收图片并返回识别结果

1.2 目标#

写一个微信小程序，把后端的能力”装进手机”
四个里程碑：
1. 小程序开发环境搭建 + 拍照页面
2. 调用后端接口，打通上传→识别→展示
3. 历史记录列表页
4. 体验优化（图片压缩、加载动画、底部导航）

二、创建第一个小程序项目#

2.1 注册小程序账号与下载工具#

注册（如果还没有）#

打开微信公众平台，点击“立即注册”，选择“小程序”。
用未注册过公众平台的邮箱注册，按提示完成主体类型选择（个人即可）。
注册完成后，在「开发」→「开发管理」→「开发设置」页面，记下你的 AppID（后面要用）。

下载开发者工具#

打开微信开发者工具下载，下载 Windows 64 位稳定版。
安装后打开，用刚刚注册的小程序绑定的微信扫码登录。

2.2 创建项目#

点击「+」创建项目。
填入：
- 项目名称：ai-mini-app
- 目录：选一个空文件夹
- AppID：粘贴你在后台记下的 AppID
- 开发模式：小程序
- 模板选择：「JavaScript 基础模板」（不要选 TypeScript，先降低复杂度）
点击确定，你会看到默认模板生成的项目结构：

1
├── pages/
2
│   └── index/       首页
3
│       ├── index.js
4
│       ├── index.wxml
5
│       ├── index.wxss
6
│       └── index.json
7
├── app.js           全局逻辑
8
├── app.json         全局配置
9
├── app.wxss         全局样式
10
└── project.config.json

2.3 认识四个核心文件#

文件类型	作用	类比
`.wxml`	页面结构，写 HTML 类似的标签	相当于网页的 HTML
`.wxss`	页面样式，写 CSS	相当于网页的 CSS
`.js`	页面逻辑，处理数据、发请求	相当于网页的 JavaScript
`.json`	页面配置（如标题、导航栏颜色）	微信特有的配置

一个页面由这四个文件组成，名字必须完全相同。

2.4 改造首页#

改写 pages/index/index.wxml（清空原有内容，写入）：

1
<view class="container">
2
  <!-- 标题 -->
3
  <view class="title">AI图像识别</view>
4

5
  <!-- 图片展示区（拍照后显示在这里） -->
6
  <view class="image-area">
7
    <image wx:if="{{imageUrl}}" src="{{imageUrl}}" mode="aspectFit" class="preview-image"/>
8
    <view wx:else class="placeholder">
9
      <text>请点击下方按钮拍照</text>
10
    </view>
11
  </view>
12

13
  <!-- 拍照按钮 -->
14
  <button class="camera-btn" bindtap="takePhoto">
15
    📷 拍照识别
16
  </button>
17

18
  <!-- 识别结果区 -->
19
  <view wx:if="{{result}}" class="result-area">
20
    <text class="result-title">识别结果：</text>
21
    <text class="result-text">{{result}}</text>
22
  </view>
23
</view>

改写 pages/index/index.wxss（样式）：

1
.container {
2
  padding: 40rpx;
3
  display: flex;
4
  flex-direction: column;
5
  align-items: center;
6
}
7
.title {
8
  font-size: 40rpx;
9
  font-weight: bold;
10
  margin-bottom: 40rpx;
11
}
12
.image-area {
13
  width: 100%;
14
  height: 400rpx;
15
  background: #f5f5f5;
16
  border-radius: 20rpx;
17
  display: flex;
18
  align-items: center;
19
  justify-content: center;
20
  margin-bottom: 30rpx;
21
}
22
.preview-image {
23
  width: 100%;
24
  height: 100%;
25
  border-radius: 20rpx;
26
}
27
.placeholder {
28
  color: #999;
29
  font-size: 28rpx;
30
}
31
.camera-btn {
32
  width: 80%;
33
  background: #07c160;
34
  color: white;
35
  font-size: 32rpx;
36
  margin-bottom: 30rpx;
37
}
38
.result-area {
39
  width: 100%;
40
  padding: 30rpx;
41
  background: #fff;
42
  border-radius: 20rpx;
43
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
44
}
45
.result-title {
46
  font-size: 30rpx;
47
  font-weight: bold;
48
  display: block;
49
  margin-bottom: 10rpx;
50
}
51
.result-text {
52
  font-size: 28rpx;
53
  color: #333;
54
}

改写 pages/index/index.js：

1
Page({
2
  data: {
3
    imageUrl: '',   // 拍照后的图片临时路径
4
    result: ''      // 识别结果文本
5
  },
6

7
  // 拍照方法
8
  takePhoto() {
9
    // 调用微信相机
10
    wx.chooseMedia({
11
      count: 1,
12
      mediaType: ['image'],
13
      sourceType: ['camera'],  // 只允许拍照
14
      success: (res) => {
15
        const tempFilePath = res.tempFiles[0].tempFilePath
16
        this.setData({
17
          imageUrl: tempFilePath
18
        })
19
        // 拍照后直接提示（后续连接后端）
20
        wx.showToast({ title: '拍照成功！', icon: 'success' })
21
      },
22
      fail: (err) => {
23
        console.error('拍照失败', err)
24
        wx.showToast({ title: '拍照失败', icon: 'error' })
25
      }
26
    })
27
  }
28
})

2.5 预览效果#

在开发者工具顶部点击「预览」→ 手机微信扫码，在真机上点击按钮看能否调起相机，并显示图片。
如果工具里没法调相机，先点「编译」确认页面显示正常即可。

三、发起HTTP请求连接后端#

3.1 配置服务器域名#

在微信公众平台后台 →「开发」→「开发管理」→「开发设置」→「服务器域名」：

request 合法域名：添加 https://你的域名 或先用 https://你的服务器IP（如果只有 IP，临时设置为 https://12.34.56.78）
uploadFile 合法域名：同样添加你的服务器地址

开发阶段绕过域名校验：在开发者工具右上角「详情」→「本地设置」→ 勾选「不校验合法域名、TLS 证书等」，否则本地 HTTP 请求发不出去。

3.2 封装网络请求工具#

为了方便管理，统一封装请求。创建 utils/api.js：

1
// 你的服务器地址（阶段1部署的 Spring Boot）
2
const BASE_URL = 'http://你的服务器IP:8080'
3

4
function request(url, method = 'GET', data = {}) {
5
  return new Promise((resolve, reject) => {
6
    wx.request({
7
      url: BASE_URL + url,
8
      method: method,
9
      data: data,
10
      header: {
11
        'Content-Type': 'application/json'
12
      },
13
      success: (res) => {
14
        if (res.statusCode === 200) {
15
          resolve(res.data)
16
        } else {
17
          reject(res.data)
18
        }
19
      },
20
      fail: (err) => {
21
        reject(err)
22
      }
23
    })
24
  })
25
}
26

27
// 上传图片专用
28
function uploadImage(filePath) {
29
  return new Promise((resolve, reject) => {
30
    wx.uploadFile({
31
      url: BASE_URL + '/api/images/upload-and-recognize',
32
      filePath: filePath,
33
      name: 'file',
34
      success: (res) => {
35
        try {
36
          const data = JSON.parse(res.data)
37
          if (data.code === 200) {
38
            resolve(data.data)
39
          } else {
40
            reject(data)
41
          }
42
        } catch(e) {
43
          reject({ message: '解析失败' })
44
        }
45
      },
46
      fail: (err) => reject(err)
47
    })
48
  })
49
}
50

51
module.exports = { request, uploadImage }

3.3 在页面中调用后端#

改造 pages/index/index.js，引入 api 模块，拍照后自动上传：

1
const api = require('../../utils/api')
2

3
Page({
4
  data: {
5
    imageUrl: '',
6
    result: ''
7
  },
8

9
  takePhoto() {
10
    wx.chooseMedia({
11
      count: 1,
12
      mediaType: ['image'],
13
      sourceType: ['camera'],
14
      success: (res) => {
15
        const tempFilePath = res.tempFiles[0].tempFilePath
16
        this.setData({ imageUrl: tempFilePath })
17

18
        // 显示上传中
19
        wx.showLoading({ title: '识别中...' })
20

21
        // 调用后端 AI 识别接口
22
        api.uploadImage(tempFilePath)
23
          .then(record => {
24
            wx.hideLoading()
25
            this.setData({
26
              result: record.recognitionResult || '识别完成'
27
            })
28
            wx.showToast({ title: '识别成功！', icon: 'success' })
29
          })
30
          .catch(err => {
31
            wx.hideLoading()
32
            console.error('识别失败', err)
33
            wx.showToast({ title: '识别失败，请重试', icon: 'error' })
34
          })
35
      },
36
      fail: (err) => {
37
        console.error('拍照失败', err)
38
      }
39
    })
40
  }
41
})

3.4 验证全链路#

确保服务器上 jar 在跑，笔记本上 Flask API + frp 也在跑。
小程序拍照 → 显示 loading → 返回结果（目前是 fake_prediction，但证明链路通）。
现在是小程序 → Spring Boot → 笔记本 AI → 返回结果的全链路打通时刻！

四、历史记录列表页#

4.1 创建 history 页面#

在 pages 文件夹上右键 → 新建文件夹 history，然后新建 Page（选四个文件）。

修改以下文件

history.wxml :

1
<view class="container">
2
  <view class="title">历史记录</view>
3

4
  <view wx:if="{{list.length === 0}}" class="empty">暂无记录</view>
5

6
  <view wx:for="{{list}}" wx:key="id" class="card">
7
    <image src="{{serverUrl}}{{item.imageUrl}}" mode="aspectFill" class="card-image"/>
8
    <view class="card-info">
9
      <text class="card-name">{{item.originalFilename}}</text>
10
      <text class="card-result">{{item.recognitionResult || '未识别'}}</text>
11
      <text class="card-time">{{item.createTime}}</text>
12
    </view>
13
  </view>
14
</view>

history.js :

1
const api = require('../../utils/api')
2

3
Page({
4
  data: {
5
    list: [],
6
    serverUrl: 'http://你的服务器IP:8080'  // 拼图片完整路径
7
  },
8

9
  onShow() {
10
    this.loadHistory()
11
  },
12

13
  loadHistory() {
14
    wx.showLoading({ title: '加载中' })
15
    api.request('/api/images', 'GET')
16
      .then(res => {
17
        wx.hideLoading()
18
        if (res.code === 200) {
19
          this.setData({ list: res.data.reverse() })  // 最新的在前
20
        }
21
      })
22
      .catch(err => {
23
        wx.hideLoading()
24
        console.error(err)
25
      })
26
  }
27
})

history.wxss :

1
.container { padding: 20rpx; }
2
.title { font-size: 36rpx; font-weight: bold; padding: 20rpx; }
3
.empty { text-align: center; color: #999; margin-top: 100rpx; }
4
.card { display: flex; background: white; border-radius: 16rpx; padding: 20rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08); }
5
.card-image { width: 150rpx; height: 150rpx; border-radius: 12rpx; }
6
.card-info { flex: 1; margin-left: 20rpx; display: flex; flex-direction: column; justify-content: space-around; }
7
.card-name { font-size: 28rpx; font-weight: bold; }
8
.card-result { font-size: 24rpx; color: #07c160; }
9
.card-time { font-size: 22rpx; color: #999; }

4.2 注册页面#

在 app.json 的 pages 数组中注册：

1
"pages": [
2
  "pages/index/index",
3
  "pages/history/history"
4
]

4.3 添加底部导航栏#

在 app.json 中添加 tabBar：

1
"tabBar": {
2
  "color": "#999",
3
  "selectedColor": "#07c160",
4
  "list": [
5
    {
6
      "pagePath": "pages/index/index",
7
      "text": "拍照",
8
      "iconPath": "images/camera.png",
9
      "selectedIconPath": "images/camera-active.png"
10
    },
11
    {
12
      "pagePath": "pages/history/history",
13
      "text": "记录",
14
      "iconPath": "images/history.png",
15
      "selectedIconPath": "images/history-active.png"
16
    }
17
  ]
18
}

五、图片压缩#

5.0 为什么要压缩#

手机拍照一张图通常 2-5 MB，服务器带宽小（2核2G），直接上传可能要 5-10 秒。压缩到 100KB 以内，秒传。

5.1 改造 `index.js`#

实现思路

在 takePhoto 拍照成功后，不直接上传，而是先调用 wx.compressImage 压缩，压缩后的临时文件再上传。

完整改造 pages/index/index.js

1
const api = require('../../utils/api')
2

3
Page({
4
  data: {
5
    imageUrl: '',        // 压缩后的用于展示
6
    originalUrl: '',     // 原始图（如果需要预览大图）
7
    result: '',
8
    uploading: false     // 上传中状态，防重复点击
9
  },
10

11
  takePhoto() {
12
    // 防重复点击
13
    if (this.data.uploading) return
14

15
    wx.chooseMedia({
16
      count: 1,
17
      mediaType: ['image'],
18
      sourceType: ['camera'],
19
      success: (res) => {
20
        const originalPath = res.tempFiles[0].tempFilePath
21

22
        // 先显示原图（给用户即时反馈）
23
        this.setData({
24
          imageUrl: originalPath,
25
          originalUrl: originalPath,
26
          result: ''  // 清空旧结果
27
        })
28

29
        // 压缩图片
30
        this.compressAndUpload(originalPath)
31
      },
32
      fail: (err) => {
33
        console.error('拍照失败', err)
34
        wx.showToast({ title: '拍照失败', icon: 'error' })
35
      }
36
    })
37
  },
38

39
  // 压缩后上传
40
  compressAndUpload(filePath) {
41
    wx.showLoading({ title: '压缩中...' })
42

43
    wx.compressImage({
44
      src: filePath,
45
      quality: 60,           // 60%质量，肉眼几乎看不出差别
46
      success: (compressRes) => {
47
        wx.hideLoading()
48
        // 用压缩后的图片展示（加载更快）
49
        this.setData({ imageUrl: compressRes.tempFilePath })
50
        // 上传并识别
51
        this.uploadAndRecognize(compressRes.tempFilePath)
52
      },
53
      fail: () => {
54
        // 压缩失败直接用原图上传
55
        wx.hideLoading()
56
        this.uploadAndRecognize(filePath)
57
      }
58
    })
59
  },
60

61
  // 上传到后端识别
62
  uploadAndRecognize(filePath) {
63
    this.setData({ uploading: true })
64
    wx.showLoading({ title: '识别中...', mask: true })
65

66
    api.uploadImage(filePath)
67
      .then(record => {
68
        wx.hideLoading()
69
        this.setData({
70
          result: record.recognitionResult || '识别完成',
71
          uploading: false
72
        })
73
        wx.showToast({ title: '识别成功！', icon: 'success' })
74
      })
75
      .catch(err => {
76
        wx.hideLoading()
77
        this.setData({ uploading: false })
78
        console.error('识别失败', err)
79
        // 显示重试选项（任务3详讲）
80
        this.showRetryDialog(filePath)
81
      })
82
  },
83

84
  showRetryDialog(filePath) {
85
    wx.showModal({
86
      title: '识别失败',
87
      content: '网络似乎不太好，要重试吗？',
88
      confirmText: '重试',
89
      cancelText: '取消',
90
      success: (res) => {
91
        if (res.confirm) {
92
          this.uploadAndRecognize(filePath)
93
        }
94
      }
95
    })
96
  }
97
})

关键点说明

quality: 60：平衡清晰度与大小，可调，80/60/40 根据实际压缩结果选。
mask: true：loading 时阻止用户点其他按钮。
uploading 状态：防止用户狂点按钮造成重复上传。

六、前端系统优化#

6.1 加载状态与空状态完善#

6.1.1 历史记录页优化 `pages/history/history.js`#

1
const api = require('../../utils/api')
2

3
Page({
4
  data: {
5
    list: [],
6
    serverUrl: 'http://你的服务器IP:8080',
7
    loading: true,      // 首次加载状态
8
    error: false,       // 是否加载失败
9
    errorMsg: ''
10
  },
11

12
  onShow() {
13
    this.loadHistory()
14
  },
15

16
  loadHistory() {
17
    this.setData({ loading: true, error: false })
18

19
    api.request('/api/images', 'GET')
20
      .then(res => {
21
        this.setData({ loading: false })
22
        if (res.code === 200) {
23
          this.setData({ list: res.data.reverse() })
24
          if (res.data.length === 0) {
25
            // 空状态由 wxml 处理
26
          }
27
        }
28
      })
29
      .catch(err => {
30
        console.error('加载历史失败', err)
31
        this.setData({
32
          loading: false,
33
          error: true,
34
          errorMsg: '加载失败，请检查网络'
35
        })
36
      })
37
  },
38

39
  // 下拉刷新
40
  onPullDownRefresh() {
41
    this.loadHistory()
42
    wx.stopPullDownRefresh()
43
  },
44

45
  // 重试按钮
46
  retry() {
47
    this.loadHistory()
48
  }
49
})

6.1.2 历史记录页模板优化`pages/history/history.wxml`#

1
<view class="container">
2
  <view class="title">历史记录</view>
3

4
  <!-- 加载中 -->
5
  <view wx:if="{{loading}}" class="status-box">
6
    <text>加载中...</text>
7
  </view>
8

9
  <!-- 加载失败 -->
10
  <view wx:elif="{{error}}" class="status-box">
11
    <text class="error-text">{{errorMsg}}</text>
12
    <button class="retry-btn" bindtap="retry">重新加载</button>
13
  </view>
14

15
  <!-- 空状态 -->
16
  <view wx:elif="{{list.length === 0}}" class="status-box">
17
    <text class="empty-icon">📷</text>
18
    <text class="empty-text">还没有识别记录</text>
19
    <text class="empty-hint">去首页拍张照片试试吧</text>
20
  </view>
21

22
  <!-- 列表 -->
23
  <view wx:else>
24
    <view wx:for="{{list}}" wx:key="id" class="card" bindtap="previewImage" data-url="{{serverUrl}}{{item.imageUrl}}">
25
      <image src="{{serverUrl}}{{item.imageUrl}}" mode="aspectFill" class="card-image"/>
26
      <view class="card-info">
27
        <text class="card-name">{{item.originalFilename}}</text>
28
        <text class="card-result">{{item.recognitionResult || '未识别'}}</text>
29
        <text class="card-time">{{item.createTime}}</text>
30
      </view>
31
      <text class="arrow">></text>
32
    </view>
33
  </view>
34
</view>

6.1.3 历史记录页样式补充#

1
/* 状态占位 */
2
.status-box {
3
  display: flex;
4
  flex-direction: column;
5
  align-items: center;
6
  justify-content: center;
7
  padding: 100rpx 0;
8
}
9
.empty-icon { font-size: 80rpx; margin-bottom: 20rpx; }
10
.empty-text { font-size: 28rpx; color: #666; }
11
.empty-hint { font-size: 24rpx; color: #999; margin-top: 10rpx; }
12
.error-text { color: #e74c3c; font-size: 28rpx; margin-bottom: 20rpx; }
13
.retry-btn {
14
  background: #07c160;
15
  color: white;
16
  font-size: 26rpx;
17
  padding: 10rpx 40rpx;
18
  border-radius: 40rpx;
19
}
20
.arrow { color: #ccc; font-size: 28rpx; align-self: center; }

6.2 错误处理#

完善 utils/api.js，加入超时和统一错误提示：

1
const BASE_URL = 'http://你的服务器IP:8080'
2

3
// 通用请求
4
function request(url, method = 'GET', data = {}, showError = true) {
5
  return new Promise((resolve, reject) => {
6
    wx.request({
7
      url: BASE_URL + url,
8
      method: method,
9
      data: data,
10
      timeout: 10000,  // 10秒超时
11
      header: { 'Content-Type': 'application/json' },
12
      success: (res) => {
13
        if (res.statusCode === 200) {
14
          resolve(res.data)
15
        } else {
16
          if (showError) wx.showToast({ title: '服务器错误', icon: 'none' })
17
          reject(res.data)
18
        }
19
      },
20
      fail: (err) => {
21
        if (showError) {
22
          wx.showToast({ title: '网络连接失败', icon: 'none' })
23
        }
24
        reject(err)
25
      }
26
    })
27
  })
28
}
29

30
// 上传图片
31
function uploadImage(filePath) {
32
  return new Promise((resolve, reject) => {
33
    wx.uploadFile({
34
      url: BASE_URL + '/api/images/upload-and-recognize',
35
      filePath: filePath,
36
      name: 'file',
37
      timeout: 30000,  // 上传给30秒
38
      success: (res) => {
39
        try {
40
          const data = JSON.parse(res.data)
41
          if (data.code === 200) {
42
            resolve(data.data)
43
          } else {
44
            wx.showToast({ title: data.message || '识别失败', icon: 'none' })
45
            reject(data)
46
          }
47
        } catch(e) {
48
          reject({ message: '数据解析失败' })
49
        }
50
      },
51
      fail: (err) => {
52
        wx.showToast({ title: '上传失败', icon: 'none' })
53
        reject(err)
54
      }
55
    })
56
  })
57
}
58

59
module.exports = { request, uploadImage }

6.3 完善UI细节#

6.3.1 图片预览#

在 history.wxml 中，卡片已经绑定了 bindtap="previewImage"。现在在 history.js 中加入方法：

1
// 在 Page({}) 内部添加
2
previewImage(e) {
3
  const url = e.currentTarget.dataset.url
4
  wx.previewImage({
5
    urls: [url],       // 图片地址数组，可以多张左右滑动
6
    current: url       // 当前显示哪张
7
  })
8
}

首页也想预览的话，在 index.wxml 的 <image> 标签上加 bindtap="previewImage"，index.js 中同样加：

1
previewImage() {
2
  wx.previewImage({
3
    urls: [this.data.originalUrl || this.data.imageUrl],
4
  })
5
}

6.3.2 统一色调#

选定一个主色，比如微信绿 #07c160，所有按钮、高亮用这个色。在 app.wxss 中定义全局变量：

1
page {
2
  --primary: #07c160;
3
  --danger: #e74c3c;
4
  --text: #333;
5
  --text-light: #999;
6
  --bg: #f5f5f5;
7
  background-color: var(--bg);
8
  font-size: 28rpx;
9
  color: var(--text);
10
}

6.3.3 首页美化与细节交互#

1
/* 全面美化版 index.wxss */
2
.container {
3
  padding: 30rpx;
4
  display: flex;
5
  flex-direction: column;
6
  align-items: center;
7
  min-height: 100vh;
8
}
9

10
.title {
11
  font-size: 42rpx;
12
  font-weight: bold;
13
  color: var(--primary);
14
  margin: 40rpx 0 30rpx;
15
  letter-spacing: 2rpx;
16
}
17

18
.image-area {
19
  width: 100%;
20
  height: 450rpx;
21
  background: white;
22
  border-radius: 24rpx;
23
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
24
  display: flex;
25
  align-items: center;
26
  justify-content: center;
27
  margin-bottom: 40rpx;
28
  overflow: hidden;
29
}
30

31
.preview-image {
32
  width: 100%;
33
  height: 100%;
34
  border-radius: 24rpx;
35
}
36

37
.placeholder {
38
  text-align: center;
39
  color: #bbb;
40
}
41

42
.placeholder-icon {
43
  font-size: 80rpx;
44
  display: block;
45
  margin-bottom: 16rpx;
46
}
47

48
.placeholder-text {
49
  font-size: 28rpx;
50
}
51

52
.camera-btn {
53
  width: 80%;
54
  height: 88rpx;
55
  background: linear-gradient(135deg, #07c160, #06ad56);
56
  color: white;
57
  font-size: 34rpx;
58
  font-weight: bold;
59
  border-radius: 44rpx;
60
  box-shadow: 0 8rpx 20rpx rgba(7, 193, 96, 0.3);
61
  display: flex;
62
  align-items: center;
63
  justify-content: center;
64
  margin-bottom: 40rpx;
65
}
66

67
.camera-btn:active {
68
  opacity: 0.8;
69
  transform: scale(0.98);
70
}
71

72
.result-box {
73
  width: 100%;
74
  background: white;
75
  border-radius: 24rpx;
76
  padding: 30rpx;
77
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
78
}
79

80
.result-label {
81
  font-size: 26rpx;
82
  color: #999;
83
  margin-bottom: 12rpx;
84
}
85

86
.result-text {
87
  font-size: 32rpx;
88
  font-weight: bold;
89
  color: var(--primary);
90
  word-break: break-all;
91
}

对应更新 index.wxml 的占位区：

1
<view wx:else class="placeholder">
2
  <text class="placeholder-icon">📷</text>
3
  <text class="placeholder-text">点击下方按钮拍照</text>
4
</view>

以及结果区：

1
<view wx:if="{{result}}" class="result-box">
2
  <text class="result-label">🔍 识别结果</text>
3
  <text class="result-text">{{result}}</text>
4
</view>

6.3.4 底部导航图标生成#

用 emoji 代替图标文件，或者去 iconfont 下载免费图标（48x48 px）。

如果 app.json 中没图标，可以暂时注释掉 iconPath 和 selectedIconPath，只用文字：

1
"tabBar": {
2
  "color": "#999",
3
  "selectedColor": "#07c160",
4
  "list": [
5
    {
6
      "pagePath": "pages/index/index",
7
      "text": "📷 拍照"
8
    },
9
    {
10
      "pagePath": "pages/history/history",
11
      "text": "📋 记录"
12
    }
13
  ]
14
}

七、验收清单#

小程序点击”拍照识别”能调起相机
拍照后图片显示在页面上，并上传到后端
后端返回识别结果，页面显示
历史记录页能展示所有识别过的记录
底部导航栏正常切换

一、这篇文章将要做的#

1.1 回顾#

1.2 目标#

二、创建第一个小程序项目#

2.1 注册小程序账号与下载工具#

注册（如果还没有）#

下载开发者工具#

2.2 创建项目#

2.3 认识四个核心文件#

2.4 改造首页#

2.5 预览效果#

三、发起HTTP请求连接后端#

3.1 配置服务器域名#

3.2 封装网络请求工具#

3.3 在页面中调用后端#

3.4 验证全链路#

四、历史记录列表页#

4.1 创建 history 页面#

4.2 注册页面#

4.3 添加底部导航栏#

五、图片压缩#

5.0 为什么要压缩#

5.1 改造 index.js#

六、前端系统优化#

6.1 加载状态与空状态完善#

6.1.1 历史记录页优化 pages/history/history.js#

6.1.2 历史记录页模板优化pages/history/history.wxml#

6.1.3 历史记录页样式补充#

6.2 错误处理#

6.3 完善UI细节#

6.3.1 图片预览#

6.3.2 统一色调#

6.3.3 首页美化与细节交互#

6.3.4 底部导航图标生成#

七、验收清单#

5.1 改造 `index.js`#

6.1.1 历史记录页优化 `pages/history/history.js`#

6.1.2 历史记录页模板优化`pages/history/history.wxml`#