云开发 1 小时上线公司官网小程序：展示、留电、一键导航

摘要： 用云开发 CloudBase 做公司官网小程序，核心是三块：内容展示、留资表单、地图导航。素材齐全的情况下，用 AI 工具生成加上手动核对权限，一小时能做出可用版本。 开通环境开始做官网小程序：云开发 CloudBase

先把话说直白：一小时能做完的前提是素材已经齐了——公司简介文案、产品图、地址、电话、AppID 都在手边。如果还在等文案和设计，那一小时只够搭个框架。官网小程序和普通 H5 的本质差别在于留资数据落在你自己的云数据库里，能导出能跟进，这才是做小程序而不是做个页面的理由。下面给完整操作流程，包含可直接复制的提示词、权限配置和验收清单。

一、动手前先把素材备齐

这一步花 15 分钟，能省后面两小时反复改。按清单准备：

地址这一项特别提醒：填写时用能被地图搜到的标准地址，自己简写的「XX 大厦 8 层」可能定位不到，先在地图应用里搜一遍确认。

二、三块功能的职责划分

展示模块：首页、服务页、关于我们。内容可以写死在页面里，也可以存云数据库。判断标准很简单——如果内容需要非技术同事自己改，就存数据库（改完即生效，不用重新发版）；如果内容基本不动，写死在页面里更省事。

留资模块：联系我们页的表单，访客填姓名、电话、需求，提交后写入云数据库 leads 集合。这是整个小程序唯一真正需要后端的地方，也是最容易配错权限的地方。

导航模块：地址点击唤起微信地图导航（wx.openLocation），电话点击唤起拨号（wx.makePhoneCall）。这两个是小程序原生能力，不需要任何后端支持。

三、建集合与配权限（先做这步）

先建好数据结构再让 AI 生成代码，顺序反了容易返工。在云开发控制台数据库里建两个集合。

services（服务项，可选）

权限：所有用户可读，仅创建者可写。所有访客要能看到服务列表，但不能修改。

leads（留资记录，必建）

权限配置这里要想清楚，有两种方案：

方案一（推荐）：仅创建者可读写。 访客只能看到自己提交的记录，管理员在云开发控制台数据库里查看全部留资。这个方案最安全，访客之间互相看不到联系方式。

方案二：所有用户可写、仅管理员可读。 需要通过安全规则配置，适合有专门后台页面的情况。

不要用「所有用户可读写」。留资里有手机号，开放读权限等于把客户名单公开。这是官网小程序最严重的一个配置错误。

四、给 AI 的完整提示词

在接好云开发的 AI 工具里（WorkBuddy、CodeBuddy、Cursor 均可），把下面这段整体发出去。注意这段提示词已经把技术约束和权限要求写进去了，减少来回修正：

用云开发做一个公司官网微信小程序。

页面结构（底部 tabBar 四个入口）：
1. 首页：顶部 Logo 与公司一句话介绍，下方轮播图，再下方「主营业务」卡片列表（数据来自云数据库 services 集合，按 order 字段排序），底部「立即咨询」按钮跳转联系页
2. 服务详情页：点击业务卡片进入，展示服务名称、详细介绍、配图
3. 关于我们：公司简介、发展历程、团队介绍，纯静态内容
4. 联系我们：
   - 留资表单：姓名（必填）、电话（必填，做格式校验）、需求描述（选填），提交后写入云数据库 leads 集合，成功后弹提示并清空表单
   - 公司地址：点击调用 wx.openLocation 唤起地图导航
   - 联系电话：点击调用 wx.makePhoneCall 唤起拨号
   - 工作时间：静态展示

实现要求：
- 原生小程序 + 云开发，不引第三方 UI 库
- 风格简洁商务，浅色背景、卡片圆角、留白充足，主色用深蓝
- 图片统一用 wx.cloud.uploadFile 上传到云存储，数据库只存 cloud:// 开头的 fileID
- 留资提交走云函数写入，云函数里用 cloud.getWXContext().OPENID 记录访客标识
- 表单提交做防重复点击，提交中按钮置为 loading
- 集合权限：services 为「所有用户可读、仅创建者可写」；leads 为「仅创建者可读写」
- 生成完成后用微信开发者工具打开项目，并列出需要我手动完成的步骤

