详解单页面路由工程使用微信分享及二次分享解决方案
wxShare说明文档
单页面路由工程使用微信分享及二次分享解决方案
很多人在单页面工程中使用weixinjsSDK时,第一次调用正常,路由切换时发现调用分享配置报错,此时忽略了一点,在单页面路由的url发生变化时,需要重现调用微信jsSDK分享配置;
wxShare除适用于Vue单页工程外,也可以使用与其他单页工程例如React,本示例主要展示如何在Vue中使用;
微信jssdk调用基本原理
1.(初始化页面,划重点)掉用api获取当前页面url授权的签名
2.配置微信分享jssdk
3.路由切换时,重新执行步骤2
1.快速使用,只需三步
示例参见demo下src/main.js
在工程入口文件引入wxShare文件
/***************步骤一引入微信jssdk************/ letappInit=0; importwxfrom'weixin-js-sdk'; //配置授权api wxShare.config.jsSDKAuth='/api/mobile/WeiXin/ecstoreSendJsSdk';
/***************第二步初始化微信分享************/
if(location.host!="localhost:8080"){
letsign_url=location.href.split("#")[0];
appInit++;
if(wx){
wxShare.initWxShare(sign_url);
}
}
/***************第三步监听路由重置微信分享为默认************/
router.afterEach(route=>{
leturl=location.href.split("#")[0];
if(!store)return;
if(appInit>1){
wxShare.resetWxShareConfig();
}
appInit++;
})
/***************end分割线************/
2.wxShare提供的方法
2.1initWxShare()
初始化微信分享,此时会调用内部方法wxShareAuth,请求api授权当前页面url;
2.2updateWxShareConfig()
更新微信分享配置内容,例如,在某个事件上主动调用此方法,来更改微信分享配置的标题,简述,链接或者封面图
2.3resetWxShareConfig()
通常情况下,在路由发生变化时,希望已被更改过的分享配置,重新重置为默认分享配置
2.4configWXJSSDK();
调用微信jsSDK完成分享配置
3.wxShare.config属性配置
| 配置名称 | 属性值 | 默认值 |
|---|---|---|
| jsSDKAuth | String | '' |
| shareSign | Object | 下文shareSign |
| defaultWxShareConfig | Object | 下文defaultWxShareConfig |
| wxShareConfig | Object | 下文wxShareConfig |
3.1shareSign提供的配置
{
appid:"",
jsapi_ticket:"",
nonceStr:"",
signature:"",
timestamp:'',
url:"",
}
3.2defaultWxShareConfig
{
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.3wxShareConfig
wxShareConfig:{}
其他
/wxShare.js为插件源码文件,可根据自己需求自行更改
demo工程只需clone本工程,
npminstall npmrunserve
npm依赖插件
- weixin-js-sdk
- axios
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。