H5微信分享(自定义标题,缩略图)

一.准备

1.微信公众号(可申请测试号)

2.res.wx.qq.com/open/js/jwe…

二.步骤

1.进入公众号绑定"JS接口安全域名"

2.引入js文件(可直接引用,也可以npm安装)

3.配置wx.config(参数通过后台接口获取,上送location.href.split('#')[0])

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

签名算法 js接口列表

4.wx.ready中调用接口

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
  wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
  
  //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
  wx.updateTimelineShareData({ 
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

三.问题

1.签名问题,后端排查签名

2.未关注公众号

四.其他

1.官方开发文档

2.分享图可放在static中,以便获取图片url

3.分享效果

    默认效果

    定制效果