封裝公眾號(hào)h5項(xiàng)目中用到的微信分享函數(shù)(js-sdk)

先要下載weixin-js-sdk
npm i weixin-js-sdk
新建js文件命名為share.js寫如下代碼

import wx from 'weixin-js-sdk'
export function config(params, success, fail) {
    wx.config({
        debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會(huì)通過log打出,僅在pc端時(shí)才會(huì)打印。
        appId: params.appId, // 必填,公眾號(hào)的唯一標(biāo)識(shí)
        timestamp: params.timestamp, // 必填,生成簽名的時(shí)間戳
        nonceStr: params.nonceStr, // 必填,生成簽名的隨機(jī)串
        signature: params.signature, // 必填,簽名
        jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData',
            'onMenuShareAppMessage', 'hideMenuItems'
        ] // 必填,需要使用的JS接口列表
    })

    // config信息驗(yàn)證后會(huì)執(zhí)行ready方法,所有接口調(diào)用都必須在config接口獲得結(jié)果之后,config是一個(gè)客戶端的異步操作,所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口,則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口,則可以直接調(diào)用,不需要放在ready函數(shù)中。
    wx.ready(success)

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

export function shareFriends(params, success) {
      if (!params) {
         params = {
           title: '百度', // 分享標(biāo)題
           desc: '歡迎您', // 分享描述
           link: 'http://baidu.com', // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
           imgUrl: '', // 分享圖標(biāo)
         }
      }
    if (wx.updateAppMessageShareData) {
        wx.updateAppMessageShareData({
            title: params.title, // 分享標(biāo)題
            desc: params.desc, // 分享描述
            link: params.link, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
            imgUrl: params.imgUrl, // 分享圖標(biāo)
            success: success
        })
    } else {
        wx.onMenuShareAppMessage({
            title: params.title, // 分享標(biāo)題
            desc: params.desc, // 分享描述
            link: params.link, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
            imgUrl: params.imgUrl, // 分享圖標(biāo)
            success: success
        });
    }
}

export function shareTimeline(params, success) {
      if (!params) {
         params = {
           title: '微信分享', // 分享標(biāo)題
           desc: '歡迎您', // 分享描述
           link: 'http://baidu.com', // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
           imgUrl: '', // 分享圖標(biāo)
         }
      }
    if (wx.updateTimelineShareData) {
        wx.updateTimelineShareData({
            title: params.title, // 分享標(biāo)題
            desc: params.desc, // 分享描述
            link: params.link, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
            imgUrl: params.imgUrl, // 分享圖標(biāo)
            success: success
        })
    } else {
        wx.onMenuShareTimeline({
            title: params.title, // 分享標(biāo)題
            desc: params.desc, // 分享描述
            link: params.link, // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
            imgUrl: params.imgUrl, // 分享圖標(biāo)
            success: success
        });
    }
}

export default {
    config,
    shareFriends,
    shareTimeline
}

使用時(shí)引入上述js
import share from 'share.js'
需要先獲取微信js簽名 拿到config中需要的配置參數(shù)

share.config(res.data, () => { // res.data是獲取js簽名后拿到的返回參數(shù)appId、timestamp、nonceStr、signature
                            let shareParams = {
                            title: '標(biāo)題', // 分享標(biāo)題
                            desc: '描述', // 分享描述
                            link: 'www.baidu.com', // 分享鏈接,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
                            imgUrl:  this.thumb// 分享圖標(biāo)
                          }
                            share.shareFriends(shareParams, () => {
                                    console.log('朋友設(shè)置成功')
                                  })
                            share.shareTimeline(shareParams, () => {
                                console.log('朋友圈設(shè)置成功')
                              })
                             }
最后編輯于
?著作權(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)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

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