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


Posted in Javascript onFebruary 22, 2019

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 相关文章推荐
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
javascript如何定义对象数组
Jun 07 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
详解关于Vuex的action传入多个参数的问题
Feb 22 #Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 #Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 #Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 #Javascript
浅谈Node框架接入ELK实践总结
Feb 22 #Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 #Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 #Javascript
You might like
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
JS实现分页导航效果
2020/02/19 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
Python 异常处理实例详解
2014/03/12 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
python判断输入日期为第几天的实例
2018/11/13 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
详解python持久化文件读写
2019/04/06 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
美国网上订购鲜花:FTD
2016/09/23 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
SQL面试题
2013/04/30 面试题
中学生操行评语大全
2014/04/24 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
初中家长评语大全
2014/12/26 职场文书