H5 ios环境微信分享的一些坑

UniApp跨端分享功能全解析:从API调用到实战优化 在移动应用开发中,分享功能是连接用户与社交网络的关键桥梁,其本质是通过调用系统或平台的原生能力,实现内容在不同应用间的传递。其技术原理在于对底层原生API(如iOS的UIActivityViewController、Android的Intent以及微信小程序的转发接口)进行统一封装与适配。这一功能的技术价值在于提升用户活跃度与内容传播效率,是应用增长的重要引擎。在跨端开发框架UniApp中,实现分享功能需要深入理解各平台(微信小程序、App、H5)的底层机制差异,并妥善处理图片路径、参数传递等常见问题。本文 阅读详情

安卓手机中微信分享可以正常分享,而iphone手机中微信分享只有第一次进入的页面能分享成功,路由切换后分享失败(签名错误),重新刷新一次又能正常分享。
原因是:安卓手机的url会随着路由切换变化,iphone手机却不会,iphone手机的url永远都是第一次进来页面的url(location.href获取的是正常的url)。

解决方案:
在分享接口中做一个判断,如果是ios设备一直用第一次进入页面的url去请求获取参数,安卓就是用当前的url获取,以下Vue.initialUrl是获取到的初始url,完美解决切换路由后ios微信分享失败的问题:
在这里插入图片描述
还有一种方案:
使用location.assign方法来做刷新页面,不会新增一个浏览记录,但是有可能会造成后退两次才能回到上一页的问题,不推荐使用这个方式
在这里插入图片描述

H5实现微信分享 背景 前篇文章介绍了公司业务需要,我们需要做一个H5端的商城,在微信内分享时发现,采用右上角分享,分享出去的样式很丑,基于此我们就接入微信自定义分享功能,来美化一波。(同样我只介绍前端需要的工作) 技术准备 1.首先项目引入微信JSSDK的JS文件,直接在项目的入口文件(public/index.html)文件引入就行。文档地址。 2.都2019了 项目基本都用的框架,所以没有用框架的自己单独引入... 阅读详情

相关推荐

H5 集成微信自定义分享(兼容 ios & android)

最近做 H5 集成微信分享踩了很多坑,多少辛酸泪只有经历了才能体会,仅以此篇文章记录其中的酸甜苦辣。

tzzdblog的博客 1306

(拿走不谢)H5微信分享时,在苹果手机分享一直不行,公开微信分享完整工具,以及微信地图

