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

摘要： wxShare 說明文件 單頁面路由工程使用微信分享及二次分享解決方案 很多人在單頁面工程中使用weixin jsSDK時 ,第一次呼叫正常, 路由切換時發現呼叫分享配置報錯, 此時忽略了一點 ,在單頁面路由的 url 發生變化時, 需要重現呼叫微信jsSDK分享配置; ...

wxShare 說明文件

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

很多人在單頁面工程中使用weixin jsSDK時 ,第一次呼叫正常, 路由切換時發現呼叫分享配置報錯, 此時忽略了一點 ,在單頁面路由的 url 發生變化時, 需要重現呼叫微信jsSDK分享配置;

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

微信 jssdk呼叫基本原理

1. (初始化頁面,劃重點)掉用 api 獲取當前頁面 url 授權的簽名
2. 配置微信分享 jssdk
3. 路由切換時, 重新執行步驟2

1. 快速使用, 只需三步

示例參見 demo下 src/main.js

在工程入口檔案引入 wxShare 檔案

/*************** 步驟一 引入 微信 jssdk ************/
let appInit=0;
import wx from 'weixin-js-sdk';
//配置授權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);
}
}

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

2. wxShare提供的方法

2.1 initWxShare()

初始化微信分享, 此時會呼叫內部方法 wxShareAuth, 請求 api 授權當前頁面 url;

2.2 updateWxShareConfig()

更新微信分享配置內容, 例如, 在某個事件上主動呼叫此方法, 來更改微信分享配置的標題, 簡述,連結或者封面圖

2.3 resetWxShareConfig()

通常情況下, 在路由發生變化時, 希望已被更改過的分享配置, 重新重置為預設分享配置

2.4 configWXJSSDK();

呼叫微信jsSDK 完成分享配置

3. wxShare.config屬性配置

配置名稱	屬性值	預設值
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: "預設分享配置title",
desc: "預設分享配置desc",
link: location.href.split("#")[0],
imgUrl: 'https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/dNEBuK6.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 為外掛原始碼檔案, 可根據自己需求自行更改

demo 工程只需 clone 本工程,

npm install
npm run serve

npm依賴外掛

• weixin-js-sdk
• axios