微信网页开发，如何在H5页面中设置分享的标题，内容以及缩略图

前言

最近的需求是做一个移动端H5的长屏广告页，最后需要在微信分享的时候修改文案以及带上图片，这个实现起来也不是很复杂。

实现步骤

1. 先绑定域名，先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。由于该自定义分享需要借助微信的jssdk来实现，所以这一步是必须的。
2. 引入微信的jssdk，在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js。
3. 通过config接口注入权限验证配置，所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。

// 生成签名随机字符串
function createNoncerStr() {
    const chars = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
        "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
    var noncerStr = ""
    for (let index = 0; index < 16; index++) {
        const element = chars[randomNum(0, 51)];
        noncerStr += element;

    }
    return noncerStr
}
const nonceStr = createNoncerStr();
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '公众号的id', // 必填，公众号的唯一标识
  timestamp: new Date().getTime(), // 必填，生成签名的时间戳
  nonceStr: nonceStr, // 必填，生成签名的随机串
  signature: sha1(`jsapi_ticket=${通过后台接口拿到的jsTicket，如何拿可以去看官网说明}&noncestr=${noncerStr}&timestamp=${timestamp}&url=${url}`),// 必填，签名，sha1方法可以直接引入第三方的js库，url通常为当前的url即window.location.href
  jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData',] // 必填，需要使用的JS接口列表，分享会用到这两个接口
});

4. 配置自定义分享内容

      wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
            window.wx.updateAppMessageShareData({ 
                title: '标题', // 这是分享展示卡片的标题
                desc: '描述', // 分享描述
                link: '点进去的链接', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: '缩略图地址', // 分享图标
                success: function () {
                    // 设置成功
                }
            })
            // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）这个是不支持加入描述的要注意一下
            window.wx.updateTimelineShareData({ 
                title: '标题', // 这是分享展示卡片的标题
                link: '点进去的链接', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: '缩略图地址', // 分享图标
                success: function () {
                    // 设置成功
                }
            })
        });

5. 完成，开始测试。

小结

之所以写一下是之前在网上找的一篇博客明明都是错的，用了之后没反应也要发出来，误导人，浪费时间，所以将自己亲测可用的方法记下来