vue IOSurl链接不对微信分享签名失败，二次刷新就能分享成功的BUG

html+css+js网页设计

于 2021-10-08 15:19:14 发布

阅读量707

点赞数

CC 4.0 BY-SA版权

分类专栏：微信分享bug 文章标签： javascript

本文链接：https://blog.csdn.net/qq_42431718/article/details/120652643

在iOS设备上，使用Vue开发的应用遇到URL问题，导致微信分享时签名失败。用户需要二次刷新页面才能正常分享。这个问题可能是由于Vue路由的处理方式与微信分享机制不兼容所引起的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//记录进入app时的url
   if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
   
   
        window.entryUrl = location.href.split('#')

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

html+css+js网页设计

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

IOS 微信首次分享签名失败，二次刷新后就能成功的BUG（调用微信jssdk 时报错： “invalid signature“的解决方案）

weixin_43956521的博客

01-27

2807

问题：在IOS手机微信端，从A页面(http://a.com/A) 跳转到B页面(http://a.com/B)后，B页面进行分享时就会报签名（invalid signature）错误。分析：从A页面跳转到B页面时，由于是使用vue-router（react-router-dom）切换，都是操作浏览器历史记录，所以ios端微信浏览器锁定的url的还是A页面的url。这个时候，是不是很多人都会认为，既然页面路由变化了，那我重新请求下url签名接口，不就可以了。呵呵呵，你会发现报错：invalid si

Vue3 iOS微信JSSDK授权签名错误及图片选择兼容

最新发布

葫芦娃

11-05

1143

Vue3+JSSDK，iOS下wx.config的invalid signature签名错误修复及图片选择兼容。

参与评论您还未登录，请先登录后发表或查看评论

vue ios端微信偶尔签名无效问题

qq_28084837的博客

09-01

627

问题原因： vueRouter History模式 ios微信浏览器下微信只会记录第一次进入到页面的url，即时路由发生跳转（push）只要不刷新微信当前记录的url还是第一次进入页面的时候的url 所以传入的url和真实的url不对应导致签名错误解决方法：将第一次进入页面的url保存起来每次签名的时候使用该保存的url地址 router.afterEach((to, from) => { // window.__wxjs_is_wkwebview // tru..

微信公众号jssdk ios第一次签名失败，刷新后签名成功

落落Plus的博客

08-17

2180

问题原因：ios打开页面，整个项目的签名，只需要签名一次所以需要判系统； ios端只需要在项目第一次打开调用签名，所用到的JSSDK接口，都写在 jsApiList里，具体接口执行方法，放在需要执行的时候。 ...

详解IOS微信上Vue单页面应用JSSDK签名失败解决方案

12-10

背景手机型号：型号：iphone 7 / iphone xs max 版本：ios 10.3.1 / ios 12.1 微信版本：WeChat 6.7.3 问题还原： Vue应用(vue-router)上使用history模式，在某个页面内调用微信JSSDK相关API，如扫码、分享等，使用当前页面URL总会出现签名错误(invalid signature)，导致API调用失败。问题根源 Vue-Router进行路由切换的时候，总是会操作浏览器的历史记录，从而响应页面URL变化。在JSSDK文档页面有这么一句话: 同一个url仅需调用一次，对于变化url的SPA的web

vue项目微信H5页面,解决IOS端第一次调取微信扫一扫失败,需要需要刷新页面后才能成功的问题

JCAL123的博客

06-05

3018

vue项目微信H5页面,解决IOS端第一次调取微信扫一扫失败,需要需要刷新页面后才能成功的问题在App.vue文件中获取到页面到URL (微信调取扫一扫会用到) URL = location.href.split('#')[0] 可以用缓存记住这个URL在调取微信扫一扫到时候再取出来使用即获取签名等信息的时候 try { let res = await this.$http.post('pay/signJsApi',{ url: URL //上面记住的URL

vue在微信里面的兼容问题_Vue单页面应用+微信网页开发·填坑小记

weixin_39693662的博客

12-22

712

上两个星期做了一个公司用于推广的小活动，选择了Vue的单页面应用。【Vue单页面应用+微信网页开发】套餐赠送了超值大坑，在这里给大家分享一下我的辛酸，啊不，填坑记录。主要是前端填坑的实现，后台方面没有太多涉猎，小白所记，不正确、不准确的还请多多指教。坑的方位：1、微信网页授权登录(前后端分离导致的跨域问题)2、接入JS-SDK实现分享等功能(history模式副带的页面刷新问题和iOS、Andro...

IOS微信分享问题（h5页面），签名报错invalid signature

易函123

09-10

1174

前言网上方法差不多都看了，有个解决方法：window.location.href;确实有效，但是必须进入页面后再次刷新页面才能签名成功；用时间戳也不能解决刷新问题方法在mian.js里面全局路由守卫后置钩子afterEach，主动修改url添加链接描述 window.router=router； router.afterEach(to => { const u = navigator.userAgent.toLowerCase(); if ( u.indexOf("like ma

vue h5移动端签名错误 ios端签名错误分享刷新后分享链接到首页面等微信分享的坑微信支付ios url支付失败无法调起当前页面未注册

baidu_39040364的博客

05-18

1881

啊啊啊

vuejs构建的单页面应用history模式子页面微信分享在iOS中遇到的问题

weixin_33898233的博客

02-08

658

问题描述在用vuejs做的SPA单页面应用，router模式为history模式，应用是个商城，在进入商品详情页时，第一次进入页面提示签名无效，手动刷新一下就ok，很是烦躁，经过不懈努力，终于解决。问题分析微信官方js-sdk文档上是这么写的然而并没有提到iOS，通过在真机上测试，问题应该是iOS和安卓处理URL的方式不同，安卓...

基于IOS端微信分享失效的踩坑及解决方法

01-20

最近的一个公众号是基于vue的spa应用，在接入微信分享和微信语音的时候出现了：在Android上一切正常，但是在ios端调用wx.config的时候总是失败，去翻了官方文档也并没有找到解决方案，最后在测试中发现是因为初始化的时候传入的URL的问题。具体过程如下：微信config接口配置，官方文档如下：所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败

微信jssdk踩坑之签名错误invalid signature

01-19

最近做公众号网页开发，使用微信 jssdk 页面签名时 IOS 中一直报错，这才刚开始就被这只拦路虎拦住了，报错如下：然而 Android 和开发者工具中好得很，没有任何问题：既然提示签名非法，那就是签名有问题咯，但是同样的接口，为什么Android没问题？是真是假还是用官方的签名校验工具验证下：生成的签名完全没有问题，这就奇怪了，按照网上说的 url 改成如下方式也不行： url = [removed].href.split('#')[0] 突然看到网上有人说是因为 SPA 的原因，经过几番测试，问题锁定在了 SPA 。先来解释下为什么会这样，我们使用 Vue

Vue项目history模式下微信分享爬坑总结

12-10

每回遇到微信分享都是一个坑，目前的商城项目使用Vue开发，采用history的路由模式，配置微信分享又遇到了很多问题，最后终于解决了，现将解决的过程分享一下。技术要点 Vue，history 常见问题及说明 debug模式下报false 这个没得说，就是调用wx.config方法的参数错误造成的，请确认以下事项：是否成功绑定了域名（域名校验文件要能被访问到）使用最新的js-sdk文件，因为微信会改部分api config方法的参数是否传正确了（拼写错误、大小写…）需要使用的方法是否写在了jsApiList中获取签名的url需要decodeURIComponent

vue 历史模式下ios微信分享失败

weixin_33414202的博客

06-08

569

问题描述: 进入页面点击分享,分享失败,刷新后可正常分享原因：在vue-router模式为history的情况下, 由于IOS微信浏览器在验证微信jssdk签名时,需要的URL是第一次进入该应用时的URL, 并不是当前页面的URL, 所以这里需要针对IOS微信浏览器作特殊处理. 解决方案: beforeRouteEnter(to, from, next) { // 修复iOS版微信HTML5 History兼容性问题 if (to.path !== lo

vue 链接，安卓微信分享不成功，IOS 分享成功问题记录

gxh_wuya的博客

07-11

715

安卓手机二次分享不成功，但是在 IOS 中却成功的； 1、有的文章写的是改变一下url，例如： history.pushState(null, null, url); location.reload(); 这种方式有时会生效有时不会生效 2、有的文章写的是在微信执行二次分享的时候会在url路径后面添加参数，去掉这个参数就可以，但是我验证了一下不管用 3、延迟请求微信分享的方法目前...

vue在微信分享和分享当前页面再次分享显示签名失败的处理

Jimmy的前端博客

09-14

4430

申明：文章属博主原创，如有转载请经过博主同意，否则必将追究责任。准备工作： 1.绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看对应的接口权限。 2.引入微信jssdk 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1....

Vue微信自定义分享时安卓系统config:ok，ios系统config:invalidsignature签名错误的解决办法

胖大海

03-16

1674

这两天在做微信自定义分享的需求，使用JS-SDK的页面注入配置信息时安卓系统config:ok，ios系统config:invalid signature签名错误。然后去查微信jssdk的文档，里面所说的config:invalid signature可能原因你都一个个查验过发现没有问题，但是还是提示签名错误，是不是很抓狂很蛋疼？？？然后你再去查请求配置信息时的动态URL是否有问题，你会发现安卓ios打印出来的url都是正确的，问题究竟出在哪里呢？？？就问你难不难受！！！安卓系统签名没问题，ios系统签

解决公众号开发安卓正常 iOS调微信SDK失败签名错误

Zsl_qianduan的博客

10-16

1681

解决公众号开发安卓正常 iOS调微信SDK失败签名错误上图为debug 提示项目场景：公众号网页开发问题描述：项目在安卓上顺利运行在iOS 无法调起微信SDK 报错为签名错误原因分析：在安卓能跑通说明后端的签名算法正确问题还在前端百度发现微信浏览器中 iOS使用的wkwebview内核不会对vue-router反应只记录了第一次进入页面地址微信授权放在APP.vue中使用localtion的方法或方法强行重置历史记录会导致APP.vue刷新页面不停循环跳转

【Vue】17.vue-router history模式下的微信分享遇到的坑

返璞归真

03-04

2205

最近用vue-cli3做微信公众号，使用了hiatory模式，其中也是波折不断，自己也是郁闷了好几天才把问题解决掉。首先先安装微信js-sdk npm install weixin-js-sdk --save 然后在哪个页面里面用到微信的js api就把包导入进去 import wx from 'weixin-js-sdk' 基本的配置都好了以后，我们就来说说微信分享过程中遇到的...

Vue开发微信H5分享在IOS上签名失败的解决策略

"Vue开发微信H5页面时，遇到在Android设备上微信分享签名正常，但在iOS设备上签名失效的问题。问题主要出现在Vue项目中使用History模式的路由。分享需求是从首页进入活动详情页，并在详情页分享内容，通常采用params...