详解Vue开发微信H5微信分享签名失败问题解决方案


Posted in Javascript onAugust 09, 2018

关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题

问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时,在微信开发者工具上一切正常。在安卓上一切正常。 但是!!!在IOS上反复报签名错误。

以下是真机测试截图,划掉黑线的是我个人IOS设备分享出来一直是服务号,接着下面分享出来自定义内容是安卓分享正常,话不多说上图!!!!

详解Vue开发微信H5微信分享签名失败问题解决方案

我的代码:

详解Vue开发微信H5微信分享签名失败问题解决方案

详解Vue开发微信H5微信分享签名失败问题解决方案

需求描述:需要从首页进入活动详情页,然后在详情页分享详情页面内容。所以需要带参数传参,通常vue传参通过params,query,字符串拼接这三种方式进行跳转传参

问题分析:因为苹果分享会是调取签名失败是因为:苹果在微信中浏览器机制和安卓不同,有IOS缓存问题,和IOS对单页面的优化问题,通俗点说安卓进行页面跳转分享时会刷新当前的url,而苹果不会,苹果是通过历史记录进来的,不会刷新url所以会导致签名失败(这里解释的可能不够详细,可以去百度)。

因为需求只需要分享当前页面的时候有自定义内容,其他页面分享出去是公众号都无所谓,主要是活动,所以就用了如下解决办法!!!!

因为vue的history在IOS的微信分享时不会刷新,但是我们又要做自定义分享。我在网上也看了很多,比如什么beforerouteEnter的路由判断,或者写在Vue.prototype.Wxshare()的原型链中等,看起来都太麻烦,不够简单粗暴,但是这些方法可以好像可以做到判断每一个分享页面的自定义内容。而我只需要当前分享特定的单一页面,那么我们在A页面跳转B页面(需要分享的页面)就不用vue的history的push来跳转传参, 我们用!我们用!我们用!window.location.href="...." rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 来跳转传参,重要的事情说三遍!!!!

用:window.location.href="...." !!! window.location.href="...."!!! window.location.href="...."!!!下面是代码!!!

详解Vue开发微信H5微信分享签名失败问题解决方案

注释掉的部分是一开始我用params来传参的,这样就会出现我上面提到到在IOS上SPA页面不会刷新 url的问题,但是原生的window.location.href可以解决这个问题!!!这样在子页面我们在create生命周期去截取url中的字符串把需要的参数截取下来,赋值到data中去一样可以使用. 下面是子页面接收数据截取字符串(这里的截取字符串是直接复制找的,赶时间,你可以自己写,一次性截取3 个字符串)!!!

详解Vue开发微信H5微信分享签名失败问题解决方案

详解Vue开发微信H5微信分享签名失败问题解决方案

就这样我们的分享IOS需求就实现了,不需要在去改动我上面的微信分享配置的代码!!但是此方法个人想的只适用于分享特定页面,如果用户需要分享每一个页面不同的自定义内容,可以去网上找使用其他的路由守卫判断,或者用Hash模式来开发 (Hash模式我也不确定是否真的可以,有兴趣的可以尝试,尝试后欢迎留言!!)

以下是真机测试成功!

详解Vue开发微信H5微信分享签名失败问题解决方案 

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

Javascript 相关文章推荐
JavaScript控制Session操作方法
Jan 17 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
js实现数组转换成json
Jun 26 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
一文搞懂redux在react中的初步用法
Jun 09 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 #jQuery
详解在React中跨组件分发状态的三种方法
Aug 09 #Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 #jQuery
React中如何引入Angular组件详解
Aug 09 #Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 #jQuery
详解js的视频和音频采集
Aug 09 #Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 #Javascript
You might like
php获取post中的json数据的实现方法
2011/06/08 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
php 基础函数
2017/02/10 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
python 统计代码行数简单实例
2017/05/04 Python
python如何生成各种随机分布图
2018/08/27 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python中的数据结构比较
2019/05/13 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
如何删除一个表里面的重复行
2013/07/13 面试题
理工科学生的自我评价
2013/12/15 职场文书
2014年大学生自我评价
2014/01/19 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
抽奖活动主持词
2014/03/31 职场文书
小学家长学校培训材料
2014/08/24 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
教师师德师风整改措施
2014/10/24 职场文书