贾栾：两天用Coze搭建产品级APP框架并发布到微信小程序

贾栾：两天用Coze搭建产品级APP框架并发布到微信小程序 贾栾：两天用Coze搭建产品级APP框架并发布到微信小程序 Modified June 12, 2025 Audio or video is not supported Please download the file and open it with the appropriate software. c982f311b03c0a03984cfeebb20c9627.mp4 · 1.55MB c982f311b03c0a03984cfeebb20c9627 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 8a6854b7430cc74da6df32576f7c8a3e.mp4 · 8.05MB 8a6854b7430cc74da6df32576f7c8a3e 00:00 毕竟不是一家子，还没有打通 2、不支持视频预览、不支持跳转外部链接。 跳转时会提示如下，继续访问也无效。其实时可以播放的，但是被小程序给拦截了。 3、不支持二维码识别。 以上是初步发现的问题，2、3很头大，需要考虑下有没有合适的方案。 参考了下其他小程序“花店运营”，发现其中有个图片可以放大并可以长按识别。正好之前加过好友，赶紧问问怎么做的。 操作如下，可以点击全屏查看，并支持长按。 赶紧修改，重新提交审核。 此时收到了类目审核通过通知。 看了描述，心凉了。这不是还得再审核7天。坎坷中继续等待。 6.1.3 第三次审核结果： 等了预计半个多小时才有结果，审核失败。（还以为需要7天） 处理：增加了点击跳转事件。提交审核。 6.1.4 第四次审核结果 好吧，能够理解，不支持其他支付。 那我就先把这个功能隐藏掉。 （藏了个小心思，默认隐藏“充值”按钮，点击“复制”时，显示“充值”按钮。看看是否可以蒙混过去） 提交审核。 ⚽ 吐槽：你就不能一次性把所有问题都提出来，非要发现一个就拒绝。 6.1.5 第五次审核结果 心凉了 看来是蒙混过关，微信平台审核通过了，于是自动触发了 网信部门的审核。看来真要等待7天了。。。 以上，初版小程序发布了，可以先一放了，继续做功能 睡觉 以上就是两天搭建APP框架的全过程，后续完成后还会继续投稿，感兴趣的可以关注 ⛱️ 个人简介 贾栾 一个喜欢跑马的AI研究者 | 专注于AIGC应用落地。 全马PB333，半马128 10年+研发管理经验、7年+创业，传统软件公司转型中，目前All in AI。 致力于打造让每个人都能用的AI应用工具。 Audio or video is not supported Please download the file and open it with the appropriate software. c982f311b03c0a03984cfeebb20c9627.mp4 · 1.55MB c982f311b03c0a03984cfeebb20c9627 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 8a6854b7430cc74da6df32576f7c8a3e.mp4 · 8.05MB 8a6854b7430cc74da6df32576f7c8a3e 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. c982f311b03c0a03984cfeebb20c9627.mp4 · 1.55MB c982f311b03c0a03984cfeebb20c9627 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. c982f311b03c0a03984cfeebb20c9627.mp4 · 1.55MB c982f311b03c0a03984cfeebb20c9627 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. c982f311b03c0a03984cfeebb20c9627.mp4 · 1.55MB c982f311b03c0a03984cfeebb20c9627 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 8a6854b7430cc74da6df32576f7c8a3e.mp4 · 8.05MB 8a6854b7430cc74da6df32576f7c8a3e 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 8a6854b7430cc74da6df32576f7c8a3e.mp4 · 8.05MB 8a6854b7430cc74da6df32576f7c8a3e 00:00 Audio or video is not supported Please download the file and open it with the appropriate software. 8a6854b7430cc74da6df32576f7c8a3e.mp4 · 8.05MB 8a6854b7430cc74da6df32576f7c8a3e 00:00 毕竟不是一家子，还没有打通 2、不支持视频预览、不支持跳转外部链接。 跳转时会提示如下，继续访问也无效。其实时可以播放的，但是被小程序给拦截了。 3、不支持二维码识别。 以上是初步发现的问题，2、3很头大，需要考虑下有没有合适的方案。 参考了下其他小程序“花店运营”，发现其中有个图片可以放大并可以长按识别。正好之前加过好友，赶紧问问怎么做的。 操作如下，可以点击全屏查看，并支持长按。 赶紧修改，重新提交审核。 此时收到了类目审核通过通知。 看了描述，心凉了。这不是还得再审核7天。坎坷中继续等待。 6.1.3 第三次审核结果： 等了预计半个多小时才有结果，审核失败。（还以为需要7天） 处理：增加了点击跳转事件。提交审核。 6.1.4 第四次审核结果 好吧，能够理解，不支持其他支付。 那我就先把这个功能隐藏掉。 （藏了个小心思，默认隐藏“充值”按钮，点击“复制”时，显示“充值”按钮。看看是否可以蒙混过去） 提交审核。 ⚽ 吐槽：你就不能一次性把所有问题都提出来，非要发现一个就拒绝。 吐槽：你就不能一次性把所有问题都提出来，非要发现一个就拒绝。 6.1.5 第五次审核结果 心凉了 看来是蒙混过关，微信平台审核通过了，于是自动触发了 网信部门的审核。看来真要等待7天了。。。 以上，初版小程序发布了，可以先一放了，继续做功能 睡觉 以上就是两天搭建APP框架的全过程，后续完成后还会继续投稿，感兴趣的可以关注 ⛱️ 个人简介 贾栾 一个喜欢跑马的AI研究者 | 专注于AIGC应用落地。 全马PB333，半马128 10年+研发管理经验、7年+创业，传统软件公司转型中，目前All in AI。 致力于打造让每个人都能用的AI应用工具。 个人简介 贾栾 一个喜欢跑马的AI研究者 | 专注于AIGC应用落地。 全马PB333，半马128 10年+研发管理经验、7年+创业，传统软件公司转型中，目前All in AI。 致力于打造让每个人都能用的AI应用工具。 🐵 我用两天时间用Coze平台搭建了产品级APP的框架，页面效果还不错，并且发布到了微信小程序。 我用两天时间用Coze平台搭建了产品级APP的框架，页面效果还不错，并且发布到了微信小程序。 先看效果： Coze预览效果 微信小程序效果 感兴趣的继续往下看，我将全过程都记录了下来 目前还在迭代具体业务，后续还会投稿完整版 🏖️ 背景： 年初在做一键短视频的时候，就有想法要做成一个产品，后来去弄自媒体助手了，就搁置了。经过了一段时间coze应用搭建的实践，加上支付体系也已经完善，微信小程序马上备案通过，同时看到已经有类似产品出来了，并且流量不错。现在准备正式启动这个产品计划。 我会记录从零搭建的所有过程，包括一些视频录制，看情况也会做一些直播计划 于是就有了这场周期较长的慢直播 用AI从零搭建一个ToC产品 原则就是能动脑的不动手，让AI来执行 这两天做一下需求规划、UI设计，下周正式开搞 计划2周内上线第一版。 现在先将两天的成果交付下 有兴趣的同学可以关注下，如果你有自己的idea，一直没动手，不妨一起来行动。 欢迎帖子下留言、交流、鞭策 背景： 年初在做一键短视频的时候，就有想法要做成一个产品，后来去弄自媒体助手了，就搁置了。经过了一段时间coze应用搭建的实践，加上支付体系也已经完善，微信小程序马上备案通过，同时看到已经有类似产品出来了，并且流量不错。现在准备正式启动这个产品计划。 我会记录从零搭建的所有过程，包括一些视频录制，看情况也会做一些直播计划 于是就有了这场周期较长的慢直播 用AI从零搭建一个ToC产品 原则就是能动脑的不动手，让AI来执行 这两天做一下需求规划、UI设计，下周正式开搞 计划2周内上线第一版。 现在先将两天的成果交付下 有兴趣的同学可以关注下，如果你有自己的idea，一直没动手，不妨一起来行动。 欢迎帖子下留言、交流、鞭策 前置准备： 功能规划 Unable to load the board. Please refresh and try again.Copy ErrorRefresh Nothing on the board yet 页面设计 让AI设计产品UI 让AI设计产品UI 具体创作过程 上边的前置准备不在两天时间内哈，零零散散预计1 2天的项目设计时间。 接下来正式开始了搭建 Day1 1. 阿里云OSS转存插件制作 🦄 今天把上周五没调试通过的阿里云OSS调试通过，并封装成插件。 其实这个任务的优先级并不高，本应该优先做重要紧急的任务。但是上周没调试过，心里总会想，所以就搞了一下。 今天把上周五没调试通过的阿里云OSS调试通过，并封装成插件。 其实这个任务的优先级并不高，本应该优先做重要紧急的任务。但是上周没调试过，心里总会想，所以就搞了一下。 1、先通过Trae+deepseekV3编写代码 这里制作了两版，第一版是通过DS直接生成的，由于第一次运行报错，我就去找了官方文档，将demo例子拷了过来，做成了第二版。 过程中可能会有错误，然后就通过对话让trae进行修改。 直至调试通过。 （过程中会涉及参数的获取及配置，还是要好好阅读官方文档的说明） 2、coze中创建插件 先规定好入参及返回参数，如下： 然后将代码拷贝过来，注意格式。 说来也巧，开始我用第二版代码，结果发现需要的依赖包没有（coze平台的依赖包可能未及时更新），但是有第一版的依赖包。所以我最终又让trae帮我检查错误，调试通过，使用了第一版。 调试运行，如图一次性通过。 基本上在trae中调试通过，就说明功能可行，移植过来注意格式、参数，基本就没有问题。 然后点击发布，不需要上架插件商店，就可以自己使用了。后续可以根据需要，上架查件商店，供别人使用。 以上，第一个插件工具初步完成，目的是将未来生成的视频持久化保存。（实际使用过程中，根据新需求再迭代） 2. 创建Coze应用，搭建一级页面 2.1 创建空白应用 页面选择 小程序和H5.（用户级产品，后续需要发布到小程序） 2.2 先根据UI将页面框架简单搭下 1个半小时搭建了一级页面初版，搭建过程见视频。由于搭建的过程要考虑很多统一性，会来回调整。基本框架搭建完成后，后续页面就很快，基本就是粘贴复制。 提示：沉浸式搭建录屏，没有声音。仅供参考。 前三个页面（首页、模板、社区案例） 个人中心 以上，app一级页面框架搭建完成，后边就需要做核心工作流了。搭建页面的目的是为了有个APP的雏形，搭建过程中会考虑工作流如何对应，以及工作流完成后方便调试。 二级页面等工作流完成后，再搭建。 注意：不要投入太多精力调页面细节，因为后续会经常调整，根据工作流的实际情况等。 3. 工作流搭建 🎉 随便写写 工作流是整个智能体的核心，所有的业务逻辑都在工作流中完成。一个产品体验的好坏，UI占一部分，更多的是业务流程体验是否够好。 1、比如生成一个视频耗时较长，是否有过程提示，如果失败了是否有异常提示，方便用户修改。 2、工作流的命名规则，要方便维护。预计本应用的工作流会在20+，随着模板增多，工作流也不断增多。 3、一定要做到通用，尽可能同一类模板使用一个工作流。 4、一定要做到解耦，一个单独的功能要独立拆分成一个子动作流。 3和4没有冲突，3是为了让业务通用，4是为了让功能解耦。理想情况下就是，不同的业务，使用同一个工作流，只需要区分入参就好。然后每一个工作流的节点又不多，由一块一块的子功能工作流组合而成。 以上，随便写写，开始搞工作流了 耗时会很长 随便写写 工作流是整个智能体的核心，所有的业务逻辑都在工作流中完成。一个产品体验的好坏，UI占一部分，更多的是业务流程体验是否够好。 1、比如生成一个视频耗时较长，是否有过程提示，如果失败了是否有异常提示，方便用户修改。 2、工作流的命名规则，要方便维护。预计本应用的工作流会在20+，随着模板增多，工作流也不断增多。 3、一定要做到通用，尽可能同一类模板使用一个工作流。 4、一定要做到解耦，一个单独的功能要独立拆分成一个子动作流。 3和4没有冲突，3是为了让业务通用，4是为了让功能解耦。理想情况下就是，不同的业务，使用同一个工作流，只需要区分入参就好。然后每一个工作流的节点又不多，由一块一块的子功能工作流组合而成。 以上，随便写写，开始搞工作流了 耗时会很长 3.1 轮播图 以轮播图为例，功能简单，适合做个初始规范，后续的工作流复制即可。 思路： 首先：轮播图包含了图片和点击事件。应该使用数据库存储图片的URL，这样可以方便后续更换。点击事件直接跳转URL即可（暂定都是用外部URL（飞书文档））。 创建数据表app banner，用于存储轮播图记录。 手动添加几条数据 工作流如下： 参考 贾栾：扣子应用搭建拆解（详拆支付体系）及高阶实战技巧，统一输出规范。即使你认为不可能有异常，也要加上异常处理。因为但凡是机器、代码，就可能会出问题。 贾栾：扣子应用搭建拆解（详拆支付体系）及高阶实战技巧 命名规范：app get banner(应用级 获取方式 功能) 工作流运行成功，开始页面集成 注意： 这里有平台功能缺失，不支持所有轮播图区分跳转。先这样吧，都跳转第一个的链接 ，后续应该会完善的。 3.2 模板中心 数据表：模板类型、模板名称、模板编号、模板图片、热度、是否推荐、是否上架、模板示例视频ULR。 app 模板搜索（包含首页推荐模板、模板中心的分类筛选、关键词筛选） 3.3 作品展示 数据表：视频编号、视频URL、视频名称、作者名称、作者id、所属模板类型、所属模板名称、所属模板编号、是否推荐、是否上架、浏览次数。 首页、案例中心，都走这一个工作流。通过参数区分。 20250610090131 rec 20250610090131 rec 20250610090131 rec 20250610090131 rec 小技巧： 如何将数据表中的带时区的Time类型，去掉时区? 1：只显示年月日（YYYY MM DD） 2： 显示年月日 + 时分秒（YYYY MM DD HH:mm:ss） 遗留问题： 1、视频列表怎么显示封面？——暂定用模板封面。 2、所有轮播图只能跳转一个地址，如有需要，可以在金刚区增加链接跳转。 收工 Day2 1、模板中心页 分析： 1、需要单独工作流，获取分类列表。 2、根据第一个分类，通过工作流获取对应的模板。可以默认推荐是第一个，或者与首页推荐区分开，再增加一个字段。 3、搜索就根据app get template根据关键词模糊匹配搜索即可，不关联分类。 思考： 1、是否需要再建表，用于存储模板分类？——用模板表，尝试分组查询，试下 2、第一个分类默认“推荐模板”，跟首页用一个工作流。区别是 首页最多展示前5个，模板页展示全部。 实操： 3.3.1.1 单独建个工作流，查询模板分类。 用模板表，尝试分组查询。 这里只能用自定义SQL插件，通过自然语言让AI写SQL查询语句。 这样，就可以不单独建表存储模板分类了。 3.3.1.2 数据库中添加一些测试数据，方便调试。 下载模板，填写测试数据，批量导入。 同理添加视频作品表测试书籍 增加数据后，刷新页面效果。 发现个问题： ListHorizontal横向列表，在PC端扣子商店不支持鼠标横向列表滑动， 但是支持鼠标点击后，左右键盘滑动，又是个缺陷 前期就先只推荐3个，后边考虑是否更换成竖向的。。。 3.3.1.3 分类列表 思考： 工作流app get template typelist用于从模板表中查询所有的分类列表，然后通过点击每一个分类，查询该分类下的模板。 需要在最前增加”推荐“分类，用于默认显示书籍，展示所有的推荐模板。 需要在工作流中，通过代码节点手动追加。 增加后，刷新页面，如图所示。 3.3.1.4 默认加载推荐模板，点击”分类“加载其它类型模板 发现与首页的推荐模板数据有些冲突，需要修改工作流的入参，以匹配多种情况。 每种情况，测试一遍，通过 这样一个工作流，就能匹配所有的功能需求了，后续迭代调整也方便。 页面配置好工作流，按需配置参数，运行 页面提示查询失败，检查工作流运行日志，发现平台的坑 没有传参，这里识别成了“null”字符串。 这算是平台缺陷，需要处理一下。 不想加代码节点过滤，想了个变通方案： 入参时输入空格，工作流接收到的是空格，再通过选择器过滤空格。（有风险，哪天自己不注意会删了 ） 运行，功能基本正常。 缺失： 1、点击”推荐“，需要在工作流中手动增加判断，查询所有推荐模板。 2、页面功能交互、loadding框。 继续调整 20250610121838 rec 20250610121838 rec 遗留问题： TODO:按钮及控件的点击缩放功能，设置了未生效。后续再跟踪 4. 社区广场 分析： 这个页面相对逻辑简单，根据筛选条件查询即可。切换条件时，触发工作流调用，传入对应参数。 4.1.1.1 搭建工作流，根据入参获取视频列表。 20250610141048 rec 00:00 20250610141048 rec 00:00 20250610141048 rec 00:00 20250610141048 rec 00:00 4.1.1.2 追加个小功能：在列表底部增加“已经到底了 ” 思路： 在列表下边增加文本，默认不显示，直到加载完毕在显示。 提示： 必须要用表达式，不然效果不好。让我写我也不太会写，直接找记录，粘贴复制、替换。 参考文档： 贾栾：扣子应用搭建拆解（详拆支付体系）及高阶实战技巧 贾栾：扣子应用搭建拆解（详拆支付体系）及高阶实战技巧 ❤️ 上边3个判断都不能少，稍微解读一下： 组件显示逻辑：显示：false，隐藏：true。 目标：默认隐藏，加载完显示 1、就得{{!(False)}} 2、app get video list.loading——工作流执行中 app get video list != undefined &&app get video list.data !=undefined——工作流有结果，不管结果是否为空。（注意：必须先判断app get video list 是否为空，在判断里边的属性，否正会出现空的应用而导致无效。） 上边3个判断都不能少，稍微解读一下： 组件显示逻辑：显示：false，隐藏：true。 目标：默认隐藏，加载完显示 1、就得{{!(False)}} 2、app get video list.loading——工作流执行中 app get video list != undefined &&app get video list.data !=undefined——工作流有结果，不管结果是否为空。（注意：必须先判断app get video list 是否为空，在判断里边的属性，否正会出现空的应用而导致无效。） 配置好一个，其它页面粘贴复制即可，没必要都重新写 5. 个人中心 分析： 主要功能包含 1、个人信息获取——直接通过组件中的用户信息获取即可（用户名、头像）。 2、账户体系——账户激活、激活状态判断、账户消费充值、账户明细查询、在线充值。 3、营销体系——每日打卡、邀请好友、发布作品 等触发账户消费充值。 4、其它附加功能入口。 实操： 5.1.1.1 先将账户体系移植过来 理论上可以直接使用资源库中相关的工作流，但由于coze平台对外部的资源引用稳定性有问题，还是将相关资源复制进应用内。这也是资源尽量做共通的好处，提高可复用性。 参考文档： 贾栾：扣子应用搭建拆解（详拆支付体系）及高阶实战技巧 贾栾：扣子应用搭建拆解（详拆支付体系）及高阶实战技巧 🍞 突然收到短信： 【工业和信息化部】尊敬的用户贾栾，您的备案信息已被变更，详情请咨询您的接入服务提供商。【工信部ICP备案】 历时近一月，终于通过了。 突然收到短信： 【工业和信息化部】尊敬的用户贾栾，您的备案信息已被变更，详情请咨询您的接入服务提供商。【工信部ICP备案】 历时近一月，终于通过了。 集成好支付体系后，发布到小程序试试 继续： 开启系统变量，用于获取用户身份uuid。设置相关变量，用于应用内使用。 用户变量： 用户激活状态：用于存储用户激活状态，避免每次都查数据库。 用户账户余额：存储账户余额，仅作显示用。具体操作时，还是以数据库为准。 user key:用户uuid太长，对用户不友好，所以新建用户账户唯一key。 user name:工作流中无法直接获取用户昵称，所以需要变量存储。 工作流迁移后，要逐个检查修改，里边引用的资源都需要重新关联。一定要仔细。 5.1.1.2 开始页面配置 20250610181633 rec 00:00 20250610181633 rec 00:00 20250610181633 rec 00:00 20250610181633 rec 00:00 大部分都是迁移过来的功能，还有些细节待调整。 小技巧： 虽然组件的显示/隐藏通过表达式做的比较多了，但是遇到比较复杂的判断还是经常会调试好久。这个时候就把每个判断通过文本组件显示出来，看看过程中的判断值。 如图： 20250610182101 rec 00:00 20250610182101 rec 00:00 20250610182101 rec 00:00 20250610182101 rec 00:00 如果调试过程中发现有问题，就把每一块的代码如下，都显示出来。通过页面刷新就能看出变化。 下边代码是我最终控制“激活”按钮的表达式 总结：做多了自然就会有经验 这一次我应该是终于能弄明白了 以上，两天将APP框架搭了出来。基本上属于通用app框架，后边就是往里边添加具体的业务了。 接下来研究研究发布微信小程序 等待 6. 微信小程序： 晚上到家看到小程序审核结果出了，未通过，赶紧去看看 6.1.1 第一次审核结果： 登录微信小程序后台，查看通知，如下： 1、为什么没呢？ 因为微信小程序使用的数据库是线上环境，coze平台、coze商店都是用的测试环境。 赶紧将测试数据同步到生产环境后，重新提交审核。 2、为了保险起见，赶紧在小程序新增类目： 社交 社区/论坛。 同时将社区 字眼换掉。 （由于新增类目，为后边留下了坑，稍后再讲） 6.1.2 第二次审核结果： 挺快的，10来分钟就出结果了。 赶紧体验下 No access 8a6854b7430cc74da6df32576f7c8a3e 00:00 No access 8a6854b7430cc74da6df32576f7c8a3e 00:00 No access 8a6854b7430cc74da6df32576f7c8a3e 00:00 No access 8a6854b7430cc74da6df32576f7c8a3e 00:00 整体UI效果基本一致，初次体验效果不错。 发现一些不兼容项： 1、无法获取用户信息（昵称和头像）。