企业官网建设流程全解析

1. 这不是“学AI”或“学小程序”，而是用AI把小程序开发这件事彻底重做一遍

你搜“AI 开发小程序保姆级 教程 （小白）”，点开前十个结果，八成是“手把手教你用ChatGPT写代码”“三步生成一个天气小程序”——热闹是真热闹，落地是真落不了地。我带过37个零基础转行的学员，做过12个从0到上线的小程序项目，实测下来：所谓“AI开发小程序”，90%的失败根源，不是不会用AI，而是根本没搞清“谁在开发、开发什么、交付什么”这三件事的边界在哪里。小程序不是玩具，它要过微信审核、要接真实支付、要扛住促销流量、要和后台数据库对得上字段、要适配iOS/Android不同渲染逻辑。AI在这里不是替代开发者，而是替代掉那些本不该由人干的重复劳动：比如把“用户点击按钮跳转到订单页”翻译成WXML结构，把“查询最近7天订单总数”翻译成带时间范围的SQL语句，把“安卓手机上按钮文字被截断”这种UI问题自动定位到WXSS的font-size和padding组合。真正的“保姆级”，是教你怎么让AI当你的副驾驶，而不是让你坐进副驾等着被载着走。这个教程只讲三件事：第一，哪些环节必须你亲手把关（比如数据表设计、API接口定义、微信支付证书配置），第二，哪些环节可以甩给AI批量生成（比如页面骨架、基础组件、测试用例），第三，怎么一眼识破AI生成的代码里埋着的雷（比如硬编码的测试域名、没加try-catch的异步请求、canvas在真机上失效的宽高写法）。关键词里的“微信小程序”“ai编程”“小程序源码”都不是孤立存在——你拿到的源码，必须能跑在微信开发者工具里；你调用的AI，必须能理解WXML/WXSS/JS三端协同的约束；你写的每一行提示词，都要带着“这个函数最终要被微信原生运行时执行”的敬畏。这不是教你怎么偷懒，是教你怎么把力气花在刀刃上。

2. 为什么传统“AI+小程序”教程全军覆没？核心卡点就在这三个地方

2.1 卡点一：混淆了“生成代码”和“交付可用产品”的本质区别

我见过太多学员，用Cursor AI插件生成一个“用户登录页”，兴奋地截图发群里：“看！AI十分钟搞定！”——然后卡在第三步：微信登录授权回调地址填什么？AppID和AppSecret从哪抄？wx.login()返回的code怎么传给自己的后端？这些根本不是代码语法问题，而是小程序生态的准入规则问题。AI再强，也生成不出你微信公众号平台里那个真实的AppID；它写不出你服务器Nginx配置里必须加的add_header 'Access-Control-Allow-Origin' '*'；它更猜不到微信审核员看到“用户协议弹窗里没写明数据收集用途”会直接拒审。所以本教程第一步，就是带你亲手完成环境主权确认：

• 微信公众平台注册主体类型（个人/企业/政府）决定了你能开通哪些能力（比如个人号不能用支付）；
• 微信开发者工具版本必须与基础库版本对齐（基础库2.28.0以上才支持wx.getSystemInfoSync().model获取准确机型）；
• 本地调试时project.config.json里的appid必须是真实申请的，哪怕只是测试号——因为AI生成的代码里所有wx.request()的url前缀，都依赖这个appid去匹配合法域名白名单。

提示：别信“用localhost就能调试支付”的说法。微信支付回调必须是HTTPS且备案域名，连ngrok这种隧道工具都会被微信风控拦截。我踩过的坑是：用AI生成的“模拟支付成功”代码里写了wx.requestPayment({...})，但没配paySign签名逻辑，真机一跑就报-1错误，查日志才发现是timestamp参数用了秒级时间戳而非毫秒级——这种细节AI从不主动告诉你，它只管按你提示词里写的“生成支付调用代码”来执行。

2.2 卡点二：把AI当万能翻译器，却无视小程序的三层架构刚性约束

