小程序模板

在线设计排版 下载模板包(zip)

小程序不是另一套后台:它直接读本站内容。你在编辑器里改的区块、在文章里写的内容,小程序下拉刷新就能看到。
想自定义小程序的排版?用在线设计排版调整区块顺序、显隐与页签文案,保存后下载的模板包会自动结合站点参数与设计稿。
模板已包含首页、产品、资讯、文章详情、关于、联系留资六个页面,以及 27 个组件的移动端渲染。

① 下载模板包

包里已写好你的域名(),不需要手改地址。

② 导入开发者工具

微信开发者工具 → 导入项目 → 选解压后的目录 → 填自己的 AppID。

③ 配域名白名单

小程序后台 → 开发管理 → 服务器域名 → request 合法域名,加上本站域名(必须 HTTPS)。

接入步骤(照着做 5 分钟)

1
点右上角「下载模板包」,解压到本地(目录名 xiaoyao-miniapp)。
包里 utils/config.js 的 baseUrl 已自动填成当前站点域名。
2
微信开发者工具 → 导入项目 → 目录选解压后的文件夹 → 填入你的小程序 AppID(没有就选「测试号」先跑通)。
项目已把 urlCheck 设为 false,本地预览不会因为域名白名单报错;正式发布前记得在后台配好白名单。
3
小程序后台 → 开发管理 → 开发设置 → 服务器域名 → request 合法域名:填 。
同时把「业务域名」留空即可(本项目不使用 web-view)。
4
后台内容准备:首页用编辑器搭好(首屏、三宫格、产品、文章都会自动上小程序);产品页对应的页面路径是 /products,关于页是 /about。
没有这两个页面时,小程序会显示引导文案,不会白屏。
5
上传体验版 → 真机预览 → 提交审核。审核前建议先「发布」一次站点,让接口返回最新内容。

两套主题

同一套结构,只换 CSS 变量。默认跟随站点模板:用了「科技深色」就自动切深色,也可以在 app.js 里改 globalData.theme。

商务蓝 business
#1a73e8 / 白底
深色 dark
#22d3ee / 深底

接口(小程序读的就是这几个)

接口说明
GET /api/miniapp/site站点名称、Logo、联系方式、导航、主题色
GET /api/miniapp/blocks?path=/把页面 Schema 拍平成区块数组(图片自动转绝对地址)
GET /api/miniapp/articles?page=1&cat=&q=已发布文章列表(分页 / 分类 / 关键词)
GET /api/miniapp/article?slug=xxx文章详情(正文转 rich-text HTML)+ 上下篇
POST /api/leads小程序表单留资(写入本站线索库)

包里有什么

加载中…
注意:小程序接口是公开只读的(只返回已发布内容与站点公开信息),不暴露后台任何数据。若你希望关闭小程序能力,在 nginx 上禁掉 /api/miniapp/ 即可。