基于vue實(shí)現(xiàn)h5頁(yè)面分享微信以及朋友圈功能（以及兼容iOS）

記錄一下，分享真的有好多坑（本篇文章只講述前端遇到的問(wèn)題，不提供后端數(shù)據(jù)）

每行代碼以及每行字都有用，要靜下心看完（不要和任何人去攀比，每個(gè)人都是獨(dú)一無(wú)二的）

如果看技術(shù)問(wèn)題總結(jié)，請(qǐng)滑動(dòng)到頁(yè)面底部（實(shí)現(xiàn)過(guò)程也有問(wèn)題的解決方法）

\color{red}{首先看一下效果圖（需要有認(rèn)證的公眾號(hào)）}

微信分享給朋友（新接口api也支持qq，這里不展示效果圖了）

image.png

微信分享到朋友圈


image.png

\color{red}{實(shí)現(xiàn)分享過(guò)程：}

微信開(kāi)放api文檔地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

    第一步：安裝JSSDK（并引入）

    第二步：通過(guò)config接口注入權(quán)限驗(yàn)證配置

    第三步：通過(guò)ready接口處理成功驗(yàn)證

    第四步：通過(guò)error接口處理失敗驗(yàn)證

不說(shuō)這些廢話了，直接上代碼（這里簡(jiǎn)單封裝了一下，傻瓜式教程）

第一步：

安裝 jssdk npm install weixin-js-sdk --save

第二步：

在vue里創(chuàng)建js文件，我的是在 assets----common---utils.js 代碼如下：

\color{red}{(以下代碼里面的link后面增加的參數(shù)可以不加，看自己對(duì)接情況而定，每行代碼都有注釋)}

import wx from "weixin-js-sdk"

/*
 * 微信分享
 * 獲取微信加簽信息
 * @param{data}:獲取的微信加簽
 * @param{shareData}:分享配置參數(shù)
 */