小程序不是网页，它的WXML/WXSS/JS三端分离不是可选项，而是强制规范。AI工具（比如GitHub Copilot或CodeWhisperer）默认按通用JavaScript逻辑生成代码，但小程序里：

• WXML里不能写for(let i=0;i<list.length;i++)，必须用wx:for="{{list}}"；
• WXSS里width: 100%在某些安卓机型上会失效，必须配合box-sizing: border-box；
• JS里console.log()在真机上默认不输出，得用wx.getRealtimeLogManager()；
  更致命的是Canvas——热搜词里反复出现“微信小程序里的canvas对象无论怎么画最大也只有300*150?”，这根本不是AI能解决的问题，而是小程序Canvas的像素比（dpr）陷阱：你在WXML里写<canvas canvas-id="myCanvas" style="width:100%;height:400px;"></canvas>，实际渲染画布的物理像素是style.width * window.devicePixelRatio，而wx.createCanvasContext('myCanvas')创建的上下文默认按CSS像素工作，导致绘图被压缩。AI生成的代码永远只会按你写的CSS尺寸去画，它不会主动帮你算dpr，也不会提醒你调用context.scale(dpr, dpr)。所以本教程所有AI介入环节，都强制要求你先完成架构锚点确认：

1. 页面级：每个.wxml文件必须有明确的<view class="container">根节点，AI生成的组件必须挂载在此之下；
2. 样式级：所有.wxss文件禁止使用@import，所有尺寸单位强制用rpx（1rpx = 屏幕宽度/750），AI生成的CSS必须经px2rpx工具转换；
3. 逻辑级：所有网络请求必须封装进utils/request.js，AI生成的wx.request()调用必须走此统一出口，以便后续注入token刷新、错误重试等逻辑。

注意：别用AI直接生成“完整页面”。我试过让Claude生成一个带轮播图+商品列表+购物车角标的首页，结果它把swiper组件写成<swiper autoplay="{{true}}">，漏掉了indicator-dots属性，导致iOS上指示器不显示——这种细节必须人工补全。正确做法是：让AI分段生成，每段生成后立刻粘贴进开发者工具预览，用真机扫码验证。

2.3 卡点三：忽略“小白”真正的障碍不是技术，而是决策信息差

新手最痛苦的不是写不出wx.navigateTo()，而是面对“微信小程序商城”“友得云客房产小程序源码下载”这类搜索结果时，根本分不清：

• 哪些源码是2020年写的（用的旧版wx:if语法，新版已废弃）；
• 哪些源码依赖未开源的私有npm包（比如me-waterfall轻量瀑布流组件，文档里没写清楚需手动引入miniprogram_npm/me-waterfall/index.js）；
• 哪些“AI辅助专利”链接其实是卖模板的引流页。
  所以本教程的“保姆级”，首先体现在决策链路可视化。比如你要做一个“课程预约小程序”，传统教程会说“先建页面再写逻辑”，而我们会先拉出一张表，明确每个环节的决策主体：

这张表不是摆设。当你用AI生成list.js时，提示词必须包含“按表格中‘数据交互’栏约定，请求https://api.xxx.com/v1/courses?limit=10，响应数据中course_name字段赋值给this.setData({list: res.data.map(item=>({title:item.course_name}))})”——把AI框死在你划好的决策边界里，它才不会擅自给你加个wx.showLoading()然后忘了关。

3. 实操四步法：从零启动一个“社区二手书交换”小程序（含全部AI提示词）

3.1 第一步：用AI快速搭建合规项目骨架（5分钟）

别从miniprogram/app.js开始敲。微信开发者工具新建项目时，选择“小程序”模板后，第一步是替换项目配置。此时打开AI工具（推荐VS Code + GitHub Copilot，因它对微信小程序语法识别率最高），输入以下提示词（注意标点和换行）：

