详解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 相关文章推荐
EasyUI中的tree用法介绍
Nov 01 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
JS实现吸顶特效
Jan 08 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
Python使用minidom读写xml的方法
2015/06/03 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
Python常见的pandas用法demo示例
2019/03/16 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
Python logging设置和logger解析
2019/08/28 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
作为网站管理者应当如何防范XSS
2014/08/16 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
《观察物体》教学反思
2016/02/17 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL