如何使用vue實(shí)現(xiàn)微信二次分享以及自定義分享的示例-創(chuàng)新互聯(lián)

這篇文章主要介紹如何使用vue實(shí)現(xiàn)微信二次分享以及自定義分享的示例，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元昌邑做網(wǎng)站,已為上家服務(wù),為昌邑各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

微信二次分享／自定義分享

從App中使用App分享（一次分享）

使用微信導(dǎo)航欄的分享（二次分享） －－已做處理

使用微信導(dǎo)航欄的分享（二次分享） －－未做處理

如上圖，如果不做相關(guān)處理，頁面進(jìn)行二次分享，用戶看到的就是鏈接＋空圖，上面顯示的文案（考拉閱讀）實(shí)際上是獲取的title標(biāo)簽中的文案，我在網(wǎng)上查的相關(guān)例子有說明，圖片如果不設(shè)置，將會自動獲取瀏覽器渲染的第一張圖片，經(jīng)過個人測試，并沒有實(shí)現(xiàn)（朋友圈同理，不做圖片展示）。

微信js-sdk說明文檔

先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。（一般后端配置）

前端需要調(diào)取后端的接口，獲取微信的congfig所需要的參數(shù)

wx.config({
 debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
 appId: '', // 必填，公眾號的唯一標(biāo)識
 timestamp: , // 必填，生成簽名的時間戳
 nonceStr: '', // 必填，生成簽名的隨機(jī)串
 signature: '',// 必填，簽名
 jsApiList: [] // 必填，需要使用的JS接口列表
});

jsApiList里面需要填寫你調(diào)用的jsApi，updateAppMessageShareData（分享微信，QQ），updateTimelineShareData（微信朋友圈，QQ空間），onMenuShareTimeline／onMenuShareAppMessage／onMenuShareQQ 這三個即將廢棄，不建議使用。

但是在本次開發(fā)中，我只使用了updateAppMessageShareData，updateTimelineShareData，個別Android（微信版本7.0.3）分享出來的還是沒有圖片和文案，ios的是沒有問題，所以又加上了棄用的onMenuShareTimeline，onMenuShareAppMessage之后，安卓機(jī)也可以正常分享。

判斷當(dāng)前客戶端版本是否支持指定JS接口