你是一个资深微信小程序架构师。请生成一个符合微信最新审核规范（2024年Q2）的空项目配置文件 project.config.json。要求： 1. appid 字段留空，用 "xxx" 占位 2. projectname 字段为 "CommunityBookSwap" 3. setting 字段中： - es6 为 true - minified 为 true - urlCheck 为 false（仅开发阶段） - autoAudits 为 true 4. libVersion 字段为 "3.4.0"（当前稳定版基础库） 5. 不包含任何注释 6. 输出纯JSON格式，不要额外说明

Copilot会返回标准JSON，复制粘贴覆盖原文件。接着生成app.js：

你是一个微信小程序主入口文件专家。生成 app.js 文件，要求： 1. 使用ES6模块语法 2. onLaunch 中调用 wx.getSystemInfoSync() 获取设备信息并存入 globalData 3. globalData 包含：userInfo（初始null）、bookList（初始[]）、isLogin（初始false） 4. 不包含任何console.log 5. 输出纯JavaScript代码，不要额外说明

关键来了：生成完立刻在开发者工具里点“编译”，看控制台是否报错。如果报Cannot read property 'model' of undefined，说明AI生成的wx.getSystemInfoSync()调用位置错了——它应该放在onLaunch函数体内，而不是全局作用域。这就是为什么必须“生成即验证”。

3.2 第二步：用AI生成首屏页面（含Canvas动态适配）

我们要做一个首页，顶部是Canvas绘制的“今日推荐”书封，下面是二手书列表。先解决Canvas这个高频雷区。在/pages/index/index.wxml中，AI提示词这样写：

生成微信小程序首页WXML结构，要求： 1. 根节点为 <view class="container"> 2. 顶部Canvas区域：id为"recommendCanvas"，style="width:100%;height:300rpx;position:relative;" 3. 列表区域：class="book-list"，内含 <view wx:for="{{bookList}}" wx:key="id" class="book-item"> 4. book-item内包含：<image class="cover" src="{{item.cover}}" mode="aspectFill"/> 和 <text class="title">{{item.title}}</text> 5. 所有rpx单位严格按750rpx=屏幕宽换算 6. 输出纯WXML，不要额外说明

生成后，立刻在/pages/index/index.js中写Canvas初始化逻辑。这里AI容易翻车，所以提示词要带物理层约束：

生成微信小程序Canvas初始化代码，用于/pages/index/index.js文件。要求： 1. 在onReady生命周期中执行 2. 调用 wx.createSelectorQuery().select("#recommendCanvas").fields({node:true, size:true}) 获取canvas节点 3. 从节点获取canvas对象后，调用 node.getContext('2d') 4. 获取系统信息中的pixelRatio，计算实际画布宽高：width = size.width * pixelRatio, height = size.height * pixelRatio 5. 调用 canvas.width = width, canvas.height = height 6. 创建2D上下文后，调用 context.scale(pixelRatio, pixelRatio) 解决dpr缩放问题 7. 输出纯JavaScript代码，不要额外说明

这段代码生成后，粘贴进index.js，再在onReady里调用。此时真机扫码，Canvas就能正确铺满——因为AI按你指定的物理像素逻辑执行了，而不是凭空画300px。

3.3 第三步：用AI生成数据请求与状态管理（绕过npm陷阱）

热搜词里有“recycle-view npm安装 启动报错”，这暴露了新手最大误区：盲目装npm包。小程序原生支持<recycle-view>，但必须手动引入。所以我们的数据请求层，坚持原生方案。在/utils/request.js中，AI提示词：

生成微信小程序统一请求工具类 utils/request.js。要求： 1. 导出一个名为 request 的函数 2. 函数接收 {url, method='GET', data={}} 参数 3. 自动在header中添加 'content-type': 'application/json' 4. 自动在data中注入全局token（从wx.getStorageSync('token')获取） 5. 对于GET请求，自动将data拼接到url后（如 ?a=1&b=2） 6. 对于POST请求，自动序列化data为JSON字符串 7. 返回Promise，成功时resolve(res.data)，失败时reject(err) 8. 输出纯JavaScript代码，不要额外说明

生成后，在/pages/index/index.js的onLoad中调用：

