zoukankan      html  css  js  c++  java
  • 微信二次分享

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

    原因:当用户通过分享链接点开页面并分享该页面,由于该页面并未通过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.onMenuShareTimelinewx.onMenuShareAppMessagewx.onMenuShareQQwx.onMenuShareQZone 接口,即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareDatawx.updateTimelineShareData接口

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

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

  • 相关阅读:
    Actor
    spring mybatis circular reference
    MyBatis实现SaveOrUpdate
    Java SpringMVC实现国际化整合案例分析(i18n) 专题
    Spring Boot MyBatis 通用Mapper插件集成
    Spring Boot Servlet
    Android WebView 开发详解(二)
    Android与设计模式——观察者(Observer)模式
    Android系统设置— android.provider.Settings
    Android PNG渐变背景图片失真问题 getWindow().setFormat(PixelFormat.RGBA_8888);
  • 原文地址:https://www.cnblogs.com/gavinjay/p/12330553.html
Copyright © 2011-2022 走看看