微信公众号自定义分享链接踩坑记

XYLANCC

已于 2022-03-11 10:59:01 修改

阅读量2k

点赞数 1

分类专栏：微信文章标签：微信公众号自定义分享 java

于 2019-11-06 10:28:56 首次发布

本文链接：https://blog.csdn.net/weixin_45623983/article/details/102929751

版权

微信专栏收录该内容

2 篇文章 0 订阅

订阅专栏

申请微信公众测试号(个人微信公众号没权限,需要微信认证的企业号!!)

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

可选natapp

以下所有操作后台请求和页面都要在此安全域名下不能加http:// 有坑并关注测试号

`springboot配置:`

<dependency>
    <groupId>com.github.binarywang</groupId>
    <artifactId>wx-java-mp-spring-boot-starter</artifactId>
    <version>3.5.4.B</version>
</dependency>

wx:

mp:

app-id: XXXXXXXXXXX

secret: XXXXXXXXXXX

后端代码

@Autowired
private WxMpService wxMpService;

@GetMapping(value = "/test")
public String test() throws WxErrorException {
    WxJsapiSignature jsapiSignature = wxMpService.createJsapiSignature("http://evdb28.natappfree.cc/XXX/1.html");//当前html页面url,也是分享链接,与下面link保持一致,很坑
    return JSON.toJSONString(jsapiSignature);
}

页面代码

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>

</body>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
         // alert(appId +" " + nonceStr +" "+jsapi_ticket+" "+timestamp+" "+signature);
         $.getJSON("/test",function(res){//请求后端数据
            console.log(res);
            wx.config({
               debug : true, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
               appId : res.appId, //必填，公众号的唯一标识
               timestamp : res.timestamp, // 必填，生成签名的时间戳
               nonceStr : res.nonceStr, //必填，生成签名的随机串
               signature : res.signature, // 必填，签名，见附录1
               jsApiList : [ 'onMenuShareAppMessage', 'onMenuShareTimeline' ] //必填，需要使用的JS接口列表，所有JS接口列表 见附录2
            }); // end wx.config


            wx.ready(function() {
               // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

                    wx.checkJsApi({
                        jsApiList : [ 'onMenuShareAppMessage' ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                        success : function(res) {
                            // 以键值对的形式返回，可用的api值true，不可用为false
                            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                            alert(res.checkResult);
                            alert(res.errMsg);
                        }
                    }); // end checkJsApi

               wx.onMenuShareAppMessage({
                  title : '分享好友标题', // 分享标题
                  desc : '分享好友描述', // 分享描述
                  link : "http://evdb28.natappfree.cc/XXX/1.html", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl : 'http://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505419265109&di=cc30743d364e5ae89172c62a662e1321&imgtype=0&src=http%3A%2F%2Fpic.qqtn.com%2Fup%2F2017-6%2F14973136731543515.jpg', // 分享图标
                  type : '', // 分享类型,music、video或link，不填默认为link
                  dataUrl : '', // 如果type是music或video，则要提供数据链接，默认为空
                  success : function() {
                     // 用户确认分享后执行的回调函数
                     // alert('share successful');
                  },
                  cancel : function() {
                     // 用户取消分享后执行的回调函数
                     // alert('share cancel');
                  }
               }); // end onMenuShareAppMessage


               wx.onMenuShareTimeline({
                  title : '分享朋友圈标题', // 分享标题
                  link : "http://evdb28.natappfree.cc/XXX/1.html", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                  imgUrl : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505419265109&di=cc30743d364e5ae89172c62a662e1321&imgtype=0&src=http%3A%2F%2Fpic.qqtn.com%2Fup%2F2017-6%2F14973136731543515.jpg', // 分享图标
                  success : function() {
                     // 用户确认分享后执行的回调函数
                  },
                  cancel : function() {
                     // 用户取消分享后执行的回调函数
                  }
               }); // end onMenuShareTimeline
            }); // end ready

            wx.error(function(res) {
               // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
               alert(JSON.stringify(res));
            });
         });

 
</script>
</html>

确保pc端console无错误信息

微信端打开网页弹出正确信息即设置成功

右上角分享至好友或朋友圈即可看到自定义分享

XYLANCC

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
微信公众号自定义分享链接踩坑记

申请微信公众测试号https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login可选natapp以下所有操作后台请求和页面都要在此安全域名下不能加http:// 有坑并关注测试号 springboot配置: <dependency> <groupId>com.gi...
复制链接

扫一扫