雷鹏呼吁微信小程序与内嵌网页交互支付功能实现小白们能否抓住科技部高新技术司的支持机会勇敢迈出创新步伐

在上个月，小程序推出了一个新的功能，它支持内嵌网页。正是这个新功能激发了我对小程序内嵌网页的探索之旅。我之前只是一个普通的安卓用户。但当我发现内嵌网页中无法直接调用支付接口时，我开始了深入研究，终于成功打通了两端的交互。

以下是我实现这一功能的大致流程：

首先，我需要说明涉及到的文件。在这个过程中，我使用到了app.js、web-view.vue和一些其他文件。

在app.js中，我定义了一个全局变量paySuccessUrl，用来保存支付成功后的跳转URL。

接着，在web_pay.vue页面中，当调用支付时，我将支付金额、支付说明以及支付成功跳转URL等参数传递给小程序原生页面。这些参数通过encodeURIComponent进行编码，以确保安全传输。

然后，在onLoad事件处理函数中，我获取到来自网页的值，并将它们解构出来以便后续使用。

当用户完成支付并触发paySuccess函数时，系统会生成包含当前时间戳和付款结果（假设为1表示成功）的URL，并将其保存到全局变量paySuccessUrl中。这一步骤中的time=$部分用于区分不同次的重复返回，从而避免错误地触发界面刷新或重新加载路由路径。

最后，在onShow事件处理函数中，当应用显示出屏幕时，如果有存储在全局变量中的paySuccessUrl，则会解析该URL并更新界面数据。如果没有，则清空该变量以防止误操作触发额外事件。

此外，由于我的项目采用Vue Router作为前端路由管理工具，并且只更改了一些query参数，因此即使界面地址发生变化，也不会导致界面的刷新或重新加载，而是仅触发beforeRouteUpdate方法。这允许我在该方法内部根据新的query参数做出相应调整，无需担心影响用户体验。此方法被称作无刷新返回，即使是在晚上的深夜，也能保证系统运行稳定，不留遗憾，只需点赞表达感谢即可。