ios设备微信公众号网页二次分享问题总结

关于微信二次分享,自定义分享参数不生效问题 在a分享给b之后,然后a打开和b的聊天记录,然后点击刚刚分享的卡片,在去分享的时候,设置的分享参数信息就失效了,在项目的app文件中记录一下当前的url路径,存储到本地,然后判断是不是ios,如果是的话,取本地的缓存地址。,安卓无问题,(b打开刚刚分享的卡片一样不行,自定义的分享参数没生效,提示失败)👆上面的文章给了我很好的思路,于是排查自己的项目问题。... 阅读详情

在之前的分销商城项目中,用到了微信分享的功能,在ios设备中出现了二次分享失败的问题。

所谓二次分享,就是A用户在公众号页面中分享一次后,B用户通过分享链接进入网页,再次分享。在安卓设备中,不存在二次分享失败的情况,这种情况目前只发现出现在ios设备中。

为什么安卓设备中不存在这个问题我在这里不进研究了,就ios的问题我做一下总结。

项目框架

本次项目使用的是vue框架,整体结构使用了vue-element-ui,路由模式为history。本次出现的问题可能是由于vue路由到知道,也可能是其他原因,记录下来以供参考。

问题分析

首先微信分享功能在ios设备和安卓设备中本来就存在区别,简单来说安卓设备需要使用当前页面获取签名,而ios设备不能使用当前页面获取签名,而应该是使用进入项目的第一个页面(其实也不全是如此)的地址。基于此情况,如果是ios设备的话,在跳转路由的时候获取了第一个页面的地址作为签名使用的地址。在第一次分享时这样是有效的,但是在分享链接进入项目后继续分享,则不能正常获取签名,造成这个问题的原因就是因为使用了错误的url。

深究原因以及解决方法

那么为什么第一次获取签名的时候没有问题,而第二次的时候就出现问题了呢?我根据项目和微信的特点来分析有两点原因:

1.微信在二次分享的时候,会在自定义的分享链接后加上参数表明此次分享是二次分享。增加的内容是from=groupmessage&isappinstalled=0这两个参数。在签名时这两个参数是不能使用的,所以将这两个参数去掉即可,由于项目中我还传递了其他参数,所以使用了以下方法解决。

        let userAgent = navigator.userAgent;
        let url = '';
        //判断是否是ios设备
        if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
          url = window.sessionStorage.getItem('originUrl')
        //判断是否存在from参数,如果存在,只保留&from之前的链接
          if(url.includes("&from")){
            url = url.split("&from")[0]
          }
        }
        else {
          url = location.href
        }

2.由于分享链接进入的第一个页面需要跳转到一个鉴权页面,所以在这时候获取签名的地址很有可能是鉴权页面的地址,而非首页面的地址,所以我尝试在二次分享的时候使用这个鉴权页面地址获取签名,结果是可行的。

首页跳转鉴权页面地址:

在鉴权页面获取地址存到缓存以备获取签名时使用。因为已经获取到首页面了,所以在这个鉴权页面判断已经保存的缓存中的首地址是否是是jump-index页面(本项目中这个页面只有二次分享时会使用到,所以用作标识)。

      let userAgent = navigator.userAgent;
      let winStorage = window.sessionStorage;
      if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
        //如果首页面是jump-index页面,那么将本页面保存到缓存中,替换首页面
        if(winStorage.originUrl.includes("jump-index")){
          sessionStorage.setItem('originUrl', location.href )  // 用于ios分享
        }
      }

总结

以上两个方面都是造成ios二次分享失败的原因,这两个部分都需要着重注意。造成问题得原因除了二次分享一定会出现的额外参数外,window.href方法重定向地址也是关键原因,应该是因为重定向了地址,所以导致需要使用重定向后的地址获取签名。

记录vue做微信自定义分享的一些问题 前言 众所周知,在使用vue做项目的时候,微信自定义分享一直是一个坑,只是ios上坑明显的多。 然后每次遇到问题都要度娘很久。 奇怪的是貌似和很多人遇到的问题一样,但是他们写的解决方案都没办法直接解决我遇到的问题。 这里就记录一下遇到过的一些坑,和解决方式。 目前项目里面,安卓和ios上面的自定义分享已经没有什么问题了。 问题及解决方式 hash模式 在微信的官方文档中,提到关于jsapi_tic... 阅读详情

相关推荐

vue/uniapp - 强力解决微信分享链接URL网页或网站文章到微信好友或微信朋友圈时,分享参数图片缩略图不显示问题,解决微信分享链接不能显示缩略(微信分享缩略图无法显示的解决办法,详细解决方案)

