微信網頁開發，如何在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. 完成，開始測試。

小結

之所以寫一下是之前在網上找的一篇博客明明都是錯的，用了之后沒反應也要發出來，誤導人，浪費時間，所以將自己親測可用的方法記下來