wx.checkJsApi({
 jsApiList: ['chooseImage'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
 success: function(res) {
 // 以鍵值對的形式返回，可用的api值true，不可用為false
 // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
 }
});

wx.config中的 debug 設(shè)為true，在微信測試時會自動彈出相關(guān)信息，在微信開發(fā)者工具中也會打印出流程（分為begin，end）,如下圖

1、通過ready接口處理成功驗(yàn)證

2、在ready接口中調(diào)取updateAppMessageShareData，updateTimelineShareData方法

wx.ready(function () { //需在用戶可能點(diǎn)擊分享按鈕前就先調(diào)用
 wx.updateAppMessageShareData({ 
  title: '', // 分享標(biāo)題
  desc: '', // 分享描述
  link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
  imgUrl: '', // 分享圖標(biāo)
  success: function () {
   // 設(shè)置成功
  }
 })
});

在vue的開發(fā)項(xiàng)目中，可在created或mounted生命周期中調(diào)用

3、通過error接口處理失敗驗(yàn)證

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

需要注意的點(diǎn)

通過后端的接口獲取微信配置的參數(shù)時，需要傳遞當(dāng)前頁面url

• - url（當(dāng)前網(wǎng)頁的URL，不包含#及其后面部分），如果沒有＃，則需要傳遞完整的url

• - url需要編碼    encodeURIComponent(url)

代碼如下

// wetchat.js －－ 個人封裝
import wx from 'weixin-js-sdk'; // 引入wxJS
import apiUrl from "@/api/index"; // 本項(xiàng)目的api （根據(jù)自己項(xiàng)目）
export function wxChatShare(param) {
 let _url = encodeURIComponent(param.url) // 當(dāng)前頁面的url
 apiUrl.wechatConfig(_url) // wechatConfig是獲取微信配置相關(guān)信息的接口，此處根據(jù)個人項(xiàng)目寫法而定，類似于this.$ajax
 .then (res => {
  if(res.data.code==200) {
  // 接口返回配置信息
   wx.config({
    debug: false,
    appId: res.data.content.appid,
    timestamp: res.data.content.timestamp, // 必填，生成簽名的時間戳
    nonceStr: res.data.content.nonceStr, // 必填，生成簽名的隨機(jī)串
    signature: res.data.content.signature, // 必填，簽名
    jsApiList: [ // 用的方法都要加進(jìn)來
     'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage'
    ]
   });
   wx.ready(function () {
    //分享到朋友圈

    wx.updateTimelineShareData({ 
     title: param.title, // 分享標(biāo)題
     link: param.link, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
     imgUrl: param.imgUrl, // 分享圖標(biāo)
     success: function () {
      // 設(shè)置成功
      console.log("分享到朋友圈成功返回的信息為:", res);
      this.$Message.message("設(shè)置成功!");
     }
    })

    wx.onMenuShareTimeline({
     title: param.title, // 分享標(biāo)題
     link: param.link, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
     imgUrl: param.imgUrl, // 分享圖標(biāo)
     success: function () {
     // 用戶點(diǎn)擊了分享后執(zhí)行的回調(diào)函數(shù)
     },
    })

    //分享給朋友

    wx.updateAppMessageShareData({ 
     title: param.title, // 分享標(biāo)題
     desc: param.desc, // 分享描述
     link: param.link, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
     imgUrl: param.imgUrl, // 分享圖標(biāo)
     success: function () {
      // 設(shè)置成功
      console.log("分享到朋友圈成功返回的信息為:", res);
      this.$Message.message("設(shè)置成功!");
     }
    })
    wx.onMenuShareAppMessage({
     title: param.title, // 分享標(biāo)題
     desc: param.desc, // 分享描述
     link: param.link, // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
     imgUrl: param.imgUrl, // 分享圖標(biāo)
     type: param.type, // 分享類型,music、video或link，不填默認(rèn)為link
     dataUrl: param.dataUrl, // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空
     success: function () {
     // 用戶點(diǎn)擊了分享后執(zhí)行的回調(diào)函數(shù)
     }
    });
   });
   wx.error(function (res) {
    console.log('驗(yàn)證失敗返回的信息:', res);
   });
  } else {
   console.log(res.data.message);
  }
 })
 }

// home.vue

 import * as wechatJS from '@/utils/wechat' // 引入wechat.js

// 寫在方法中調(diào)用，或者在生命周期中調(diào)用
let _param = {
 studentId: 1, // 個人項(xiàng)目而定
 activityId: 1, // 個人項(xiàng)目而定
 url: window.location.href, // 當(dāng)前頁面url
 title: "為我點(diǎn)贊，一起免費(fèi)搶考拉閱讀VIP會員卡，暢讀一萬本好書～", // 分享數(shù)據(jù)配置
 desc: "孩子要讀書，上考拉閱讀", // 分享數(shù)據(jù)配置
 link: _nowUrl, // 分享數(shù)據(jù)配置
 imgUrl: url, // 分享數(shù)據(jù)配置 －－ 全路徑
 type: "link", // 分享類型,music、video或link，不填默認(rèn)為link
 dataUrl: " ", // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空

以上是“如何使用vue實(shí)現(xiàn)微信二次分享以及自定義分享的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標(biāo)題：如何使用vue實(shí)現(xiàn)微信二次分享以及自定義分享的示例-創(chuàng)新互聯(lián)
鏈接地址：http://muchs.cn/article10/cdsgdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、全網(wǎng)營銷推廣、服務(wù)器托管、網(wǎng)站設(shè)計(jì)、ChatGPT、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)