vue支付宝支付空白页的问题

vue项目放在支付宝生活号支付问题

最近我们有一项目把我们的vue项目放在支付宝生活号中,中间没有什么问题都很简单,但是还用遇见了小插曲(支付宝支付),我们并未采用以jssdk的方式去做支付宝支付,因为支付宝支付也有网页支付,为了简便我们选择了用一套。
前端调用支付接口后端去调用支付宝支付接口返回from表单,只要执行支付宝返回的就可以了,开始我用的是document.write方法去执行,一开始没有事儿,但是过了一段时间在网页端可以正常执行但是在支付宝浏览器中不能执行,当时很纳闷也不报错也没有提示就是空白页,卸载支付宝在重新安装就又可以了。所以我就在想是不是支付宝浏览器有缓存的事儿,但是我在代码中console标记了下,再次发布console出现了,那么就不是缓存的事儿,所以就联想到document.write这个会不会让支付宝返回的from表单不能执行,我换了一种方法 const div = document.createElement(‘div’) // 创建div
div.innerHTML = res.data.payReturnStr // 将返回的form 放入div
document.body.appendChild(div)
document.forms[0].submit()
创建标签手动执行他的submit方法。
结果真的可以。真是折腾了我半天。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用Vue 3仿写支付宝页面,您需要掌握以下技能: 1. Vue 3的基础知识,包括组件、指令、响应式数据等。 2. HTML、CSS、JavaScript的基础知识,包括布局、样式、事件处理等。 3. 了解支付宝页面的设计和结构,包括首页、账单页面、转账页面等。 下面是一个简单的示例,展示了如何使用Vue 3仿写支付宝的首页: 1. 创建一个Vue组件来表示支付宝首页: ``` <template> <div class="container"> <header> <!-- 头部导航栏 --> </header> <section class="banner"> <!-- 轮播图 --> </section> <section class="features"> <!-- 功能列表 --> </section> <section class="bills"> <!-- 账单列表 --> </section> <footer> <!-- 底部导航栏 --> </footer> </div> </template> <script> export default { name: 'AlipayHome' }; </script> <style> .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; } </style> ``` 2. 在您的Vue应用程序中,您可以使用这个组件来创建一个类似支付宝首页的页面。例如,您可以使用以下代码创建一个AlipayHome组件: ``` <template> <div> <alipay-home></alipay-home> </div> </template> <script> import AlipayHome from './AlipayHome.vue'; export default { components: { AlipayHome } }; </script> ``` 3. 创建各个子组件,如头部导航栏、轮播图、功能列表、账单列表等,然后将它们添加到AlipayHome组件中。 4. 使用Vue 3提供的响应式数据和事件处理机制,实现动态更新和交互效果。 总之,使用Vue 3仿写支付宝页面需要一定的前端开发经验和技能,需要您花费一定的时间和精力来学习和实践。但是,如果您能够掌握这些技能,您将能够创建出美观、交互丰富的Web应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值