Vue项目-开启 “ 微信分享踩坑” 之旅

,​,重要说明：分享接口：,请注意，不要有诱导分享等违规行为，对于诱导分享行为将永久回收公众号接口权限，详细规则请查看：朋友圈管理常见问题。

请注意，原有的 wx.onMenuShareTimeline（分享到朋友圈）、wx.onMenuShareAppMessage（分享给朋友）、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData（分享到朋友）、wx.updateTimelineShareData（分享到朋友圈）接口。,微信官网文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html。,接口状态为已获得，表示有权限。如下图  （重要）。,​,（1）分享的服务器外网ip地址，需要添加到白名单中，如下图：,,（2）绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。,,正常流程 按照 官方文档的步骤。,先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。,备注：登录后可在“开发者中心”查看对应的接口权限。,在需要调用 JS 接口的页面引入如下 JS 文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。,备注：支持使用 AMD/CMD 标准模块加载方法加载。,所有需要使用 JS-SDK 的页面必须先注入配置信息，否则将无法调用（同一个 url 仅需调用一次，对于变化 url 的SPA的web app可在每次 url 变化时进行调用,目前 Android 微信客户端不支持 pushState 的H5新特性，所以使用 pushState 来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。,项目场景：一个h5界面要求点击右上角三个点后点击微信好友分享带标题和图片给好友。vue项目中，分享携带头部标题、简介和缩略图等信息。,分享的时候要去判断是否是微信浏览器打开，如果不是要提示不能分享。,重要说明：注意h5分享是使用微信浏览器右上角的三个点进行分享的，在点击右上角之前要先注入config/ready,官网已说明。自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）*需在用户可能点击分享按钮前就先调用。,扩展知识点：,解决方案：H5不能调起微信分享，H5 需要引导用户点击右上角进行分享。,解决方案：设置JS接口安全域后，通过关注该测试号，开发者即可在该域名下调用微信开放的JS接口，请阅读微信JSSDK开发文档。,情况有很多种，主要如下：,（1）Java后台前面的url与分享的url不一致，需要完全一致。例如后台是http，分享地址是https。 ,（2）参数不对。,这错误有2种情况，1是参数不对；2是公众号中分享接口的状态为未获得。,分析原因：因为在初始化的时候是进来的时候是短链接，是通过script在开头引入的，所以微信sdk已经监控到了，但是我们 wxsdk 配置里面的 link 是我们要分享的长链接，微信会认为这是无效配置，所以微信分享不生效。,分享时提示错误“{"errMsg":"config:invalid signature"}”一般出现这个错误多半是签名获取失败，而造成签名获取失败的原因各种各种，子钦在开发的时候也遇到过这种情况，搜索了不少网上教程，解决了自己的问题。invalid signature签名错误。建议按如下顺序检查：,相关技术点：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html。,查找：附录5-常见错误及解决方法。