vue,uni-app,微信公众号网页,分享网页链接到微信朋友圈,分享链接,在微信中不显示缩略图,自定义缩略图不显示怎么办,分享卡片缩略图偶尔显示不出,微信分享网页链接缩略图不显示,微信分享缩略图无法显示的解决办法,解决微信分享链接不能显示缩略,微信分享朋友圈没有获取标题描述,VUE微信分享链接或网站文章到微信朋友圈,缩略图片不显示,h5微信分享只是链接,没有卡片,微信分享网页 图标不显示,微信分享链接的缩略图和标题,微信分享链接或网站文章到微信朋友圈,缩略图片不显示解决,如何在微信朋友圈分享网页内容的时候

✅ 精选推荐文章 1万+

ios微信公众号分享自定义分享无效

微信H5分享原理:是前端发送当前url到服务端, 服务端把url进行加密生成签名, 在微信进行签名比对,微信那边也同理取点击分享的页面获取页面url进行生成签名,如果配置没有问题,签名通过注册成功可进行自定义分享;微信那边ios与Android获取url方式不同,Android是每加载一个页面微信都会获取当前页面url,解决方法:判断机型如果是ios在第一次进入的时候用全局变量记录下url,在页面注册分享时把获取的url发送给服务端就好了。此示列是uniapp 使用vue同理。

weixin_48495574的博客 1934

vue微信分享出来的链接点开是首页问题的解决方法

主要为大家详细介绍了vue微信分享出来的链接点开是首页问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

JS-SDK接入以及微信二次分享

如果是 html 的静态页面在前端通过 ajax 将url传到后台签名,前端需要用 js 获取当前页面除去’#‘hash部分的链接(可用location.href.split(’#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。如果这里获取到的 signature 和你得出的 signature 一致,就证明你的 signature 是正确的。

m0_44973790的博客 3613

四阶龙格库塔方法求解一次常微分方程组

