详解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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
JS实现网页烟花动画效果
Mar 10 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
JS 网站性能优化笔记
2011/05/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
python绘制随机网络图形示例
2019/11/21 Python
Python3 读取Word文件方式
2020/02/13 Python
Python os库常用操作代码汇总
2020/11/03 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
生物技术研究生自荐信
2013/11/12 职场文书
追悼会上的答谢词
2014/01/10 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
讲解员培训方案
2014/05/04 职场文书
诚实守信演讲稿
2014/09/01 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS