公众号开发-群发图文中插入小程序卡片报错 invalid content hint 的解决

简介: 为方便小程序的运营和推广,微信公众号开发也支持通过接口在群发图文中插入小程序。和直接在MP后台编辑一样,有三种样式可供选择。

如果你也正在开发群发图文中插入小程序的功能,那么大概率也会遇到这问题。

之前通过微信第三方开放平台开发过一个可以管理多个公众号的系统,具体功能和效果可以参考 微信第三方开放平台代公众号实现业务

为方便小程序的运营和推广,微信公众号开发也支持通过接口在群发图文中插入小程序。和直接在MP后台编辑一样,有三种样式可供选择。

image.png

按照开发文档示例插入文字和图片跳转小程序都没问题,但是插入卡片小程序却是一直报错。

image.png

这个错误是说上传图文素材接口中的content字段的值是无效的,可能有非法字符,但是检查了很多遍,确保content参数的值很正常,但就是一直报错。去开发社区看帖子,很多人问这个问题,但是都没有给出解决办法。

image.png

后来又认真看了开发文档,发现 data-miniprogram-imageurl 参数说明写着图片必须为1080864像素。测试的时候都是随便上传一张图片的,发现了这个细节后正儿八经的上传了一张1080864像素的图片,竟然提交成功了。

image.png

事实证明,不一定是1080*864的像素,只要像素比保持为5:4就可以。所以同鞋,这也就解释了为啥把在MP后台上传的图片拿来通过接口再上传可以成功,而直接通过接口上传就会报错,因为MP后台上传过的图片像素比已经被裁剪成5:4了。

粗粗总结一句,文档看不细,开发两行泪。

山水有相逢,来日皆可期,谢谢阅读,我们再会

我手中的金箍棒,上能通天,下能探海

上一篇:微信第三方开放平台代公众号实现业务

相关文章
|
20天前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `<swiper>` 实现,二是利用 Nut UI 的 `<nut-swiper>` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
12天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
36 3
|
20天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
20天前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
20天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
本文介绍如何在Taro项目中使用Nut UI的`<nut-uploader/>`组件实现图片上传功能,并通过示例代码展示了自定义上传逻辑的方法。
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
|
20天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
|
20天前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
1天前
|
小程序 前端开发 JavaScript
Java开发工程师转小程序开发的前景如何?
Java开发工程师转小程序开发的前景如何?
7 0
|
23天前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
46 1
|
11天前
|
小程序 前端开发 JavaScript
开发支付宝小程序的思路
【9月更文挑战第7天】本文介绍了一种在支付宝小程序中实现网页抓取的方法,通过云函数或自建后端服务来解析外部网页的标题、描述和图片。具体步骤包括:用户输入链接,小程序调用云函数抓取并解析网页内容,最后将结果返回并在前端展示。文中详细介绍了使用 Node.js 的云函数实现过程,包括代码示例和小程序前端页面的实现方法。通过这种方式,可以显著提升链接分享的用户体验。
23 0