微信h5页面分享之多个页面一个公众号

Posted 2023-04-13

参考技术A

我想先放个图，因为这句话让我陷入了深深的沉思……

我只想说刚刚开始读还读的通，再读几遍就有点迷茫了。。

基本步骤在官方文档中，还算是人能读通的，我就直接复制过来了

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“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中修复）。

那么问题来了，我们再看文章刚开始我放的那个图，如果是同一个公众号，也就是只有一个appid和密钥的话，这里生成的一些参数还可以配置成功吗？
那个图中文档上说如果url变化的话需要在每次变化的时候调用。什么叫每次变化的时候调用，我不同直播h5页面路径本来就是不同啊。网上说的是在前端vue的路由中进行配置注入。

vue我不太懂，如果是不同项目下的呢？那我就用个蠢蠢的方法，直接在前端调用接口，这个接口，我在后端复制完全一样的来，命名为2，3，4....，这样是不是也可以说在url变化的时候调用？我调用不同接口。。。靠，一开始我也不知道能不能行，神奇的是居然还真可以。。
我之前还试了一下不同access_token调用ticket，由于这两个参数都有有效期，结果获取到的ticket居然一样，然后配置失败。
接着我重新获取一个ticket，配置还是失败。
所以我就直接复制不同的接口，前端不同项目调用不同接口就行了。

微信二次分享

这几天做一个微信公众号的需求，有个分享功能。发现分享从公众号分享到微信是正常的，可以看到缩略图、名称、描述，但是直接转发该分享或者点开该分享再次通过微信分享时，就只出现了链接地址，也没有缩略图。如下图所示：

原因：当用户通过分享链接点开页面并分享该页面，由于该页面并未通过config接口注入权限验证配置和分享信息配置（缩略图、名称、描述），所以会出现这种情况。

解决方案：在分享的目标页面通过config接口注入权限验证配置和调用微信分享接口配置分享信息（缩略图、名称、描述）即可。

微信JS-SDK说明文档

 

分享功能如下：
在页面引入js文件：

<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js" charset="utf-8" async="async"></script>

　　

function getWeChatAuthorizationAndShare(){ //也可以用立即执行函数
     $.ajax({
         url: \'/api/getJsAPI\',//获取签名的接口
         data: {url: location.href},
         type: \'post\',
         success: function (json) {
             if (wx) {
                 wx.config({
	                 debug:false,
                     appId: json.appid,// 必填，公众号的唯一标识
                     timestamp: json.timestamp,// 必填，生成签名的时间戳
                     nonceStr: json.nonce,// 必填，生成签名的随机串
                     signature: json.signature,// 必填，签名，见附录1
                     jsApiList: [
                         \'onMenuShareAppMessage\', //1.0 分享到朋友
                         \'onMenuShareTimeline\', //1.0分享到朋友圈
                         \'updateAppMessageShareData\', //1.4 分享到朋友
                         \'updateTimelineShareData\', //1.4分享到朋友圈
                     ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                 });
                 wx.ready(function () {
                     var imgUrl = $(\'.card-item\').find(\'.card-img\')[0].src,//缩略图
                         link = \'/card/toCardSharePage?cid=\' + id + \'&giveUid=\' + giveUid;//分享页面链接
                     var shareData = {
                         title: \'某某用户专享优惠卡券赠予\',
                         desc: \'好的东西我都想与你一起分享~\',//这里请特别注意是要去除html
                         link: link,
                         imgUrl: imgUrl
                     };
                     if(wx.onMenuShareAppMessage){ //微信文档中提到这两个接口即将弃用，故判断
                         wx.onMenuShareAppMessage(shareData);//1.0 分享到朋友
                         wx.onMenuShareTimeline(shareData);//1.0分享到朋友圈
                     }else{
                         wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
                         wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
                     }
                     
                 });
             }
             
         }
         
     });
 }

　　

注意：

1、原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口

2、获取签名的接口一定得加到公众号的ip白名单里 要不然会出现签名验证错误（这个官方文档没有写，太坑了）

3、基础的就是 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名