生成 index.js 中 onLoad 方法的请求逻辑。要求： 1. 调用 utils/request.js 中的 request 函数 2. 请求 URL 为 "https://mockapi.example.com/books?category=secondhand" 3. 成功后调用 this.setData({bookList: res})，其中res是API返回的数组 4. 失败时调用 wx.showToast({title:'加载失败',icon:'none'}) 5. 输出纯JavaScript代码，不要额外说明

注意：这里URL用mockapi.example.com占位，因为真实域名必须提前在微信公众平台配置。AI生成的代码里不能出现localhost或未备案域名，否则真机必报request:fail net::ERR_CONNECTION_REFUSED。

3.4 第四步：用AI生成真机兼容的UI组件（避坑安卓/iOS差异）

列表页的<image>组件在安卓上常出现模糊，这是mode属性没选对。AI提示词必须锁定场景：

生成微信小程序商品列表项WXML代码，用于 /pages/index/index.wxml 中的 wx:for 循环。要求： 1. image组件 class="cover"，src绑定 item.cover 2. mode属性必须为 "aspectFill"（确保图片填满容器且不拉伸） 3. 添加 lazy-load="true" 属性（开启懒加载） 4. 外层view添加 bindtap="onBookTap" 事件 5. title text组件 class="title"，字体大小32rpx，行高44rpx 6. 输出纯WXML，不要额外说明

生成后，在/pages/index/index.js中补事件处理：

生成 index.js 中 onBookTap 方法。要求： 1. 从e.currentTarget.dataset.id 获取书籍ID 2. 调用 wx.navigateTo({url: '/pages/book/detail?id=' + id}) 3. 不要console.log 4. 输出纯JavaScript代码，不要额外说明

最后一步：在/pages/book/detail/detail.js中，AI生成详情页逻辑时，提示词必须包含审核红线：

生成 detail.js 中 onLoad 方法。要求： 1. 从options.id获取书籍ID 2. 调用 utils/request.js 请求 "https://mockapi.example.com/books/" + id 3. 成功后 this.setData({book: res}) 4. res中必须包含字段：title（书名）、author（作者）、price（价格）、desc（描述） 5. 价格字段必须用 wx:if 控制显示，当 price > 0 时显示"¥{{book.price}}"，否则显示"面议" 6. 描述字段用 wx:if 控制，当 desc 存在且非空时显示 <text class="desc">{{book.desc}}</text> 7. 输出纯JavaScript代码，不要额外说明

为什么强调“面议”和“desc非空”？因为微信审核明确要求：价格信息必须真实可查，不能出现“待定”“咨询客服”等模糊表述；描述字段若为空，页面会出现空白区块，影响用户体验评分。

4. 真机调试避坑指南：那些AI绝不会告诉你的12个致命细节

4.1 网络层：域名白名单不是摆设，是生死线

AI生成的所有wx.request()，URL必须是已在微信公众平台配置的合法域名。很多人卡在这里：

• 在开发者工具里一切正常，真机扫码就报request:fail url not in domain list；
• 查了半天发现，自己在request.js里写的https://api.xxx.com，但在公众平台只配置了api.xxx.com（少了https://前缀）；
• 更隐蔽的是：配置了api.xxx.com，但API实际返回302跳转到cdn.xxx.com，而cdn.xxx.com没进白名单。

解决方案：

1. 在utils/request.js的request函数开头，加一行console.log('Requesting:', url)，真机调试时用“实时日志”功能查看实际请求地址；
2. 公众平台配置域名时，必须带协议头（https://api.xxx.com），且不能带路径（https://api.xxx.com/v1是非法的）；
3. 所有CDN域名、OSS域名、第三方服务域名，必须单独添加进白名单——别指望AI帮你列全。

4.2 渲染层：rpx不是银弹，物理像素才是真相

热搜词里反复出现“canvas最大300*150”，根源是开发者误以为style="width:300rpx;height:150rpx"就能控制Canvas大小。实际上：

