《用Cursor和AI绘画24小时开发壁纸小程序》详细开发实录

• 💂 个人网站:【 摸鱼游戏】【星海导航】【神级代码资源网站】

1. 项目架构设计

项目目录结构：
├── miniprogram               # 微信小程序主目录
│   ├── pages
│   │   ├── index             # 首页
│   │   │   ├── index.js      # 页面逻辑
│   │   │   ├── index.json    # 页面配置
│   │   │   ├── index.wxml    # 页面结构
│   │   │   └── index.wxss    # 页面样式
│   ├── app.js               # 小程序入口文件
│   ├── app.json             # 小程序全局配置
│   └── app.wxss            # 全局样式
├── cloud-functions          # 云函数目录
│   └── generate-image       # AI图片生成云函数
└── project.config.json      # 项目配置文件

2. 核心代码实现（带详细注释）

2.1 前端页面逻辑 (index.js)

// pages/index/index.js
Page({
  data: {
    prompt: '',          // 用户输入的提示词
    generatedImages: [], // 生成的图片列表
    isLoading: false,    // 加载状态
    error: null          // 错误信息
  },

  // 处理用户输入
  handleInputChange: function(e) {
    this.setData({ prompt: e.detail.value });
  },

  // 调用AI生成图片
  generateImage: async function() {
    if (!this.data.prompt.trim()) {
      this.setData({ error: '请输入描述文字' });
      return;
    }

    this.setData({ isLoading: true, error: null });

    try {
      // 调用云函数
      const res = await wx.cloud.callFunction({
        name: 'generate-image',
        data: {
          prompt: this.data.prompt,
          width: 512,
          height: 512
        }
      });

      // 更新图片列表
      this.setData({
        generatedImages: [res.result.imageUrl, ...this.data.generatedImages],
        prompt: ''
      });
    } catch (err) {
      console.error('生成失败:', err);
      this.setData({ error: '生成失败，请重试' });
    } finally {
      this.setData({ isLoading: false });
    }
  },

  // 保存图片到相册
  saveImage: function(e) {
    const { url } = e.currentTarget.dataset;
    
    wx.downloadFile({
      url: url,
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => wx.showToast({ title: '保存成功' }),
          fail: () => wx.showToast({ title: '保存失败', icon: 'error' })
        });
      }
    });
  }
});

2.2 云函数实现 (generate-image/index.js)

// cloud-functions/generate-image/index.js
const cloud = require('wx-server-sdk');
const axios = require('axios');

cloud.init();

// Stable Diffusion API配置
const SD_API_KEY = 'your_api_key_here';
const SD_API_URL = 'https://api.stablediffusion.ai/v1/generate';

exports.main = async (event, context) => {
  try {
    // 调用Stable Diffusion API
    const response = await axios.post(SD_API_URL, {
      prompt: event.prompt,
      width: event.width || 512,
      height: event.height || 512,
      steps: 30,
      guidance_scale: 7.5
    }, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${SD_API_KEY}`
      }
    });

    // 返回图片URL
    return {
      imageUrl: response.data.output[0] // 假设API返回结构包含output数组
    };
  } catch (error) {
    console.error('AI生成错误:', error);
    throw new Error('图片生成失败');
  }
};

2.3 页面结构 (index.wxml)

<!-- pages/index/index.wxml -->
<view class="container">
  <!-- 输入区域 -->
  <view class="input-section">
    <textarea 
      value="{{prompt}}" 
      placeholder="请输入壁纸描述（如：星空下的城市）" 
      bindinput="handleInputChange"
      class="input-box"
    />
    <button 
      type="primary" 
      bindtap="generateImage" 
      loading="{{isLoading}}"
      disabled="{{isLoading}}"
    >
      {{isLoading ? '生成中...' : '生成壁纸'}}
    </button>
  </view>

  <!-- 错误提示 -->
  <view wx:if="{{error}}" class="error-message">
    {{error}}
  </view>

  <!-- 图片展示 -->
  <view class="gallery">
    <block wx:for="{{generatedImages}}" wx:key="*this">
      <view class="image-item">
        <image src="{{item}}" mode="aspectFill" />
        <button 
          size="mini" 
          bindtap="saveImage" 
          data-url="{{item}}"
        >
          保存图片
        </button>
      </view>
    </block>
  </view>
</view>

2.4 页面样式 (index.wxss)

/* pages/index/index.wxss */
.container {
  padding: 20rpx;
}

.input-section {
  margin-bottom: 30rpx;
}

.input-box {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #eee;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
}

.error-message {
  color: #ff4d4f;
  margin: 20rpx 0;
  text-align: center;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-top: 30rpx;
}

.image-item {
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.image-item image {
  width: 100%;
  height: 300rpx;
  display: block;
}

.image-item button {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

3. Cursor 的关键辅助点

3.1 代码生成示例

在Cursor中输入：

创建一个微信小程序页面，包含：

1. 文本输入区
2. 生成按钮
3. 图片网格布局展示区
4. 每张图片有保存按钮

Cursor自动生成基础框架代码，节省约2小时开发时间。

3.2 错误修复实例

当遇到API调用问题时：

// 原始有问题的代码
wx.cloud.callFunction({
  name: 'generate-image'
}).then(res => {
  this.setData({ generatedImages: res.imageUrl }); // 这里结构错误
});

Cursor自动检测并建议修正：

// 修正后的代码
wx.cloud.callFunction({
  name: 'generate-image',
  data: { prompt: this.data.prompt }
}).then(res => {
  this.setData({ 
    generatedImages: [res.result.imageUrl, ...this.data.generatedImages] 
  });
});

3.3 性能优化建议

Cursor分析代码后建议：

1. 添加图片缓存机制
2. 使用CDN加速图片加载
3. 添加生成历史记录功能

实现缓存优化的代码示例：

// 在app.js中
App({
  globalData: {
    imageCache: {} // 图片缓存对象
  }
});

// 在页面中
const app = getApp();
if (app.globalData.imageCache[prompt]) {
  // 使用缓存
} else {
  // 调用API
}

4. 完整开发时间线

时间段	工作内容	Cursor辅助点
09:00-10:30	项目初始化	生成基础项目结构
10:30-12:00	AI接口对接	编写云函数框架
13:00-14:30	前端UI开发	生成WXML/WXSS代码
14:30-16:00	功能联调	错误检测与修复
16:00-17:30	性能优化	缓存机制建议
18:00-19:00	测试发布	代码合规性检查

这个案例展示了如何利用Cursor等AI工具快速实现完整项目开发，从架构设计到代码实现，再到性能优化，全程都有AI辅助，极大提升了开发效率。