四阶龙格库塔方法求解一次常微分方程组一、写在前面二、四阶龙格库塔方法三、使用四阶龙格库塔方法求解一次常微分方程组 一、写在前面 龙格库塔方法是数值求解常微分非线性方程的有利工具,计算精度较高,通过缩短步进距离和增加阶数可以进一步控制误差范围。工程上较为常用的是四阶龙格库塔算法(R-K4),在计算收敛的情况下往往可以得到比较好的结果。 二、四阶龙格库塔方法 这里简单介绍一下算法的具体实现过程,不做详细的推导。其求解的问题是形如方程: y˙=f(y,t),其中t∈[t0,t1]初值y(t0)=c0 \dot{y

HelloWorldTM的博客 2万+

别再死记硬背参数了!用ADS手把手教你仿真一个4GHz镜像抑制混频器(附完整工程文件)

本文详细解析了4GHz镜像抑制混频器的ADS仿真全流程,从理论到实践,涵盖混频器设计基础、ADS工程搭建、二极管选型、非线性仿真及性能优化。通过实战案例,帮助工程师掌握关键参数平衡与调试技巧,提升射频电路设计效率。

weixin_42552716的博客 328

解决安卓端 微信点击分享链接(含重定向)发两次请求的解决方案

项目场景: 在公众号分享的产品点击时发现会发两次请求到服务器,在一些业务中,我们需要新建站内账号只需要用户发一次请求即可,最高的解决方案肯定是前端控制,我在这给出了一个后台的解决方案,即采用过期策略的Map来实现,可以查看这个文章[过期策略map](https://blog.csdn.net/qq_41808217/article/details/111246766) 解决方案: ExpiryMap expiryMap = new ExpiryMap<String, Integer>

CC学java 874

osgEarth实战:5分钟搞定3DTiles模型加载(附完整配置代码)

本文提供了一份osgEarth加载3DTiles模型的实战指南。通过详解核心Earth文件配置与精简的C++集成代码,帮助开发者快速在三维地球场景中集成倾斜摄影与BIM等海量模型,并分享了性能调优与常见问题排查技巧,有效提升开发效率。

jjj34的博客 473

ios的二次分享不展示图片,描述,显示链接

最近项目需要接入微信分享,按照微信的分享的流程走了一遍,跑一遍发现在安卓下毫无问题,但是iOS 下就出现了诡异的二次分享不出现图片,描述啦! 项目眼看上线还出现这种完了赶紧找资料;各种debug,console都是正确的。有说HTTP换HTTPS的。不是问题根本没解决。无意间看到需要把url传给后台的要把字符串作为 URI 组件进行编码。把代码赶紧试试 完美解决! ...

m18565890306的博客 1486

海鸥派OpenEuler开发板实战:从烧写到SSH连接的完整指南

本文提供海鸥派OpenEuler开发板从开箱到SSH远程连接的完整实战指南。详细介绍了基于海思SD3403/SS928芯片的算力开发板系统烧写、存储扩容、网络配置等关键步骤,帮助开发者快速上手这款AI边缘计算设备,并实现高效的远程开发与管理。

ruby5的博客 1114

在 Windows 上安装 OpenCV – C++ / Python

而且,安装并不是一件容易的事。这些安装程序仅适用于安装 OpenCV for C++。如果您想安装适用于 Python 的 OpenCV,您将在博客后面找到相关信息。在这篇博文中,我们将在 Windows 上安装适用于 C++ 和 Python 的 OpenCV。C++ 安装是在自定义安装 exe 文件的帮助下完成的。而Python的安装是通过Anaconda完成的。从源代码安装 OpenCV 需要花费大量时间。根据您的硬件和安装配置,该过程可能需要 5 分钟到 2 小时不等。

Demondai999的博客 2079

微信公众号网页开发-Vue项目坑点分析

项目背景 该系统为商品推广系统,微信交互涉及网页授权和网页分享,年前使用django框架做了基础版,节后项目升级,功能更加丰富,使用vue框架做前后端分离开发,前后端分离开发提升了开发效率,也埋藏了很多坑点。。。 坑点分析及解决 开发前需要进入公众号后台配置"JS接口安全域名"及“授权回调页面域名”,如果服务端要获取token,还需要配置"IP白名单",详细信息可以查阅官网。 微信公众号官方文档:微信公众平台开发概述 | 微信开放文档微信开发者平台文档https://developers.weixi

山水好风光的博客 3260

基于C++和Qt开发IEC104规约主站调试软件(第二章)

本章节主要讲解iec104主站软件界面设计和从站的连接功能以及部分功能代码的展示。

半青年的博客 852

ios与android机制,微信分享——ios和安卓机制居然不一样!

之前分享过一篇转载的微信分享填坑文章基本涵盖了微信分享功能开发的基本操作。实际项目中,在做微信分享追踪的时候,遇到了一个百思不得其解的问题。在加入了用户分享追踪功能之后,页面已经加载完成的情况下,安卓分享功能没有任何问题,ios却总是分享失败。关于ios和安卓设备的差别项目需求是,我们需要对用户的分享行为做追踪,对用户从哪个人分享的链接进来的做记录。所以每个用户有一个唯一的分享码。用户A分享出去,...

weixin_42297439的博客 650

Unitree G1仿人机器人协同搬箱:从仿真搭建到多机协同部署完整指南

Unitree G1仿人机器人协同搬箱技术方案摘要 本文提供了一套完整的Unitree G1人形机器人协同搬箱解决方案,涵盖从仿真环境搭建到多机协同部署的全流程。核心内容包括: 双仿真环境配置:同时搭建Gazebo+ROS Noetic基础仿真环境与Isaac Gym+Mujoco高性能RL训练环境,支持Sim2Sim迁移验证 训练框架搭建:详细配置unitree_rl_gym框架,提供PPO算法定制化训练流程和参数优化方案 数据集应用:整合宇树开源真机数据集(UnifoLM-WBT-Dataset)~~~

huanghm88的专栏 463

滑模观测器与锁相环结合应用:让电机“无感”也能精准旋转的奥秘

本文介绍了永磁同步电机无传感器控制中的滑模观测器(SMO)结合锁相环(PLL)技术。SMO通过创建虚拟电机模型,利用电流误差产生控制信号来估计反电动势;PLL则从反电动势中解码转子位置和速度信息。该组合方案兼具SMO的鲁棒性和PLL的高精度,计算量小且硬件要求低。文章详细阐述了原理、数学模型、参数整定方法及实际实现技巧,包括离散化处理、符号函数替代等优化手段,并分析了低速性能限制、抖振问题等常见挑战及解决方案。最后指出该技术未来将与人工智能、多观测器融合等方向结合发展。

汽车软件开发 189

H5微信分享自定义实战:从零封装wxSDK到解决iOS签名问题

本文详细介绍了H5微信分享自定义功能的完整实现方案,重点讲解了如何从零封装wxSDK工具函数以解决iOS签名校验等常见问题。通过分析jweixin-1.6.0的集成、前后端签名流程、以及针对iOS设备URL编码差异的实战避坑指南,帮助开发者构建稳定可靠的微信分享功能,提升H5页面在营销活动中的传播效果。

weixin_29015801的博客 399

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

微信H5页面ios分享失效

最近开发一个微信H5页面,需要添加分享。 ios分享出去就描述变链接,缩略图也变连接,但android一切正常。   在Android上面微信分享一切正常,但是在iOS上面分享出去的却是错误的,在网上查找了很多东西。总结了下一下 1.iOS的分享图片不能超过32kb。看了下我的分享图片,没超出32kb,所以不是这个问题。&lt;/p&gt; 2.link参数带中文或者特殊字符,带中文的u...

wangweiruning的博客 5750

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

解决微信H5网页分享报错:fail link must be in js secure domain list

fail link must be in js secure domain list //失败链接必须在js安全域列表 正常来说碰到这个问题,是分享的链接没有在公众号的后台配置JS接口安全域名,配置完就不会报这个错误了。 但是还有一种情况就是,你分享链接的地址上有带中文的参数,这样在安卓上分享是可以正常分享,但是在ios上会出现报错,导致你分享标题、描述、图片等都失效了: ...

涛々的技术博客 9523

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

h5公众号分享朋友、朋友圈

前言 微信分享(使用微信JS-SDK)、微信JS-SDK是面向网页开发者提供的基于微信内的网页开发工具包。JSSDK使用官方文档(官方使用手册) 详解一下我的使用流程以及踩坑记录,我做的项目属于公众号h5项目,今天突然接到需求对主推的某两个页面自定义分享内容,之前做过微信小程序和支付小程序的分享,都是直接使用特定的API修改标题、描述、图片、链接,想着贼简单,预估工时共要了一天,一把辛酸泪~~ ...

zwy1231的博客 2954

【Vue】H5浏览器实现【微信分享】功能的终极解决方案

分享H5浏览器完成微信分享卡片功能,特别需要注意:iOS设备出现invalid signature签名错误,很可能是因为 wx.config中的realAuthUrl与当前页面url不一致造成的!

小安驾到的博客 1万+

修改 placeholder 样式,placeholder 换行 以及iOS 上设置placeholder被遮挡问题解决

一、修改placeholder样式 通过选择器就可以简单的修改该placeholder的样式 input::placeholder{ font-size:14px; color: #666666; } 二、placeholder 换行 在input 里面很少用到,input 就只有一行而已,多行的话就会使用textarea标签,确实在textarea标签里面如何让placehol...

baidu_41601299的博客 3123

微信公众号页面返回上一层_解决微信返回上一页之后,页面不刷新

在Debug模式下,发现在iOS浏览器中,返回上一页后,页面的 JS 代码并未执行。于是进一步猜测可能是浏览器内部机制导致——iOS为了提升浏览网页的效率,可能给已浏览过的网页添加一个类似快照的东西,当点击返回按钮后,直接调用快照展示给用户,省去了执行JS这一步骤(纯静态文件依然被缓存)。在B页面修改的内容,返回到A时并没有更新新的内容,必须手动刷新。页面数据是通过 ajax 请求后台数据,通过链接跳到下一页,然后返回,所以项目中执行隐藏分享qq,空间。返回的数据,发现数据是上一个页面最后请求的数据。

weixin_39744736的博客 1156

php微信公众号分享失败,微信JS-sdk分享到朋友圈无效

代码如下:wx.ready(function(){wx.onMenuShareTimeline({title: 'wechat-php-sdk博客',desc: '微信公众平台php开发包,细化各项接口操作,支持链式调用。项目创建人:dodgepudding 项目地址:https://github.com/dodgepudding/wechat-php-sdk',link: 'http://bin...

weixin_35862131的博客 305

微信页面兼容性问题

最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。 1、ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。 出现原因分析:通常我们习...

weixin_43818835的博客 1008

vue 微信公众号 二维码 ios系统长按没有反应,识别不了二维码

最近在做项目,有一个需要长按二维码,直接识别二维码来关注公众号,写好以后,安卓手机可以使用,但是苹果手机长按没有一点反应,就去查找解决方法,找了很多,有说 1、是存放二维码的页面,不要放多个; 2、还有是说,放二维码的页面不能有position:fixed(固定定位); 3、是index.html页面meta缩放问题了; 4、什么history模式了; 5、什么在img父元素div加背景二维码图片了 以上这些方法,除了第二种,其他都已经尝试,没有达到效果。 我的项目是,父组件里面调用了子组件,

qq_39650208的博客 1941
上一篇: canvas入门
下一篇: 模仿element-ui封装vue组件库(一)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值