详解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也能包含文件
Oct 26 Javascript
初学Javascript的一些总结
Nov 03 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 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
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
浅谈node.js中async异步编程
2015/10/22 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
浅谈React高阶组件
2018/03/28 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
js实现点击烟花特效
2020/10/14 Javascript
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
在vscode中配置python环境过程解析
2019/09/28 Python
Python列表list操作相关知识小结
2020/01/29 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
办公室文员自荐书
2014/02/03 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
年检委托书
2014/08/30 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
2014年体育工作总结
2014/11/24 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书