详解单页面路由工程使用微信分享及二次分享解决方案

网络编程 2024/9/22 佚名

3 1 2

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

微信二次分享,单页面使用微信分享

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“详解单页面路由工程使用微信分享及二次分享解决方案”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月22日

详解单页面路由工程使用微信分享及二次分享解决方案

Vue动态组件与异步组件实例详解

详解关于Vuex的action传入多个参数的问题

评论“详解单页面路由工程使用微信分享及二次分享解决方案”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接