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

 更新时间:2019年02月22日 14:42:14   作者:symeny  
这篇文章主要介绍了详解单页面路由工程使用微信分享及二次分享解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

相关文章

  • 一文搞懂JavaScript中bind,apply,call的实现

    一文搞懂JavaScript中bind,apply,call的实现

    bind、call和apply都是Function原型链上面的方法,因此不管是使用function声明的函数,还是箭头函数都可以直接调用。本文就带你看看如何实现bind、call和apply
    2022-06-06
  • BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

    BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

    最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,下面给大家分享下解决方案
    2016-12-12
  • 详解JS数据类型的值拷贝函数(深拷贝)

    详解JS数据类型的值拷贝函数(深拷贝)

    这篇文章主要介绍了详解JS数据类型的值拷贝函数(深拷贝)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-07-07
  • uniapp打包成微信小程序的详细过程

    uniapp打包成微信小程序的详细过程

    微信小程序的出现给我们提供了一种使用应用的新方式和体验,下面这篇文章主要给大家介绍了关于uniapp打包成微信小程序的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Raphael带文本标签可拖动的图形实现代码

    Raphael带文本标签可拖动的图形实现代码

    Javascript和Raphael顺便学习了一下,主要是为了实现一个可拖动的矩形同时矩形上还得显示标签,网上关于这方面的知识提的很是于是本人自不量力写了一下,感兴趣的你可不要错过了哈,希望可以帮助到你
    2013-02-02
  • 加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)

    加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)

    本篇文章是对加载远程图片时,经常因为缓存而得不到更新的解决方法进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • 详解操作cookie的原生方法cookieStore

    详解操作cookie的原生方法cookieStore

    我们平时对 cookie 的增删改查等操作,都是在操作document.cookie,这里我们介绍一个新方法cookieStore。
    2021-05-05
  • 如何使用js获取扩展名详解

    如何使用js获取扩展名详解

    给你一个文件名,你能获得它的扩展名吗?这篇文章主要给大家介绍了关于如何使用js获取扩展名的相关资料,文中介绍了几种实现的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02
  • 微信小程序获取用户手机号码的详细步骤

    微信小程序获取用户手机号码的详细步骤

    最近改了一个公司项目,新增加了一个获取用户手机号功能,里面用到了关于获取用户信息和用户手机号的功能,下面这篇文章主要给大家介绍了关于微信小程序获取用户手机号码的相关资料,需要的朋友可以参考下
    2022-07-07
  • 小程序指纹验证的实现代码

    小程序指纹验证的实现代码

    这篇文章主要介绍了小程序指纹验证的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论