单页面路由工程使用微信分享及二次分享解决方案
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
单页面路由工程使用微信分享及二次分享解决方案相关推荐
- asp.net获取浏览器的唯一标识_vue单页面应用如何在微信浏览器里进行网页授权获取用户信息
前言 在vue单页面应用比较流行的时代,如何把vue应用和微信公众号两者结合在一起也是比较常见的功能.如果仅仅是把一个vue应用放在公众号上,没有进行额外的微信功能开发,如:获取用户信息,支付,分享等 ...
- 解决微信公众号二次分享的BUG记录
公众号页面二次分享分享会丢失自定义的图片和标题:以下是整个过程的记录------ 修改前的代码 $(function () {shareInit();})//分享初始化function shareIn ...
- 微信自定义分享、二次分享解决方案
转自:https://www.cnblogs.com/backtozero/p/7064247.html 前言 刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题, ...
- 微信分享,二次分享(移动web端)
create-at 2019-02-16 引入微信JS-SDK http://res.wx.qq.com/open/js/... (当前最新版本) js 相关代码 (移动端实测, 需做老版本兼容) f ...
- 单页面应用在微信服务号下的登录流程
最近我们的小程序涉及到虚拟支付的问题,在ios端的支付被封掉了?,所以有了在服务号上搞一套H5版的小程序的需求.由于我们小程序是mpvue写的,为了尽量复用之前的样式和逻辑,选择了前后端分离的模式,于 ...
- 微信二次分享解决图标文案失效方案
转自:https://www.cnblogs.com/backtozero/p/7064247.html 前言 刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题, ...
- ios设备微信公众号网页二次分享问题总结
在之前的分销商城项目中,用到了微信分享的功能,在ios设备中出现了二次分享失败的问题. 所谓二次分享,就是A用户在公众号页面中分享一次后,B用户通过分享链接进入网页,再次分享.在安卓设备中,不存在二次 ...
- 前端复盘: knockout + require + director 构建单页面程序
关注并将「趣谈前端」设为星标 每早08:30按时推送技术干货/优秀开源/技术思维 目前react,vue,angular等框架都支持单页面程序,最近在回顾一些知识,想起刚毕业的时候接触到knockou ...
- 你知道前端单页面路由是怎么实现的吗?
首先要学习一下history对象,history对象保存着用户的上网记录,从浏览器窗口打开的那一刻算起.出于安全的考虑,开发人员无法得知用户浏览过的URL.不过,借由用户访问过的页面列表,同样可以在不 ...
- 微信二次分享解决方案
最近项目中开发需要在微信端二次分享分享H5页面,但是第一次分享的时候安卓没有问题,ios有时成功有时失败,并且二次分享的时候安卓还是没有问题,ios一次成功都没有,后来查阅文档搜索资料终于解决了,一下 ...
最新文章
- netapp存储服务器文档,NetApp秘密开发服务器闪存?
- json-schema 简介
- python程序实例教程基础-Python程序设计案例教程——从入门到机器学习(微课版)...
- Linux IPC POSIX 消息队列
- struts2中把action中的值传递到jsp页面的例子
- boost::math模块使用 agm 以高精度计算 lemniscate 常量
- [html] iframe可以使用父页面中的资源吗(如:css、js等)?
- 两个ExtJs可视化设计器
- 使用物理硬盘_许迎果 第147期 机械硬盘的物理结构和逻辑结构
- Java图书管理系统练习程序(六)
- SPSS Modeler 神经网络实践案例(第十四章)
- go基础:xml解析
- 在centos上安装pycharm
- 无线移动通信技术快速发展历程和趋向(转)
- 吉林大学软件学院黄庆道《最优化算法》对偶单纯形使用大M法条件
- 手脱 FSG 1.0 壳
- 2018VMware虚拟机安装ghost win7系统正确方法
- snes9x 源码_仅64kb的SNES游戏如何制作优美的音乐
- CAD异常闪退的原因
- SaaS平台产品架构设计
热门文章
- 谁在使用我的网站——用户行为分析
- Media Queries移动设备样式
- 博文视点Open Party第10期:PPT专场
- js base64图片太大_JS实现base64图片下载 简易方法
- relu函数_激活函数解析:Sigmoid, tanh, Softmax, ReLU, Leaky ReLU
- android 呼吸灯权限_Android 呼吸灯效果
- 力扣-1046 最后一块石头的重量
- Jetpack 介绍
- Dart基础第7篇:函数的定义 可选参数 默认参数 命名参数
- Mybatis动态sql及性能优化-3