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


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 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
php跨域调用json的例子
Nov 13 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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
隐性调用php程序的方法
2009/03/09 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
python-地图可视化组件folium的操作
2020/12/14 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
入党自我评价范文
2014/02/02 职场文书
实习协议书范本
2014/04/22 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis