首先要有公眾號(hào)

需要在公眾號(hào)后臺(tái)的安全域名中加上現(xiàn)在的域名，這是第一步，最基礎(chǔ)的一步。

然后獲取授權(quán)、并拿到openid以及分享參數(shù)

公眾號(hào)授權(quán)是需要重定向去授權(quán)的

//重定向的時(shí)候需要注意appid是redirect_uri是需要在公眾號(hào)安全域名配置的
//配置安全域名不需要寫http://或者h(yuǎn)ttps   例：www.baidu.com
window.location. + appId + "&redirect_uri=" + redirect_uri +
    "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";

重定向拿到code，向后端小伙伴要用戶數(shù)據(jù)。

分享給朋友、分享到朋友圈

到這一步就是需要我們前端獨(dú)立完成的部分了，所有東西都準(zhǔn)備好了。

1、安裝js-sdk

//vue項(xiàng)目中像安裝其他依賴一樣在命令行輸入就可以，也可以script引入
npm install weixin-js-sdk--save

2、js-sdk初始化

我們調(diào)用wx.config方法，來校驗(yàn)是否可以使用微信的JS-SDK。注意，jsApiList是用來配置可以注冊(cè)哪些微信功能的，這里舉例了2個(gè)，一個(gè)是分享給朋友，一個(gè)是分享到朋友圈，其他功能請(qǐng)到微信JS-SDK文檔中自行查看。之后我們調(diào)用wx.ready方法，用來處理驗(yàn)證成功后的事件。
PS：(

jsApiList 是根據(jù)自己業(yè)務(wù)需求去配置的 具體的可以看公眾號(hào)文檔

分享到朋友圈跟好友注意link是你上面請(qǐng)求的那個(gè)地址，兩個(gè)地址要保持一致

)

//這個(gè)地方是需要根據(jù)當(dāng)前的url去請(qǐng)求后臺(tái)的接口拿到具體的參數(shù)

 const wxConfigItems = (list, shareTitle, shareDesc, shareImg, callback) => {
    let shareUrl = window.location.href.split("#")[0];
    let reqData = {
        shareUrl: shareUrl
    };
//使用axios跟后臺(tái)交互
//apiUrl 請(qǐng)求后臺(tái)的地址
  axios(apiUrl, "post", reqData, res => {
        wx.config({
            debug: false,
            appId: res.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
            timestamp: res.timestamp, // 必填，生成簽名的時(shí)間戳
            nonceStr: res.nonceStr, // 必填，生成簽名的隨機(jī)串
            signature: res.signature, // 必填，簽名
            jsApiList: list // 必填，需要使用的JS接口列表
        });
        wx.ready(function(res) {
            console.log(res);
        
          // 分享給朋友
            wx.updateTimelineShareData({
                title: shareTitle, // 分享時(shí)的標(biāo)題
                link: shareUrl, // 分享時(shí)的鏈接
                desc: shareDesc,
                imgUrl: shareImg, // 分享時(shí)的圖標(biāo)
                success: function() {
                    callback("success");
                },
                cancel: function() {}
            });
            //分享給朋友
            wx.updateAppMessageShareData({
                title: shareTitle, // 分享時(shí)的標(biāo)題
                link: shareUrl, // 分享時(shí)的鏈接
                desc: shareDesc,
                imgUrl: shareImg, // 分享時(shí)的圖標(biāo)
                success: function() {
                    callback("success");
                },
                cancel: function() {}
            });


        });
        wx.error(function(res) {
            console.log("失敗==", res);
        });
    });
};

//如果調(diào)用分享好友與朋友圈隱藏其余按鈕
 let list = ["hideMenuItems", "showMenuItems",  "updateTimelineShareData","updateAppMessageShareData"];//隱藏除分享好友與朋友圈的其余按鈕
wxConfigItems(list, shareTitle, shareDesc, shareImg)
   



//如果需要隱藏操作欄，
let list = ['hideMenuItems'];//隱藏分享按鈕那一欄
wxConfigItems(list, shareTitle, shareDesc, shareImg)

//在wx.ready執(zhí)行成功以后調(diào)用就可以隱藏
 wx.hideMenuItems({
            menuList: [
                "menuItem:share:appMessage",
                "menuItem:share:timeline",
                "menuItem:share:weiboApp",
                "menuItem:share:facebook",
                "menuItem:share:qq",
                "menuItem:favorite",
                "menuItem:share:QZone",
                "menuItem:openWithQQBrowser",
                "menuItem:openWithSafari",
                "menuItem:share:email",
                "menuItem:share:brand"
            ]
        });

//wx.ready執(zhí)行成功以后調(diào)用復(fù)制鏈接
 wx.hideOptionMenu('hideOptionMenu');

兼容問題處理

進(jìn)入對(duì)應(yīng)的頁面在此調(diào)用wx.config，多次調(diào)用可以解決ios跟安卓刷新時(shí)的問題（在ios中處理單頁需要在首次main.js先調(diào)用wx.config，）

//判斷手機(jī)型號(hào)
 const judgePhone = () => {
    let u = navigator.userAgent;
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isIOS) {
        return "ios";
    } else {
        return "android";
    }
};
//在main.js中判斷調(diào)用  ios首次加載調(diào)用一次  
router.beforeEach((to, from, next) => {
    if(judgePhone == 'ios'){
        if (to.path === "/") {
            // 調(diào)用獲取驗(yàn)證參數(shù)方法   
            wxConfigItems()
        }
    }
   
}