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


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 设计模式学习 Factory
Jul 29 Javascript
jQuery 事件队列调整方法
Sep 18 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
关于JS中prototype的理解
Sep 07 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
JS功能代码集锦
May 04 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
详解关于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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
Python中decorator使用实例
2015/04/14 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Python unittest框架操作实例解析
2020/04/13 Python
python中tab键是什么意思
2020/06/18 Python
django和flask哪个值得研究学习
2020/07/31 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
初二政治教学反思
2014/01/12 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
质量保证书范本
2014/04/29 职场文书
管理标语大全
2014/06/24 职场文书
财务总监岗位职责
2015/02/03 职场文书
DIY胆机必读:各国电子管评价
2022/04/06 无线电
Golang入门之计时器
2022/05/04 Golang