這篇文章主要介紹單頁(yè)面路由工程如何使用微信分享及二次分享，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的隴縣網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

wxShare 說(shuō)明文檔

單頁(yè)面路由工程使用微信分享及二次分享解決方案

很多人在單頁(yè)面工程中使用weixin jsSDK時(shí) ,第一次調(diào)用正常, 路由切換時(shí)發(fā)現(xiàn)調(diào)用分享配置報(bào)錯(cuò), 此時(shí)忽略了一點(diǎn) ,在單頁(yè)面路由的 url 發(fā)生變化時(shí), 需要重現(xiàn)調(diào)用微信jsSDK分享配置;

wxShare除適用于 Vue 單頁(yè)工程外, 也可以使用與其他單頁(yè)工程例如 React,本示例主要展示如何在 Vue中使用;

微信 jssdk調(diào)用基本原理

1. (初始化頁(yè)面,劃重點(diǎn))掉用 api 獲取當(dāng)前頁(yè)面 url 授權(quán)的簽名
2. 配置微信分享 jssdk
3. 路由切換時(shí), 重新執(zhí)行步驟2

1. 快速使用, 只需三步

示例參見 demo下 src/main.js

在工程入口文件引入 wxShare 文件

/*************** 步驟一 引入 微信 jssdk ************/
let appInit=0;
import wx from 'weixin-js-sdk';
//配置授權(quán)api
wxShare.config.jsSDKAuth='/api/mobile/WeiXin/ecstoreSendJsSdk';

/*************** 第二步 初始化微信分享 ************/
if (location.host != "localhost:8080") {
 let sign_url = location.href.split("#")[0];
 appInit++;
 if (wx) {
  wxShare.initWxShare(sign_url);
 }
}

/*************** 第三步 監(jiān)聽路由重置微信分享為默認(rèn) ************/
router.afterEach(route => {
 let url=location.href.split("#")[0];
 if (!store) return;
 if(appInit>1){
  wxShare.resetWxShareConfig();
 }
 appInit++;
})
/*************** end 分割線 ************/

2. wxShare提供的方法

2.1 initWxShare()

初始化微信分享, 此時(shí)會(huì)調(diào)用內(nèi)部方法 wxShareAuth, 請(qǐng)求 api 授權(quán)當(dāng)前頁(yè)面 url;

2.2 updateWxShareConfig()

更新微信分享配置內(nèi)容, 例如, 在某個(gè)事件上主動(dòng)調(diào)用此方法, 來(lái)更改微信分享配置的標(biāo)題, 簡(jiǎn)述,鏈接或者封面圖

2.3 resetWxShareConfig()

通常情況下, 在路由發(fā)生變化時(shí), 希望已被更改過的分享配置, 重新重置為默認(rèn)分享配置

2.4 configWXJSSDK();

調(diào)用微信jsSDK 完成分享配置

3. wxShare.config屬性配置

配置名稱	屬性值	默認(rèn)值
jsSDKAuth	String	''
shareSign	Object	下文shareSign
defaultWxShareConfig	Object	下文defaultWxShareConfig
wxShareConfig	Object	下文wxShareConfig

3.1 shareSign提供的配置

{
 appid:"",
 jsapi_ticket:"",
 nonceStr:"",
 signature:"",
 timestamp:'',
 url:"",
}

3.2 defaultWxShareConfig

{
 title: "默認(rèn)分享配置title",
 desc: "默認(rèn)分享配置desc",
 link: location.href.split("#")[0],
 imgUrl: '/upload/otherpic67/27763.png',
 jsApiList:['onMenuShareTimeline', 'onMenuShareAppMessage', 'hideMenuItems', 'closeWindow'],
 hideMenuList:['menuItem:editTag', 'menuItem:delete', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:openWithQQBrowser', 'menuItem:openWithSafari', 'menuItem:share:email', 'menuItem:share:brand']
}

3.3 wxShareConfig

wxShareConfig:{}

其他

/wxShare.js 為插件源碼文件, 可根據(jù)自己需求自行更改
demo 工程只需 clone 本工程,

npm install
npm run serve

npm依賴插件

• weixin-js-sdk

• axios

以上是“單頁(yè)面路由工程如何使用微信分享及二次分享”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：單頁(yè)面路由工程如何使用微信分享及二次分享
URL地址：http://newbst.com/article6/jhciog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、軟件開發(fā)、網(wǎng)站改版、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)

廣告

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