詳解單頁面路由工程使用微信分享及二次分享解決方案
wxShare 說明文檔
單頁面路由工程使用微信分享及二次分享解決方案
很多人在單頁面工程中使用weixin jsSDK時 ,第一次調用正常, 路由切換時發(fā)現(xiàn)調用分享配置報錯, 此時忽略了一點 ,在單頁面路由的 url 發(fā)生變化時, 需要重現(xiàn)調用微信jsSDK分享配置;
wxShare除適用于 Vue 單頁工程外, 也可以使用與其他單頁工程例如 React,本示例主要展示如何在 Vue中使用;
微信 jssdk調用基本原理
1. (初始化頁面,劃重點)掉用 api 獲取當前頁面 url 授權的簽名
2. 配置微信分享 jssdk
3. 路由切換時, 重新執(zhí)行步驟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);
}
}
/*************** 第三步 監(jiā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()
初始化微信分享, 此時會調用內部方法 wxShareAuth, 請求 api 授權當前頁面 url;
2.2 updateWxShareConfig()
更新微信分享配置內容, 例如, 在某個事件上主動調用此方法, 來更改微信分享配置的標題, 簡述,鏈接或者封面圖
2.3 resetWxShareConfig()
通常情況下, 在路由發(fā)生變化時, 希望已被更改過的分享配置, 重新重置為默認分享配置
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 為插件源碼文件, 可根據(jù)自己需求自行更改
demo 工程只需 clone 本工程,
npm install npm run serve
npm依賴插件
- weixin-js-sdk
- axios
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
一文搞懂JavaScript中bind,apply,call的實現(xiàn)
bind、call和apply都是Function原型鏈上面的方法，因此不管是使用function聲明的函數(shù)，還是箭頭函數(shù)都可以直接調用。本文就帶你看看如何實現(xiàn)bind、call和apply2022-06-06
BootStrap 下拉菜單點擊之后不會出現(xiàn)下拉菜單(下拉菜單不彈出)的解決方案
最近學到Bootstrap下拉菜單，學懂了教程內容之后自己敲一個點擊按鈕底下彈出下拉菜單的小demo，寫完代碼發(fā)現(xiàn)運行之后點擊按鈕沒反應，下拉菜單彈不出來，下面給大家分享下解決方案2016-12-12
詳解JS數(shù)據(jù)類型的值拷貝函數(shù)（深拷貝）
這篇文章主要介紹了詳解JS數(shù)據(jù)類型的值拷貝函數(shù)（深拷貝）的相關資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-07-07
微信小程序的出現(xiàn)給我們提供了一種使用應用的新方式和體驗,下面這篇文章主要給大家介紹了關于uniapp打包成微信小程序的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-07-07
Javascript和Raphael順便學習了一下,主要是為了實現(xiàn)一個可拖動的矩形同時矩形上還得顯示標簽，網上關于這方面的知識提的很是于是本人自不量力寫了一下，感興趣的你可不要錯過了哈，希望可以幫助到你2013-02-02
本篇文章是對加載遠程圖片時,經常因為緩存而得不到更新的解決方法進行了詳細的分析介紹，需要的朋友參考下2013-06-06
我們平時對 cookie 的增刪改查等操作，都是在操作document.cookie，這里我們介紹一個新方法cookieStore。2021-05-05
給你一個文件名,你能獲得它的擴展名嗎?這篇文章主要給大家介紹了關于如何使用js獲取擴展名的相關資料,文中介紹了幾種實現(xiàn)的方法,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-02-02
最近改了一個公司項目,新增加了一個獲取用戶手機號功能,里面用到了關于獲取用戶信息和用戶手機號的功能,下面這篇文章主要給大家介紹了關于微信小程序獲取用戶手機號碼的相關資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了小程序指紋驗證的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12