微信(公众号)自定义分享

Posted 下落香樟树

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信(公众号)自定义分享相关的知识,希望对你有一定的参考价值。

微信JS-SDK(1.4)版本

1、优先引入微信JS-SDK

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- 支持https -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

2、处理微信分享需要的参数

var timestamp, nonceStr, signature, data = {};
data.url = location.href.split('#')[0];
$.ajax({
    async: false,
    type: 'post',
    url:'xxxx',
    data: data,
    dataType: 'json',
    success:function(res){
        timestamp = res.data.timestamp;
        nonceStr = res.data.nonceStr;
        signature = res.data.signature;
    }
});

3、权限校验

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

/**
 * checkJsApi:校验当前客户端是否支持指定版本JS接口
 * updateAppMessageShareData:自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
 * updateTimelineShareData:自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
 * */

wx.ready(function(){
    wx.checkJsApi({
      jsApiList: ['chooseImage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
      success: function(res) {
      // 以键值对的形式返回,可用的api值true,不可用为false
      // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
      }
    });
    
    /**
     * 分享图标imgUrl推荐使用链接地址,不推荐使用相对路径
     * */
    wx.updateAppMessageShareData({ 
        title: '', // 分享标题
        desc: '', // 分享描述
        link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
          // 设置成功
        }
    });
    
    wx.updateTimelineShareData({ 
        title: '', // 分享标题
        link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
          // 设置成功
        }
    });
});
注意事项:
  • 下列这些微信自定义分享接口即将废弃,建议使用上述分享接口
    • wx.onMenuShareTimeline:分享到朋友圈
    • wx.onMenuShareAppMessage:分享给朋友
    • wx.onMenuShareQQ:分享到QQ
    • wx.onMenuShareQZone:分享到QQ空间
  • 获取权限校验信息时,跟后面的校验当前客户端是否支持指定版本JS接口同步异步 执行会导致分享失败

以上是关于微信(公众号)自定义分享的主要内容,如果未能解决你的问题,请参考以下文章

H5网页如何在微信中自定义分享链接(可设置标题+简介+图片)

微信公众号jssdk分享接口onMenuShareAppMessage自定义的参数无效,微信分享失败原因

微信公众号推文中如何自定义添加表格?

自定义微信分享标题和描述信息

微信公众号开发者模式自定义菜单

Vue 项目实现微信分享的自定义分享链接问题解决