如何利用 Fitten Code 快速生成微信小程序原生开发模板代码

微信小程序原生开发有一套固定的文件结构：每个页面由 wxml、wxss、js、json 四个文件组成，每个组件也有一套类似的结构。这些文件里相当一部分内容是模式化的，比如页面的生命周期函数、setData 的基本用法、列表渲染的结构、导航栏配置等。手写这些代码没有太多技术含量，却非常消耗时间。Fitten Code 是一款由非十科技推出的 AI 编程助手插件，支持 VS Code、JetBrains 系列以及 JetBrains IDE 等主流编辑器，免费且对中文提示词的支持相当好，用它来生成微信小程序的模板代码非常合适。本文将从环境搭建、提示词写法、实际代码生成三个方面详细讲解。

一、环境搭建：让 Fitten Code 在小程序项目中就位

Fitten Code 的安装并不复杂。以 VS Code 为例，打开扩展面板，搜索 Fitten Code，找到对应插件点击安装即可。安装完成后左侧边栏会出现 Fitten Code 的图标，首次使用需要注册一个账号并登录，免费版每天有一定的使用额度，对于生成模板代码这种场景完全够用。

微信小程序项目建议直接用微信开发者工具创建基础骨架，然后在 VS Code 中打开项目目录进行编码，开发者工具只负责预览和调试。这样做的好处是可以同时享受 Fitten Code 的 AI 能力和开发者工具的实时编译。打开项目后，建议先让 Fitten Code 阅读一遍项目结构，可以在对话框中输入：

请分析当前项目的目录结构，这是一个微信小程序原生项目，
总结出页面目录、组件目录和全局配置的位置。

这一步看似多余，实际上很关键。Fitten Code 在理解了项目结构之后，后续生成的代码会自动遵循你的目录约定，比如页面放在 pages 目录、公共组件放在 components 目录，生成的引用路径也会更加准确。

二、用对话模式生成页面四件套模板

Fitten Code 提供侧边栏对话和行内补全两种方式。生成模板代码用对话模式更合适，因为它可以一次性产出多个文件的内容。以生成一个商品列表页为例，可以在对话框中这样描述：

在 pages 目录下新建一个 goods-list 页面，生成完整的四件套：
1. goods-list.wxml：顶部搜索框，下方商品列表，每个商品项包含图片、名称、价格；
2. goods-list.wxss：使用 flex 布局，商品项横向排列，图片 200rpx 大小；
3. goods-list.js：包含 onLoad、onPullDownRefresh、onReachBottom 生命周期，
   data 中定义 goodsList 和 pageInfo，并预留请求接口的方法；
4. goods-list.json：开启下拉刷新，导航栏标题为商品列表。

这种写法的关键在于把需求拆解到具体文件级别，并明确写出单位（rpx）、生命周期名称、data 字段名等细节。描述越具体，生成的代码越接近可直接使用的状态。下面是 Fitten Code 可能生成的 js 文件效果：

Page({
  data: {
    goodsList: [],
    pageInfo: {
      page: 1,
      pageSize: 10,
      total: 0
    }
  },

  onLoad() {
    this.fetchGoodsList();
  },

  // 获取商品列表数据
  fetchGoodsList() {
    const { page, pageSize } = this.data.pageInfo;
    // 此处替换为真实接口地址
    wx.request({
      url: 'https://www.ipipp.com/api/goods/list',
      method: 'GET',
      data: { page, pageSize },
      success: (res) => {
        this.setData({
          goodsList: res.data.list,
          'pageInfo.total': res.data.total
        });
      }
    });
  },

  onPullDownRefresh() {
    this.setData({ 'pageInfo.page': 1 });
    this.fetchGoodsList();
    wx.stopPullDownRefresh();
  },

  onReachBottom() {
    const { page, total } = this.data.pageInfo;
    if (this.data.goodsList.length < total) {
      this.setData({ 'pageInfo.page': page + 1 });
      this.fetchGoodsList();
    }
  }
});

生成之后不要直接全盘接受，重点检查三个地方：一是 app.json 中是否需要手动注册新页面路径，Fitten Code 有时只生成文件而忘记提醒注册；二是 wx.request 的域名是否合规，需要在开发者工具中配置合法域名；三是分页逻辑中 total 的判断条件是否符合你的接口返回结构。AI 生成的代码是草稿，人工审查这一步不能省。

三、生成自定义组件与复用性代码片段

除了页面，自定义组件是小程序开发中另一块重复劳动的重灾区。让 Fitten Code 生成组件时，务必说明组件的 properties、事件回调和样式隔离方式。例如生成一个价格展示组件：

在 components 目录下新建 price-tag 组件：
- properties 接收 price（数字）和 size（字符串，默认 normal）
- 价格格式化为两位小数，整数部分字号大、小数部分字号小
- 点击组件触发 bindtap 冒泡事件
- 样式使用 styleIsolation: 'isolated'

Fitten Code 会生成对应的 js、wxml、wxss、json 四个文件，json 中自动包含 "component": true 的声明。生成的 wxml 大致如下：

<view class="price-tag {{size}}" bindtap="handleTap">
  <text class="symbol">¥</text>
  <text class="integer">{{integerPart}}</text>
  <text class="decimal">.{{decimalPart}}</text>
</view>

对于高频复用的代码片段，比如 wx.showToast 封装、防抖函数、时间格式化工具，可以利用 Fitten Code 的行内补全能力。在 utils 目录下写一行注释，例如 // 防抖函数，延迟 300ms，然后换行，Fitten Code 会自动补全完整实现，按 Tab 键接受即可。这种方式适合短小的工具函数，比切换到对话框来回粘贴更流畅。

四、提升生成质量的提示词技巧

想让 Fitten Code 输出的代码更贴合项目规范，有几个实用技巧。第一，把团队规范直接告诉它，例如提示词中写明项目使用 rpx 单位、命名采用短横线风格、不使用云开发，AI 会严格遵循这些约束。第二，利用上下文引用，输入框中可以用 #文件名 的方式引用已有文件，比如让它在参考 api.js 封装风格的基础上生成新的请求方法。第三，分步生成，对于复杂页面先让它生成整体结构，确认骨架没问题后再逐块细化样式和逻辑，避免一次性生成后大段返工。

另外要养成保存常用提示词的习惯。把项目中反复出现的页面类型（列表页、表单页、详情页）的标准提示词整理成文档，每次新建页面时复制粘贴稍作修改，几分钟就能得到一套结构统一的模板代码。这种做法配合 Fitten Code 的免费额度，可以让小程序项目的初始开发速度提升一倍以上，把精力留给真正的业务逻辑和交互细节。

Fitten Code微信小程序代码生成修改时间：2026-09-05 09:22:37