做微信分享时,在苹果手机分享一直不行,就尝试监听URL变化,发现不行。后来用刷新页面解决了。 watch: { $route(to, from) { /** * route是异步改变的,所以,在created()函数、mounted()函数,用this.route是异步改变的,所以,在created()函数、mounted()函数,用this.route是异步改变的,所以,在created()函数、mounted()函数,用this.route.fullPath获取的是 * 上一个页面的链接,不是当前页面的

公z号:职场爱学习 2823

开源短剧APP源码拆解:跨端架构、播放器设计与上线避坑指南

在短剧业务快速起量的当下,技术团队常面临多端覆盖与快速上线的双重压力。跨端开发框架通过一套代码编译到iOS、Android、微信小程序、H5及抖音小程序,成为降本增效的常见选择,其背后依赖条件编译机制来隔离平台差异,从而实现业务逻辑复用与原生能力兼容。短剧应用的核心功能围绕视频播放、付费解锁与分享裂变展开,播放器选型需兼顾稳定性与兼容性,而解锁状态的服务端校验、支付幂等处理以及记忆播放等细节,直接决定用户体验与留存。对于开发者而言,从开源项目中获取代码仅是起点,真正关键的是理解工程结构、处理原生环境配置、遵

weixin_42604188的博客 307

解决h5使用 jssdk做微信分享,ios分享内容地址不正确,刷新第二次就正确了

解决h5使用 jssdk做微信分享,ios分享内容地址不正确,刷新第二次就正确了 关于微信分享 ios出现无效的问题 在开发微信h5分享时出现了ios只会在初始化首页的时候进行初始化设置,后面相对个别页面进行特殊化配置的时候,比如跳转链接,图片的修改 在ios上无法生效,但在安卓上是有效的, 填坑之路 刚开始 一顿 Google 方法很多但是却没有效果, 使用了 一个方法 就是设置重定向。 结果,...

v_Guo的博客 4032

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

下面小编就为大家分享一篇基于IOS端微信分享失效的踩坑及解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

UPF2.1进阶指南:如何优雅地处理Hard Macro与Top-Level Port的电源意图

本文深入解析UPF2.1在复杂SoC设计中的高级电源意图建模,重点探讨Hard Macro与顶层端口的电源管理实战技巧。通过`power_model`和`set_port_attribute`的高级应用,解决第三方硬核IP电源建模不透明、顶层端口电源属性定义不当等工程难题,提供可靠的电源管理方案,确保芯片设计性能与功耗的精确控制。

weixin_30443747的博客 169

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

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

JCAL123的博客 3117

silvaco——GaN HEMT探索

上图为输出特性曲线 ,分别是在栅压为1v、3v、5v的情况下,可以看出在1v时器件处于截止状态,只有非常小近似于0的电流通过,随着栅压逐渐增大,沟道开启,产生漏极电流。上图为栅极漏电流曲线和转移特性曲线以及其提取的参数,可以看到阈值电压为=1.30249V,当栅压为0v时,Id=8.01032e-006,当栅压为5V时,Ig=3.11627e-006。albrct.n,低场迁移率模型,bn.albrct,an.albrct是albrct模型中的参数,可以由用户自己设定。lat.temp,晶格自热模型;

weixin_61913839的博客 7616

ios分享设置不生效原因大全;微信公众号H5分享不生效

1.只有IOS不生效 url链接问题 ios页面链接跳转不改变,导致获取到的url与当前url对不上 //在app.vue中记录 this.$store.commit('setshareurl',window.location.href.split('#')[0]) //使用时判断设备类型 使用app.vue中的记录 var isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios let urlShare = wi

夜雨风亭 3479

微波传感器 - 从原理到实战,解锁非接触感知新维度

本文深入解析微波传感器的工作原理,重点阐述了其基于多普勒效应的非接触感知机制,并对比了红外、超声波等技术的优劣。通过树莓派Pico与RCWL-0516模块的实战案例,展示了如何构建区域入侵检测器,并探讨了微波传感器在智能家居、工业自动化及汽车电子等领域的广阔应用前景。

weixin_29306571的博客 223

SAP物料分类账实战:从配置到月结的关键步骤(基于S/4HANA1909)

本文详细解析了在SAP S/4HANA 1909系统中,物料分类账从基础配置到月结操作的全流程。作为成本核算的核心,物料分类账通过多级价格确定实现实际成本核算,关键步骤包括激活物料分类账、配置自动过账科目(OBYC)、运行CKMLCP进行差异分摊与结算。文章旨在帮助财务与成本会计人员确保成本差异的准确归集与分摊,顺利完成月结。

weixin_28314575的博客 193

H5页面调用微信分享,iOS报错解决方案

最近做的H5页面页面按钮触发分享操作(针对iOS操作失败)踩坑记录: 基本有三种形式: 1.在route里面处理,每次跳转location重新赋值,页面刷新 弊端:当使用vuex的时候,刷新照成vuex丢失需要处理 router.beforeEach((to,from, next) =>{ const u = navigator.userAgent const isIOS = !!u.match(/\i[^;]+;(U;)? CPU.+Mac OS X/)//iOS终端 // 修复iOS版微信H

CD52276的博客 1193

【全解析 | PTA】浙大版《Python 程序设计》题目集-第一章

Python浙大版PTA题解

wzhh_的博客 5526

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

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

小安驾到的博客 1万+

46、搭建与配置FTP服务器全攻略

本文详细介绍了如何搭建与配置FTP服务器,以vsftpd为例,涵盖了FTP基础概念、安装步骤、服务控制、安全设置、用户权限管理、文件上传支持、互联网共享配置、客户端使用以及常见问题解决等内容。旨在帮助用户高效、安全地实现文件共享与管理。

time3的博客 88

​热电偶测温电路图(一)​

高精度热电偶测温电路图 此设计概括了提供传感器诊断所必需的抗混叠滤波器和偏置电阻器。此示例还提供了一种新颖的方式,即使用ADS1118上的板载温度传感器完成对系统的冷端补偿。对于热电偶线性化,此设计还提供了一种非常简单的、可以在大多数微控制器上实施的线性算法。 缺点就是太贵。 特性 测量K型热电偶温度 精度1°C 高精度/可重复性0.2°C 包含冷端补偿 包含软件算法 使用ADS111816位ADC(带PGA) 原理图/方框图 热电偶测温电路图(二) OP07构成的高稳定热电

zxm8513优快云博客 2万+

安卓、ios微信H5分享踩坑指南

博主最近在开发一个H5的项目,正好遇到了微信分享,不得不说微信的文档不知多久没更新的缘故,里面的操作可以在安卓完美的进行,但是!有一个可恶的苹果挡住了去路!闲话不多说,直接进去正题。附上步骤图 一、判断是否需要微信授权 根据微信JSSDK文档,一般来说后端需要配置白名单。进入公众号里面填写JS接口安全域名,这点很重要,因为这样才能获取到正确的config配置。按照我现在的项目,我们前端主要做的就是判断用户有没有openid,没有的话就让他去微信登录授权。那该怎么判断呢?没错只能在地址里判断有没有code码

qq_41559229的博客 1207

PID、模糊PID、SkyHook、LQR、H2/H∞、ADRC等悬架控制合集

PID、模糊PID、SkyHook、LQR、H2/H∞等悬架控制合集

Mr.邹的博客 2013

一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!

注意事项:在使用 JSDK 之前,确保先进行初始化成功后再进行分享配置。在定制分享配置时,避免使用 window.location.origin 生成链接,而是使用下述提到的方法来生成,(盲猜,可能是 IOS 和 Android 兼容性问题)link: `${${${${this需要注意的是,H5 分享与网页的 hash 或 history 模式无关。解决方案✅从公众号菜单中的链接打开或从气泡链接进入,同样可以生效。✅✅。

Immerse的 Blog 2163

android 蓝牙通讯demo

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

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

h5端,app端,微信三端-实现三端互相分享,互相跳转

所有参数必须为绝对URL。分享链接需与JS安全域名一致。

RD_Xiaobai的博客 2158

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

解决微信H5自定义分享在IOS下失效的问题(js-sdk: invalid signature)

在H5页面要做一个自定义分享,所以用到了微信的 js-sdk 。安卓下没问题,IOS报错 invalid signature 网上查了许多其他人写的答案,按照其他人说的改动之后还是不行,故总结下来以便后人。 大家先按照其他人的方法排查,如果还不好使再看我的做法。 经过一番根据官方文档的配置,最终config如下 let href = location.href.split('#')[0] ...

掉漆的博客 5926

微信公众号H5端网页分享微信好友-实现思路(踩坑记录总结)

H5端网页微信分享

RD_Xiaobai的博客 6608

H5页面内嵌到微信小程序和APP,做分享操作

H5页面与微信小程序和APP交互

weixin_45846241的博客 1万+

微信分享、网络检测与菜单控制 30 分钟跑通:wechat.js 实战避坑指南

接手一个微信 H5 活动页时,我光是把「分享给朋友」跑通就耗了一下午:`menu:share:appmessage`、`sendAppMessage` 这类接口名对不上号,桥接没就绪时调用直接没反应,Android 和 iOS 的行为还不一致。直到把 wechat.js 引入项目,分享、网络、菜单这些微信内置浏览器的操作全部收敛到一个 `wechat()` 接口,半小时收工。这篇文章围绕分享、网络

gitblog_00022的博客 931

uniapp h5项目 实现微信内分享 以及排坑ios分享获取不到缩略图和描述的bug

uniapp h5项目 实现微信内分享

国企程序媛 record 前端技术 & review code。。。 3345

微信H5分享(踩坑)

微信公众号分享

weixin_57660141的博客 902
上一篇: websocke的一些使用
下一篇: vue 移动端ui框架组件展示
want、
博客等级 码龄7年 10粉丝 51原创
评论 10
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值