用AI把网页一键转微信小程序：3步搞定企业官网轻量版
很多中小企业老板问：“我网站都做好了，为什么还要单独做小程序？”答案很实在：小程序=微信内直达入口+消息推送权限+更高转化率。今天教你，不重写、不外包、不学框架，把现有官网秒变小程序！
适用对象：已有静态官网（哪怕只有 index.html）的店主、设计师、创业者。
---
🔍 第一步：准备你的网页（30秒）
确保你有官网的源码（哪怕只是网页另存为的 .html + .css + 图片文件夹）。如果没有？用浏览器打开官网 → F12 → 右键 <html> → 「Copy」→ 「Copy outerHTML」，粘贴到本地 original-site.html。
> ✅ 示例站点：https://example-dimsum.com（一家云吞面馆）
---
🤖 第二步：用Claude Code完成「HTML→WXML」智能转换
convert-prompt.md，输入：你是一个精通微信小程序架构的前端工程师。请将以下 HTML 片段（来自企业官网首页）转换为标准小程序 WXML + WXSS + JS 结构，要求：
- 保留原有导航栏（nav）、轮播 banner、服务介绍（section）、联系表单（form）结构
- 表单字段：姓名、电话、留言 → 转为小程序 input 组件，提交按钮触发 wx.showToast
- 所有图片路径改为相对路径（如 ./images/banner.jpg），并注明需在小程序根目录建 images 文件夹
- WXSS 使用 rpx 单位适配手机，关键样式（字体、间距、颜色）严格还原原CSS
- 输出：完整的 pages/index/index.wxml / .wxss / .js 三文件内容，每段代码前标注文件名
pages/index/index.wxml 等文件并保存💡 技巧：如果AI生成的WXML结构复杂，可先让AI「提取HTML中的导航链接和标题，生成小程序 tabBar 配置」，再补全其他页面。
---
🧩 第三步：组装成可运行小程序（2分钟）
-
app.json：至少含 { "pages": ["pages/index/index"], "window": { "navigationBarTitleText": "云吞面馆" } }-
project.config.json：按微信要求填写 basic 字段（AI可帮你生成）-
app.js：留空或写 App({})images 文件夹，把原网站所有图片放进去（重命名保持一致）⚠️ 常见修复：
index.js 中 formSubmit(e) 函数是否已定义（AI通常已写好）index.wxss 中全局加 body { font-size: 14px; }---
🚀 进阶：添加「一键拨号」和「地图导航」
让客户立刻能打电话、能找店！在 index.wxml 的联系电话区域旁，加：
<button bindtap="makeCall" class="btn-call">📞 拨打订餐</button>
<button bindtap="openMap" class="btn-map">📍 导航到店</button>
然后在 index.js 的 methods 区域，选中已有代码 → 「Ask AI」→ 输入：
新增两个函数：makeCall() 调用 wx.makePhoneCall({ phoneNumber: '13800138000' })；openMap() 调用 wx.openLocation({ latitude: 23.123, longitude: 113.456, name: '云吞面馆', address: '天河路123号' })。注意处理API调用失败的 wx.showToast 提示。
复制AI返回代码，粘贴进 index.js，立刻生效！
---
💡 为什么这招适合接单？
> 📌 真实案例：广州学员@阿哲用本方法，为5家餐饮店制作小程序，客单价300–600元，月均增收4200元。
你不需要成为全栈工程师——你只需要成为「会提问的AI指挥官」。
下期预告：《用AI把小程序反向生成H5网页，一套代码双端发布》