vue3 HarmonyOS 华为鸿蒙浏览器的支付宝支付问题解决

写在下面文章后两天===》时隔两天之后越想越不对劲，遂找到另外一个方法通过监听页面的显示的方式即可实现返回刷新，就不会有一下问题了
window.addEventListener('pageshow', function(event) {//event.persisted属性为true时，表示当前文档是从往返缓存中获取console.log('页面显示监听')if (event.persisted) {console.log('缓存读取')setTimeout(() => {window.location.reload();}, 500);}});

事情是这样的，现在的vue3+ts项目需要用到支付宝支付，支付的方式都很简单，就是获取form表单然后提交即可，但是在鸿蒙的自带浏览器中出现了诡异的情况，主要表现在

在支付表单提交后，点击返回，页面不会有任何刷新（其他的手机浏览器是会重新加载），这样也就监听不到生命周期中的任何函数，对于程序来说，就好像这次跳转根本不存在，这还不是最离谱的！
当我从支付页面返回到首页，这个时候变换支付参数再去发起表单提交，华为的自带浏览器居然没用重新加载，还是用的之前的表单提交，导致买的品类还是之前的订单。这就离了大谱了！！！

机智如我，先是尝试了生命周期的调试，无效，根本没有任何反应，遂放弃！

于是我先，如果判断华为浏览器，然后将表单的target=_blank在新页面打开呢？

嘿，结果您猜怎么着？这个属性华为浏览器直接没反应，诶，就是雷打不动…

怎么办呢？

看来曲线救国是不行了，得来硬的，好在 window.open() 这个方法还能用，思路大概是通过浏览器标识判断是华为浏览器，此时新开一个页面，将请求到的form数据存在sessionStorage（url参数方式带表单太长，着实是有点不优雅）,然后在/huaweiPay的这个页面中获取sessionStorage中的表单数据提交。

看码：

//util.ts 中封装浏览器标识判断
export function navigatorMark(curr:string='') {//获取浏览器标记const userAgent = navigator.userAgent.toUpperCase();console.log(userAgent)if(curr){curr = curr.toUpperCase();return userAgent.indexOf(curr)>-1;}return userAgent;
}//navigatorMark

// payment.ts 封装的支付宝支付
export function AlipayPay(form: string) {if(navigatorMark('HUAWEI')){//华为鸿蒙的垃圾浏览器，要单独做兼容sessionStorage.setItem('HaweiPayForm',form);setTimeout(() => {sessionStorage.removeItem('HaweiPayForm');}, 50);window.open(`${getHostUrl()}/huaweiPay`);return false;}//下面是正常支付let div = document.createElement('div');div.id = 'payDom';div.style.display = 'none';div.innerHTML = form;document.body.appendChild(div); setTimeout(() => {let formDom = document.getElementById('payDom')?.getElementsByTagName('form')[0];formDom?.submit();}, 10);
} //AlipayPay

<!-- /huaweiPay 的路由页面 --><template><div id="huaweiPay"><!-- 华为鸿蒙系统的垃圾浏览器，做了缓存，提交支付表单不会刷新，返回也监听不到生命周期，所以单开一个页面做支付，国产系统还有很长的路要走啊，可愁死我了！！！！ --><p class="info">订单支付中....</p><div id="payDom"></div></div>
</template><script lang="ts"> import { defineComponent, ref} from "vue";export default defineComponent({setup() {const formDom = ref<string | null>(sessionStorage.getItem('HaweiPayForm'));if(!formDom.value){return false;}else{sessionStorage.removeItem('HaweiPayForm');//安全起见，插入表单之后就删除setTimeout(() => {//有dom插入，延迟300mslet payDom = (document.getElementById('payDom') as HTMLBaseElement);payDom.innerHTML = formDom.value as string;payDom.getElementsByTagName('form')[0]?.submit();}, 300);}return {formDom};}, //setup
}); </script>

补充知识，sessionStorage像上述这样的跳转，A->B,A的数据会拷贝到B，但是B的删除不会对A，A的操作同理也不会影响到B，他们相互独立管理。

如上所述，相同的问题在调整过程中，Android开发的同事也有反应，在对鸿蒙系统做兼容的时候很痛苦，或许我们应该理性看待，国产系统真的还有很长的路要走…

vue3 HarmonyOS 华为鸿蒙浏览器的支付宝支付问题解决相关推荐

什么时候可以升级HarmonyOS,华为鸿蒙OS即将迎来升级手机版本或仍需时间
原标题:华为鸿蒙OS即将迎来升级手机版本或仍需时间在2019年的华为开发者大会上,华为消费者业务CEO余承东正式对外发布了HarmonyOS.时隔一年后,华为开发者大会2020即将拉开帷幕.此次大 ...
华为鸿蒙HarmonyOS,华为鸿蒙HarmonyOS 2.0
华为鸿蒙HarmonyOS 2.0是面向万物互联时代的全场景分布式操作系统,公测设备支持华为P40 .P40 Pro.Mate 30.Mate 30 Pro. MatePad Pro 设备,支持 OT ...
华为鸿蒙2系统harmonyOS,华为鸿蒙系统明年目标覆盖1亿台以上设备
12月16日,华为开发者日暨HarmonyOS 2.0手机开发者Beta版发布活动在北京举行.据华为消费者业务软件部总裁王成录介绍,今年已有120多家应用厂商已开始基于鸿蒙系统进行创新.2021年,华 ...
华为鸿蒙2系统harmonyOS,华为鸿蒙HarmonyOS 2.0Beta版官方
华为鸿蒙HarmonyOS 2.0Beta版官方,最新推出的华为系统包,是属于我们国人的,只要你有华为手机,就能在这里找到相关的信息,并且及时就能更新成功,在这里你可以选择相关的资源信息,满足了你对系 ...
微信浏览器打开支付宝支付页面
最近遇到了一点小难题微信浏览器默认把支付宝正式网关屏蔽了,怎么才能在微信浏览器内打开正式的支付宝支付页面呢, 答案很简单,用frame实现. 主要做法把发送给支付宝的url镶嵌在frame的s ...
华为鸿蒙HarmonyOS,华为鸿蒙HarmonyOS-系统概述
HarmonyOS是一款"面向未来".面向全场景(移动办公.运动健康.社交通信.媒体娱乐等)的分布式操作系统.在传统的单设备系统能力的基础上,HarmonyOS提出了基于同一套系统 ...
华为HarmonyOS 鸿蒙,华为鸿蒙OS系统规划曝光，原来国产自主研发系统已经如此强大...
原标题:华为鸿蒙OS系统规划曝光,原来国产自主研发系统已经如此强大华为自主研发系统华为鸿蒙OS系统从2019年就发布了,但是很多小伙伴疑惑为啥华为鸿蒙OS系统吹那么响亮,却不应用到手机上呢,其实之前 ...
vue移动端浏览器项目，调用支付宝支付
浏览器调用支付宝支付,只需要前端这边,提交后台返回的表单即可,并且提供一个支付完成后的回调地址给后台即可,接口那边返回的表单格式一般为: <form name="punchout_fo ...
harmonyos pc,华为鸿蒙系统（HarmonyOS）9月11日发布2.0版本将打通PC、手表和车机等产品终...
原标题:华为鸿蒙系统(HarmonyOS)9月11日发布2.0版本将打通PC.手表和车机等产品终据国内媒体报道,华为鸿蒙系统(HarmonyOS)将于今年9月11日举行的华为开发者大会上发布2.0版 ...

vue3 HarmonyOS 华为鸿蒙浏览器的支付宝支付问题解决

vue3 HarmonyOS 华为鸿蒙浏览器的支付宝支付问题解决相关推荐

最新文章

热门文章