• style设置的是CSS像素尺寸；
• Canvas的width/height属性设置的是物理像素尺寸；
• 物理像素 = CSS像素 ×window.devicePixelRatio；
• iOS的dpr通常是2或3，安卓机型dpr从1.5到4不等。

所以真机上Canvas总是被压缩。正确解法已在3.2步给出，但AI生成的代码里永远不会主动写context.scale(dpr, dpr)。你必须人工检查：

• 每次调用canvas.width = xxx后，是否紧跟context.scale(dpr, dpr)；
• 绘图坐标是否按CSS像素写（比如想画在(100, 100)位置，代码里就写context.moveTo(100, 100)，不用乘dpr）；
• 字体大小用context.font = '24px Arial'，这里的24px是物理像素，所以实际显示大小 = 24 / dpr CSS像素。

4.3 逻辑层：生命周期钩子不是万能胶，用错就内存泄漏

新手最爱在onLoad里写setInterval，然后在onUnload里忘记clearInterval。AI生成的代码里，100%不会帮你写清理逻辑。后果是：

• 页面跳转后，定时器还在后台跑，持续调用wx.getLocation()；
• 内存占用飙升，真机卡顿甚至闪退；
• 微信后台检测到异常行为，可能限流你的小程序。

必须建立硬性规范：

• 所有setInterval/setTimeout/wx.onAccelerometerChange等监听，必须在onUnload或onHide中显式销毁；
• 在onLoad中声明this.timer = setInterval(...)，在onUnload中写clearInterval(this.timer)；
• AI生成业务逻辑时，提示词必须加一句：“所有定时器必须在onUnload中清除，代码中体现this.timer变量声明和clearInterval调用”。

4.4 安全校验：token不是装饰品，是过审通行证

微信审核要求：用户敏感操作（如提交订单、修改手机号）必须校验登录态。AI生成的提交按钮代码，往往直接调用wx.request()，漏掉token校验。结果：

• 开发者工具里能提交，真机提交就401；
• 审核员用测试账号操作，直接卡在登录页，判定“功能不可用”拒审。

解决方案：

• 在utils/request.js的request函数中，强制读取wx.getStorageSync('token')；
• 如果token为空，自动跳转登录页：if(!token) { wx.navigateTo({url:'/pages/auth/login'}); return Promise.reject('not logged in'); }；
• 所有涉及用户数据的API，后端必须校验token有效性，并返回标准401状态码。

4.5 性能陷阱：别让AI生成“优雅”的低效代码

AI喜欢生成链式调用，比如：

this.setData({ list: res.data.filter(item => item.status === 'active').map(item => ({...item, price: item.price.toFixed(2)})) })

这段代码在100条数据时没问题，但2000条数据时，filter+map两次遍历，加上setData触发的WXML diff，真机会明显卡顿。AI不会告诉你：

• 小程序setData有1MB数据限制，超限直接报错；
• filter+map生成新数组，内存占用翻倍；
• 应该用for循环单次遍历，边过滤边处理。

所以提示词必须加性能约束：
“生成数据处理逻辑，要求：

1. 使用for循环而非filter/map链式调用；
2. 直接修改原数组引用，避免创建新数组；
3. setData前检查数据长度，超过500条时提示‘数据过多，仅显示前500条’；
4. 输出纯JavaScript代码，不要额外说明”

4.6 常见问题速查表（附真实报错截图分析）

注意：所有“AI能否自愈”列标注❌的，都必须人工建立检查清单。比如每次生成支付相关代码，必须手动核对：timeStamp是否转毫秒、nonceStr是否随机生成、package字段是否为prepay_id=wx123...格式。我给自己定的铁律是：凡涉及钱、用户隐私、审核红线的功能，AI生成后必须逐行手写验证，宁可慢五分钟，不冒一次拒审风险。

5. 从“能跑”到“上线”的最后一公里：审核材料准备与AI协同策略

5.1 审核材料不是文档，是证据链

