平時微信H5的分享做的比較少，忍不住記下，防忘記

官方文件：JS-SDK說明文件：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

1、公眾號上配置域名，且公眾號需要企業公眾號，不能個人

2、引入JS檔案

引入js檔案，有兩種方式，通過npm 引入 和 <script>

1、通過<script>引入

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

2、通過npm引入（推薦，下文是以npm方式的實現步驟）

npm install jweixin-module --save

2.1、npm引入之後，引入依賴模組

// 1、可直接在需要的頁面引入
import wx from 'weixin-js-sdk';

// 2、或者在mian.js 中，通過vue原型鏈，全域性引入
import wx  from ''weixin-js-sdk'
Vue.prototype.$wx = wx

3、配置資訊

　　先通過 wx.config 配置資訊

// 以下幾個是前置動作
// 1、需要將 當前的頁面地址 提交給後端，以和微信換取配置資訊configData
 

// 2、推薦 當前頁面地址和引數 一併提交：window.location.href 
// 3、注意，提交給後端的頁面地址，必須在公眾後臺配置好域名
// 4、本地除錯的域名無法正常使用，（可以在本地進行域名解析）

var configData={
  debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
  appId: '', // 必填，公眾號的唯一標識（後端提供）
  timestamp: , // 必填，生成簽名的時間戳（後端提供）
  nonceStr: '', // 必填，生成簽名的隨機串（後端提供）
 

  signature: '',// 必填，簽名（後端提供）
  jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS介面列表（前端設定，https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#64）
}
$wx.config(configData); // 關鍵介面

4、呼叫微信js-sdk的介面

注意：1、在呼叫微信的sdk介面時，需要在 wx.config 之後，

　　　2、呼叫介面需要在配置在 wx.config 的 jsApiList 中，否則無法使用

　　　3、分享的介面中，配置的url，可以隨意填寫

　　　4、有些sdk的介面，其中的引數是必填的，否則會報錯，自行留意，官網文件沒提示

// 注意：
// config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，
// config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，
// 則須把相關介面放在ready函式中呼叫來確保正確執行。
// 對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。

wx.ready(function () {

    //自定義“分享給朋友”及“分享到QQ”
    wx.updateAppMessageShareData({
        title: '', // 分享標題
        desc: '', // 分享描述
        link: '', // 分享連結，（這個地址好像可以隨意填寫）
        imgUrl: that.pageData.avatar, // 分享圖示
        success: function (setSuccess) {
            // 設定成功
            console.log("設定成功", setSuccess)
        }
    });

    //自定義“分享到朋友圈”/“分享到QQ空間”
    wx.updateTimelineShareData({
        title: '', // 分享標題
        link: '', // 分享連結，（這個地址好像可以隨意填寫）
        imgUrl: '', // 分享圖示
        success: function (setSuccess) {
            // 設定成功
            console.log("設定成功", setSuccess)
        }
    });

    //隱藏所有非基礎按鈕介面
    wx.hideAllNonBaseMenuItem();

    //批量顯示功能按鈕介面
    wx.showMenuItems({
        menuList: ["menuItem:share:timeline", "menuItem:share:appMessage"] // 要顯示的選單項，所有menu項見附錄3
    });
});

完整例項

 wxConfig(){
                let that=this;

                var logInPageUrl=window.location.href;
                var logInPageUrl2=window.location.origin+'/#/?id='+that.id;
                var jsApiArray=['showMenuItems','hideAllNonBaseMenuItem','updateAppMessageShareData', 'updateTimelineShareData', 'hideOptionMenu', 'showOptionMenu'];

                that.$http("wxConfig_api", {url:logInPageUrl},).then((wxConfigRes) => {
                    if(wxConfigRes.code==0){

                        var getData=wxConfigRes.data;
                        wx.config({
                            debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
                            appId: getData.app_id, // 必填，公眾號的唯一標識
                            timestamp:getData.timeStamp, // 必填，生成簽名的時間戳
                            nonceStr: getData.nonceStr, // 必填，生成簽名的隨機串
                            signature: getData.signature,// 必填，簽名
                            jsApiList: jsApiArray // 必填，需要使用的JS介面列表
                        });

                        // 注意：
                        // config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，
                        // config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，
                        // 則須把相關介面放在ready函式中呼叫來確保正確執行。
                        // 對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。

                        wx.ready(function () {

                            //自定義“分享給朋友”及“分享到QQ”
                            wx.updateAppMessageShareData({
                                title: that.pageData.true_name + ' ' + that.pageData.position, // 分享標題
                                desc: that.pageData.desc, // 分享描述
                                link: logInPageUrl2, // 分享連結
                                imgUrl: that.pageData.avatar, // 分享圖示
                                success: function (setSuccess) {
                                    // 設定成功
                                    console.log("設定成功", setSuccess)
                                }
                            });

                            //自定義“分享到朋友圈”/“分享到QQ空間”
                            wx.updateTimelineShareData({
                                title: that.pageData.true_name + ' ' + that.pageData.position, // 分享標題
                                link: logInPageUrl2, // 分享連結
                                imgUrl: that.pageData.avatar, // 分享圖示
                                success: function (setSuccess) {
                                    // 設定成功
                                    console.log("設定成功", setSuccess)
                                }
                            });

                            //隱藏所有非基礎按鈕介面
                            wx.hideAllNonBaseMenuItem();

                            //批量顯示功能按鈕介面
                            wx.showMenuItems({
                                menuList: ["menuItem:share:timeline", "menuItem:share:appMessage"] // 要顯示的選單項，所有menu項見附錄3
                            });
                        });
                        wx.error(function(res){
                            console.error('config資訊驗證失敗',res)
                        });
                    }
                }).catch((err) => {
                    console.error('介面錯誤',err)
                });
            },