export const wexinShare = (data, shareData) => {
    // var wx = require('weixin-js-sdk') || window['wx'];
    let appId = data.appId;
    let timestamp = data.timestamp;
    let nonceStr = data.nonceStr;
    let signature = data.signature;
    wx.config({
        debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。（測(cè)試記得關(guān)掉）
        appId: appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
        timestamp: timestamp, // 必填，生成簽名的時(shí)間戳
        nonceStr: nonceStr, // 必填，生成簽名的隨機(jī)串
        signature: signature, // 必填，簽名，見(jiàn)附錄1
        jsApiList: [
                'updateAppMessageShareData',
                'updateTimelineShareData'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
    });
    wx.checkJsApi({
        jsApiList: ['chooseImage', 'updateAppMessageShareData'], // 需要檢測(cè)的JS接口列表，所有JS接口列表見(jiàn)附錄2,
        success: function(res) {
            // 以鍵值對(duì)的形式返回，可用的api值true，不可用為false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            console.log(res, 'checkJsApi')
        }
    });
    wx.ready(function() {
        // //分享到朋友圈”及“分享到QQ空間”
        wx.updateTimelineShareData({
            title: shareData.title, // 分享標(biāo)題
            link: shareData.link + '&t=' + timestamp + '&Content=1', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
            imgUrl: shareData.imgUrl, // 分享圖標(biāo)
            success: function(res) {
                // 設(shè)置成功
                console.log("分享朋友圈成功返回的信息為:", res);
            }
        })

        //“分享給朋友”及“分享到QQ”
        wx.updateAppMessageShareData({
            title: shareData.title, // 分享標(biāo)題
            desc: shareData.desc, // 分享描述
            link: shareData.link + '&t=' + timestamp + '&Content=1', // 分享鏈接 該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
            imgUrl: shareData.imgUrl, // 分享圖標(biāo)
            success: function(res) {
                console.log("分享朋友成功返回的信息為:", res);;
            }
        })

    });
    wx.error(function(res) {
        // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
        console.log('驗(yàn)證失敗返回的信息:', res);
    });
}

第三步：

在分享頁(yè)面引入剛剛封裝暴露出來(lái)的方法

import { wexinShare } from '@/assets/common/utils.js';

調(diào)用后端接口獲取簽名等數(shù)據(jù)(傳參根據(jù)后端接口查看)

把獲取的微信加簽和要分享的數(shù)據(jù)進(jìn)行獲取，傳入方法

        weixin() {
            //請(qǐng)求微信配置參數(shù)接口（獲取簽名），由后臺(tái)給接口給
            var urls = window.location.href.split('#')[0];
            console.log(urls, 22222333);
            //看后臺(tái)請(qǐng)求接口是get/post
            http.post(config.shareResume, {
                jdId: this.jdId,
                recommendId: this.$route.query.recommendId,
                url: urls
            }).then(res => {
                console.log(res, '內(nèi)容');
                console.log(this.allPositionDetailList, '111');
                if (res.code == 200) {
                    //微信加簽
                    var obj = {
                        appId: res.data.appId,
                        nonceStr: res.data.nonceStr,
                        signature: res.data.signature,
                        timestamp: res.data.timestamp,
                        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
                    };
                    //分享數(shù)據(jù)，這段主要是為了在hash模式下分享出去的鏈接不被瀏覽器截取，保證完全把鏈接分享出去
                    var url = window.location.href.split('#')[0];
                    // var shareWxLink = encodeURIComponent(url);加密
                    let shareData = {
                        title: this.allPositionDetailList.jdName, // 分享標(biāo)題
                        desc:
                            '公司名稱(chēng)：' +
                            this.allPositionDetailList.merchantName +
                            ' 招聘人數(shù)：' +
                            this.allPositionDetailList.jdNumber +
                            ' 工作經(jīng)驗(yàn)：' +
                            this.experienceInfo[this.allPositionDetailList.experience],
                        link: res.data.linkUrl,
                        // link: window.location.href,
                        imgUrl: res.data.imgUrl // 分享圖標(biāo)
                    };
                    //引用
                    wexinShare(obj, shareData);
                } else {
                    this.$toast.warn('獲取sdk參數(shù)失敗！');
                }
            });
        },

\color{red}{(?。?！注意跳轉(zhuǎn)分享頁(yè)跳轉(zhuǎn)的方式要用 window.location.replace)}(目的是為了兼容ios,蘋(píng)果每次要去重定向頁(yè)面，安卓不需要，不這樣跳轉(zhuǎn)會(huì)導(dǎo)致安卓沒(méi)問(wèn)題，但是蘋(píng)果不成功或者不顯示標(biāo)題或者圖片)

到這步如果都沒(méi)有問(wèn)題基本就可以分享了（注意h5分享是使用微信瀏覽器右上角的三個(gè)點(diǎn)進(jìn)行分享的，在點(diǎn)擊右上角之前要先注入config/ready,官網(wǎng)已說(shuō)明）

image.png

分享的時(shí)候要去判斷是否是微信瀏覽器打開(kāi)，如果不是要提示不能分享

  var broser = window.navigator.userAgent.toLowerCase();
            //通過(guò)正則表達(dá)式匹配broser 中是否含有MicroMessenger字符串
            if (broser.match(/MicroMessenger/i) == 'micromessenger') {
                console.log('微信瀏覽器');
                // this.weixin();
                this.showContent = true;
            } else {
                this.$toast.warn('請(qǐng)使用微信瀏覽器打開(kāi)');
            }
image.png

說(shuō)到這里就需要分享的時(shí)候做個(gè)引導(dǎo)頁(yè)了（效果如下）

兩張透明圖片拼接而成（圖片放下面，需要自己保存，遮罩層自己來(lái)寫(xiě)）


image.png

因?yàn)槭峭该鞯乃钥赡芸床惶澹ㄓ壹^的透明圖片）


3.png

我知道了透明圖片
idont.png

接下來(lái)總結(jié)一下分享可能會(huì)遇到的問(wèn)題

1.分享的內(nèi)容一直是地址而不是一個(gè)鏈接
看link和后端配置的js安全域名一致不一致
2.安卓分享沒(méi)有任何問(wèn)題但是ios分享就不顯示標(biāo)題和描述以及圖片
跳轉(zhuǎn)分享頁(yè)時(shí)要使用 window.location.replace(url) 用于重定向地址（微信社區(qū)也說(shuō)了）

image.png

3.以上都沒(méi)有問(wèn)題了但是ios分享還是鏈接
需要掃描進(jìn)入，不要直接點(diǎn)擊分享鏈接進(jìn)入（或者清除微信緩存，退出重新登錄就ok了）
4.如果還是分享不成功還是地址
查看官方文檔（上面分享過(guò)）看你調(diào)用的是新接口還是即將廢棄的接口（本文章是新接口api）
image.png

基本這些就解決了分享問(wèn)題，還有嘗試過(guò)其他解決方法但是都沒(méi)有生效，這里不太過(guò)多闡述，又什么問(wèn)題，歡迎在評(píng)論區(qū)留言。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容