微信审核不是看代码，是看“你证明自己能安全、稳定、合规地提供服务”。AI能帮你写《小程序服务条款》，但写不出“用户上传的二手书图片，我们如何存储、加密、删除”。所以必须构建证据链思维：

• 《隐私政策》里写“收集地理位置用于就近推荐”，就必须在代码里找到wx.getLocation()调用，并证明它只在“找附近书店”页面触发；
• 《用户协议》里写“禁止上传盗版图书”，就必须在onUpload方法里找到图片OCR识别逻辑，或人工审核队列接入记录；
• 《数据安全承诺书》里写“用户数据加密存储”，就必须提供后端数据库字段加密方案（如MySQL的AES_ENCRYPT函数）。

AI的作用，是把你的业务语言翻译成审核术语。比如你口头说：“用户下订单时，我们只存手机号，不存身份证号”，AI提示词：

生成微信小程序《用户协议》中关于个人信息收集的条款，要求： 1. 明确列出收集的字段：手机号（用于订单联系）、收货地址（用于物流配送） 2. 明确说明不收集的字段：身份证号、银行卡号、生物特征信息 3. 说明存储期限：订单完成后180天自动删除 4. 输出纯文本，不要markdown格式

5.2 代码提审前的AI扫描：三道防火墙

别等审核被拒才改。我在每次提审前，用AI做三轮扫描：
第一轮：安全扫描
提示词：“检查以下代码片段，找出所有可能违反微信《小程序运营规范》第3.2条（用户隐私）的写法：[粘贴onLoad代码]”。AI会标出wx.getPhoneNumber()未加用户授权弹窗、wx.getUserInfo()未判断scope状态等。

第二轮：性能扫描
提示词：“分析以下setData调用，指出可能导致页面卡顿的风险：[粘贴setData代码]”。AI会发现“在onPullDownRefresh中一次性setData 2000条数据”，建议分页或虚拟列表。

第三轮：兼容性扫描
提示词：“检查以下Canvas绘图代码，指出在iOS 15和Android 12上可能失效的API：[粘贴context代码]”。AI会提醒context.setLineDash()在旧版基础库不支持，需降级为context.stroke()。

这三轮扫描，每次耗时不到2分钟，但能避开80%的初审驳回。记住：AI不是裁判，是你的协审员。它指出问题，你来决策是否接受——比如AI说“wx.showModal缺少cancelText”，你可以选择加，也可以选择删掉整个modal，改用Toast提示。

5.3 上线后的AI运维：让小程序自己“说话”

上线不是终点。用户反馈“点收藏按钮没反应”，你不可能每晚守着日志。我的做法是：

• 在utils/request.js的request函数中，加全局错误上报：

if(err.errMsg.includes('request:fail')) { wx.reportAnalytics('api_error', { url: url, method: method, errMsg: err.errMsg }) }

• 用AI生成日报摘要：每天凌晨，把wx.getAnalyticsData()拉取的错误日志喂给AI，提示词：“总结昨日API错误TOP3，按错误率排序，指出涉及页面和可能原因”。AI会输出：“1./pages/book/detail页面/api/books/{id}404错误率62%，可能原因：后端书籍ID删除后未同步下架小程序缓存；2. ...”。

这才是“AI开发小程序”的终局形态：AI不替你写代码，而是帮你把代码变成会自我诊断、自我报告、自我优化的活系统。你作为开发者，精力聚焦在两件事上：第一，定义业务规则（比如“二手书必须标注成色”）；第二，解读AI的诊断报告，做关键决策（比如“下架所有成色为‘破损’的书籍”）。其他所有体力活，交给AI和自动化流水线。

我个人在实际操作中的体会是：所谓“保姆级”，不是手把手喂饭，而是教会你识别哪些饭有毒、哪些饭营养足、哪些饭得趁热吃。小程序开发这件事，从来就不是比谁代码写得快，而是比谁对微信生态的理解更深、对用户场景的把握更准、对线上问题的响应更快。AI只是把“写for循环”的时间，还给了你思考“用户为什么需要这个功能”的空间。