2025-02-23 数码 0
在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始了将小程序与内嵌网页结合的技术探索之旅。作为一名曾经只擅长安卓开发的小白，我对这项功能充满好奇和挑战。然而，随着深入研究，我发现内嵌网页中并没有直接支持支付接口的调用，这让我遇到了一些坎坷。
为了解决这个问题，我决定自己动手，尝试实现支付功能的交互。在这一过程中，我需要准备一些关键文件和配置：
app.js：这里定义了一个全局变量paySuccessUrl，用来存储支付成功后的跳转URL。
web-view: 这是用于展示内嵌网页的组件，我们需要在其中设置必要的参数以便于通信。
在web_pay.vue页面中，当用户触发支付时，我们需要将相关信息（如金额、说明、跳转URL等）传递给小程序原生页面。
onLoad事件处理函数会接收来自内嵌网页传过来的参数，并解构它们，以便后续使用。
在支付成功后，我们会更新全局变量paySuccessUrl，将其附带支付结果及当前时间戳，以便记录和返回正确信息。
onShow事件监听器用于检测是否有新的paySuccessUrl值，如果有，则解析并设置数据以反映最新状态，同时清空该变量以防止重复触发事件链条中的其他操作或刷新界面，从而确保只有第一次成功返回才会影响界面显示，而不是每次都如此进行无效刷新或重新加载路由路径。这一步骤对于采用Vue Router管理路由规则至关重要，因为它允许我们利用beforeRouteUpdate钩子来处理这种情况，而不必担心因重定向导致不必要的界面更新或路由重新加载的问题。例如，在一次从https://host/#/pay到https://host/?payResult=1time=123456#/paysuccessful跳转的情况下，只要前者是通过beforeRouteUpdate钩子触发，就能顺利地获取新URL中的query参数，并根据实际需求做出相应响应，而不会因为没有真正改变而引起额外负担。如果你正处于类似场景，可以通过观察to.query对象及其属性值来判断具体行为，如检查是否为"1"表示成功，以及执行相应逻辑。此外，记得调用next()函数继续流程，使其能够按照预期完成之前未完成但已经启动的事务流程，不断调整直至达到最终目标，无论何种形式，一切都是为了完善体验尽可能减少用户感知上的变化，让整个系统更加稳健可靠，为你的项目注入更好的性能优化方案。
