小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
要在 微信小程序 中开通 微信分享功能,需要完成以下步骤:
1. 基础要求
✅ 小程序已通过微信认证(非个人主体)
✅ 已绑定微信开放平台账号(同一主体)
✅ 小程序已发布或处于体验版/开发版(部分功能需审核)
2. 配置步骤
(1)绑定微信开放平台(如需跨应用分享)
- 登录 微信开放平台
- 进入 管理中心 → 小程序 → 绑定小程序(需管理员扫码确认)
- 绑定后,可实现 跨小程序、公众号、H5 的分享互通。
(2)在小程序代码中配置分享功能
微信小程序的分享功能主要依赖 onShareAppMessage
(分享给好友)和 onShareTimeline
(分享到朋友圈)。
① 页面分享(好友/群聊)
在页面的 .js
文件中添加:
Page({ onShareAppMessage() { return { title: '分享标题', // 必填 path: '/pages/index/index', // 默认当前页面路径 imageUrl: 'https://example.com/share.jpg', // 分享缩略图(可选) success(res) { console.log('分享成功', res); }, fail(err) { console.error('分享失败', err); } }; } });
② 分享到朋友圈(需小程序支持)
在页面的 .js
文件中添加:
Page({ onShareTimeline() { return { title: '分享到朋友圈的标题', query: 'from=timeline', // 自定义参数(可选) imageUrl: 'https://example.com/share.jpg' // 朋友圈缩略图 }; } });
注意:
- 朋友圈分享 仅限部分类目小程序(如工具、电商、内容类)。
- 需在
app.json
中声明"shareTimeline": true
(基础库 2.11.3+)。
(3)检查 app.json
配置
确保 app.json
中已开启分享权限:
{ "window": { "navigationBarTitleText": "小程序", "enableShareAppMessage": true, // 启用好友分享 "enableShareTimeline": true // 启用朋友圈分享(如需) } }
(4)真机测试
- 开发者工具可能不显示分享按钮,必须在 真机(iOS/Android) 上测试。
- 分享菜单入口:
- 好友/群聊:点击右上角
···
→ “转发”。 - 朋友圈:点击右上角
···
→ “分享到朋友圈”(仅限安卓)。
3. 常见问题排查
❌ 问题1:分享按钮不显示
- 可能原因:
- 未在
onShareAppMessage
中返回有效配置。 - 页面未正确引入
Page
或Component
。 - 小程序未发布或未过审(部分功能受限)。
❌ 问题2:分享成功但参数不生效
- 检查
path
和query
:
path
必须是 小程序页面路径(如/pages/index/index
)。query
参数需在onLoad
中解析:
onLoad(query) { console.log('分享携带的参数', query.from); // 如 from=timeline }
❌ 问题3:朋友圈分享不可用
- 可能原因:
- 小程序类目不支持(如金融、社交类可能受限)。
- 基础库版本过低(需 2.11.3+)。
- 未在
app.json
中声明"enableShareTimeline": true
。
4. 高级功能(自定义分享卡片)
如需 自定义分享卡片样式,可使用 「小程序云开发」+「动态参数」:
- 后端生成 动态分享图(通过云函数)。
- 前端通过
onShareAppMessage
返回云文件 ID:
imageUrl: 'cloud://xxx.jpg' // 云存储图片
总结
步骤 |
操作 |
1. 基础要求 |
小程序认证 + 绑定开放平台 |
2. 配置分享 |
在页面添加 和 |
3. 检查配置 |
中启用分享权限 |
4. 真机测试 |
确保分享菜单正常显示 |
5. 问题排查 |
检查参数、类目、基础库版本 |
如果 复制链接 和 分享功能 在你的微信小程序中 都没有显示或不可用,可能是由于 配置错误、权限问题或代码逻辑问题 导致的。以下是详细的排查和解决方法:
1. 检查基础配置
(1) 确保小程序已绑定开放平台
- 登录 [微信开放平台],进入 “管理中心” → “小程序”,确认你的小程序已正确绑定。
- 绑定要求:
- 小程序和开放平台必须 同一主体(企业或个体工商户)。
- 绑定后可能需要 等待几分钟生效。
(2) 检查 jsApiList
是否正确
在 wx.config
中,必须声明需要使用的 JS-SDK 接口,例如:
wx.config({ debug: true, // 开启调试模式,查看报错 appId: '你的AppID', timestamp: 1234567890, // 动态生成 nonceStr: '随机字符串', // 动态生成 signature: '后端生成的签名', // 必须正确 jsApiList: [ 'updateAppMessageShareData', // 分享给朋友(新版) 'onMenuShareAppMessage', // 分享给朋友(旧版,兼容) 'updateTimelineShareData', // 分享到朋友圈(新版) 'onMenuShareTimeline', // 分享到朋友圈(旧版) 'onMenuShareWechat', // 微信内分享(旧版) 'onMenuShareQZone', // QQ空间(旧版) 'onMenuShareQQ', // QQ好友(旧版) 'onMenuShareAppMessage', // 小程序分享(旧版) ] });
⚠️ 注意:
- 如果
jsApiList
没有正确声明,分享菜单不会显示。 - 如果
signature
签名错误,wx.config
会失败(可在wx.error
回调中查看报错)。
2. 检查签名(Signature)是否正确
签名错误是 最常见的问题,会导致 wx.config
失败,从而无法调用分享功能。
(1) 签名生成流程
签名 (signature
) 必须由 后端动态生成,包含:
- 获取
jsapi_ticket
(通过开放平台access_token
获取)。 - 拼接以下参数:
jsapi_ticket=XXXXX&noncestr=随机字符串×tamp=时间戳&url=当前页面URL
- 进行
sha1
加密,生成signature
。
(2) 验证签名是否正确
- 使用微信官方 JS-SDK 签名校验工具:
- 检查
url
是否动态获取:
- 前端传给后端的
url
必须是 当前页面的完整URL(不含#
及后面部分)。 - 在单页应用(SPA)中,
url
必须是 首次进入页面的完整路径(不能是动态路由变化后的 URL)。
3. 检查域名白名单
- 登录 微信公众平台,进入 “开发” → “开发设置” → “服务器域名”。
- 确保以下域名已配置:
request 合法域名
(后端 API 域名)。uploadFile 合法域名
(如果分享涉及图片上传)。downloadFile 合法域名
(如果分享涉及文件下载)。
4. 检查代码逻辑
(1) 确保 wx.ready
成功执行
wx.ready(function() { // 必须在这里调用分享配置 wx.updateAppMessageShareData({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享图标', success: function() { console.log('分享配置成功'); }, fail: function(err) { console.error('分享配置失败:', err); } }); });
⚠️ 注意:
- 如果
wx.config
失败,wx.ready
不会执行,分享功能也不会显示。 - 可以在
wx.error
中捕获错误:
wx.error(function(res) { console.error('JS-SDK 配置失败:', res.errMsg); });
(2) 检查是否被微信安全策略拦截
- 如果分享的
link
或imgUrl
包含 敏感词、违规内容或非备案域名,微信可能会屏蔽分享功能。 - 尝试更换一个 简单的测试链接(如
https://www.baidu.com
)看是否能正常分享。
5. 真机调试
- 开发者工具可能不显示分享菜单,必须在 真机(iOS/Android) 上测试。
- 清除微信缓存(微信 → 我 → 设置 → 通用 → 存储空间 → 清理缓存)。
- 检查微信版本(旧版微信可能不支持某些 JS-SDK 功能)。
6. 其他可能原因
问题 |
解决方案 |
未执行 |
确保代码加载顺序正确,JS-SDK 必须在 前引入。 |
未动态获取 |
前端传给后端的 必须是 。 |
企业小程序未认证 |
企业小程序需完成 微信认证 才能使用 JS-SDK 高级接口。 |
iOS 限制 |
iOS 某些版本可能限制分享,尝试更新微信或更换设备测试。 |
总结
如果 复制链接和分享功能都不显示,请按以下步骤排查:
- 检查
jsApiList
是否声明了分享接口。 - 验证
signature
签名是否正确(使用微信官方工具)。 - 确保
wx.ready
成功执行,并在回调里配置分享。 - 检查域名白名单 是否配置正确。
- 真机测试,避免开发者工具限制。
如果仍有问题,可以提供:
wx.config
的debug: true
报错信息。wx.error
返回的具体错误。- 后端生成签名的代码逻辑(确保
jsapi_ticket
和url
正确)。
最近我们的企服联开发完就有这个问题
然后登陆开放平台
登陆开发平台账户账户 这里要单独注册并且缴费300
管理中心创建
要验证小程序密码
成功可以使用