微信H5分享朋友圈踩坑

2024-05-09 20:43:24

1、所需权限

需要公众号有分享权限，无权限无法分享成功，一般认证后就有权限，微信白名单需要配置地址，xxx.xxx.xxx（精确到二级域名）

2、后端接口

一般需要将线上url地址传递给后端，后端返回所需参数。后端一般问题不大，只需拿到 appId、timestamp、nonceStr、signature即可

3、wx.config API 配置

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: res.appId, // 必填，公众号的唯一标识timestamp: res.timestamp, // 必填，生成签名的时间戳nonceStr: res.nonceStr, // 必填，生成签名的随机串signature: res.signature,// 必填，签名jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'chooseImage'] // 必填，需要使用的JS接口列表
});

当只要出现 config: ok 时，即可认为配置成功

问题排查

1、url地址不对

可以先将 url 地址写死，xxx.xxx.xxx/xxx/ （www.baidu.com/share）一般为这种格式，可以尝试 encodeURIComponent 对地址进行编码，因为各个版本微信 js-sdk 不尽相同

2、公众号无权限

检查公众号配置，需要有分享权限

3、公众号未配置白名单

检查公众号白名单配置，需要将域名填入白名单中，只需精确到 xxx.xxx.xxx（www.baidu.com）

4、能够正常调起 chooseImage

能够正常在微信内置浏览器上调起 chooseImage API 时，证明 config 配置已经成功，只是一些需要权限的 API 没能够正常获取到权限

4、updateAppMessageShareData（分享给朋友）配置

此项与 updateTimelineShareData 几乎相同，其中配置信息如：title、desc、imgUrl等可随便填写，但是 link 需要与你传递给后端的 url 地址一致。当 debug 出现 errMsg: “updateAppMessageShareData:ok” 时代表你已经成功了。
注：此项只是暂时存在的问题，后续微信可能会优化此问题。
参考如下步骤

操作步骤

1、进入url地址，分享纯链接至文件传输助手

2、在文件传输助手中长按点击收藏

3、点击收藏的链接，右上角分享至文件传输助手

4、在文件传输助手中可以看到你所想要的卡片。

微信H5分享朋友圈踩坑相关推荐

微信js分享朋友圈（二）
微信js分享朋友圈(二) 近期又用到微信分享的功能了.虽然不是第一次用了,依然我又有幸踩到了一个坑,所以分享一下吧. 根据微信sdk写的代码一步步很顺利,但是后面就是获取微信返回的分享结果的回调的时候 ...
分享微信微信朋友圈踩坑
分享微信朋友圈没反应,也没什么报错信息,网上大家都知道的是thumbData不能超过32K,可是我已经压缩到32K了,还是调不起来.最后发现原来主图也有限制,太坑了. WXMediaMessage ( ...
java 微信 jssdk 分享朋友圈_JSSDK微信自定义分享朋友圈
背景:15年之前的微信分享只需要加入一段js就可以实现.后来微信官方全部禁止了.现在的微信分享全部得使用jssdk. 一.分享功能: 在微信内(必须在微信里)打开网站页面,分享给朋友或者分享到朋友圈时 ...
java 微信 jssdk 分享朋友圈_微信JS-sdk分享到朋友圈无效
代码如下: wx.ready(function(){ wx.onMenuShareTimeline({ title: 'wechat-php-sdk博客', desc: '微信公众平台php开发包,细 ...
微信H5支付申请开通-踩坑
我这里只是描述我踩的坑,写这个文章的原因是,审核时间太长了,着急使用H5支付的,耽误不起啊!减少踩坑第一次提交申请,域名及内容都按照正规填写,有一项填写地址栏这里我填写的一级域名首页地址. 提交上 ...
小程序分享朋友圈之填坑模式
上一个博客介绍了小程序分享朋友圈,但是如果你按照上面的方法去写,你还是会发现一些问题,怎么回事呢? 下面我来说一下小程序分享朋友圈的坑有哪些? 坑1:canvas画的图片地址.小程序码地址都必须&qu ...
Uniapp 分享朋友圈
h5分享朋友圈出现以上错误解决方法: 1.需要后台配置安全域名 2.分享的链接一定不能包含中文,需要用encodeURIComponent()转换一下 3.title,link,imgUrl 都需要 ...
不同平台使用不同技术实现微信好友、朋友圈分享汇总（H5、taro、uni-app）
人生路漫漫,坑,是活久了见.程序猿世界里各种奇葩的需求都有,随之而来的各种坑也是层出不穷. 应前IBM同事邀请特来做分享的专题总结.一般人我不告诉他,刷到的朋友们就赚到了,你懂的~~~~~~收藏吧! ...
微信h5分享好友和朋友圈功能
在开发公众号H5项目时,如果想和小程序一样有分享朋友圈和好友功能时发现会不一样. 开发微信小程序时做分享有会有onShareAppMessage 这个方法.因为H5有许多限制,所以在做微信H5分享时就 ...

最新文章

热门文章