发完等它执行。它会建页面目录、写云函数、建集合、设权限，遇到必须你确认的操作（比如创建云资源）会停下来问。

五、AI 生成后必须自己核对的四处

AI 生成的代码能跑，但有四个地方习惯性出错，逐个核对：

第一处：图片路径。 打开数据库看 services 集合里 icon 字段的值，必须是 cloud:// 开头的 fileID。如果是 wxfile:// 或 http://tmp/ 这类本地临时路径，图片在真机上一定显示不出来。

第二处：leads 集合权限。 到控制台数据库 - 权限设置里确认，不能是「所有用户可读写」。

第三处：表单校验。 电话字段要做格式校验，不然收到一堆无效号码。最简单的校验是长度 11 位且纯数字。

第四处：提交防重复。 点一次提交按钮应该只产生一条记录。测试方法是快速连点三次，去数据库看是不是只有一条。

六、验收：五条标准逐条过

用微信开发者工具打开项目，按这五条验收，全过才算做完：

一、四个页面都能正常打开，底部 tabBar 切换无白屏、无样式错乱。

二、首页服务列表有数据。如果列表空白，先去数据库看 services 集合里有没有记录——AI 建了集合但没插测试数据是常见情况，手动加两条即可。

三、留资能提交到数据库。填一条测试数据提交，立刻去云开发控制台数据库 leads 集合里确认这条记录在，并且 openid、createTime 字段有值。

四、地图和电话能唤起。点地址应该弹出地图导航界面，点电话应该弹出拨号确认。模拟器上可能唤起不了，用真机预览测。

五、真机预览通过。用手机扫码预览，重点看图片是否都显示、表单在小屏上是否变形、按钮是否好点。模拟器和真机的差异主要在图片和布局上。

七、常见卡点与解法

编译报「云开发未初始化」：AppID 没填，或云开发环境没和小程序绑定。去「详情 - 基本信息」填真实 AppID，再到云开发控制台确认环境绑定关系。

服务列表一直是空的：两种可能，一是集合里确实没数据（手动加测试数据），二是读权限被挡（检查 services 是否设成了「仅创建者可读写」）。先加数据，再查权限，顺序别反。

图片显示不出来：数据库里存了本地临时路径而不是 fileID。重新上传并确认存的是 cloud:// 开头的值。

自己能看到留资、换个账号看不到：这是正常的，leads 设成「仅创建者可读写」时就是这个效果。管理员要看全部留资，去云开发控制台数据库里看。

提交后没反应：打开开发者工具的调试器看控制台报错，大概率是云函数没部署或权限被拒。把报错原文丢给 AI 让它排查，比自己猜快。

八、从能跑到能上线，还差这几步

本地预览通过不等于上线，剩下这几步是必须走的流程：

小程序注册与认证：在微信公众平台完成小程序注册、主体认证，拿到正式 AppID。企业主体需要营业执照等资料，认证有工作日周期，提前办。

补齐小程序必备信息：小程序名称、头像、简介、服务类目。官网类小程序通常选企业展示相关类目，具体以平台类目规则为准。

提审与发布：上传代码后在公众平台提交审核。被驳回时按驳回说明逐条改——官网类小程序常见驳回原因是类目与实际内容不符、资质缺失、页面有未完成功能。

上线后的内容维护：如果服务项存在数据库里，非技术同事可以直接在云开发控制台改，改完小程序端立即生效，不需要重新发版。这是前面建议把内容存数据库的实际价值。

区分可运行与可商用：AI 生成的是能跑起来的版本。正式对外还要核对内容合规（不能有夸大宣传用语）、隐私政策（收集手机号需要在小程序内声明）、以及留资数据的合规使用。

总结

公司官网小程序的技术含量不高，难点在流程和细节：素材先备齐、集合权限先配对、AI 生成后核对图片路径与防重复提交、真机预览验证、最后补齐认证与提审。核心价值是留资数据落在自己的云数据库里，可导出可跟进，非技术同事还能自己改内容。一小时做出可用版本是现实的，前提是你把第一节的素材清单真的准备好了。

开通环境，把公司官网搬进小程序：云开发 CloudBase 购买页