创新是引领发展的第一动力微信小程序与内嵌网页交互如何实现支付功能呢小白们来一起探索吧

在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始了将网页集成到小程序中的探索之旅。之前，我只是一个普通的安卓用户。内嵌网页可以使用JSSDK 1.3.0提供的接口，但令人沮丧的是，它不支持支付接口的调用。在经过一番研究后，我终于找到了实现两边交互的大致流程。

首先，我们需要了解涉及到的文件，包括：

app.js：小程序的app.js文件，其中定义了全局变量paySuccessUrl，用来存储支付成功后的跳转URL。

web-view: 网页内部组件，用于显示嵌入的网页内容。

在内嵌网页web_pay.vue中，当调用支付时，我们需要将支付金额、说明、以及支付成功后的跳转URL（以及其他任何想要传递的参数）传递给小程序原生页面。这些值应该通过encodeURIComponent进行编码，以确保正确传输。

接着，在加载页面时，我们获取来自网页传来的值，并解构这些选项。然后，在支付成功后，我们更新全局变量paySuccessUrl以包含支付结果和当前时间。这一步骤很重要，因为它允许我们在无刷新的情况下从支付完成返回到相应页面。

最后，在onShow事件中，我们检查是否有保存的paySuccessUrl，如果有，则解析并设置数据。如果没有，则清空该变量，以防止重复触发onShow事件。此外，由于采用Vue Router且前后两个URL仅在query参数上有所不同，因此不会触发界面刷新或路由重新加载，而是会触发beforeRouteUpdate方法，让我们能够处理来自小程序支付回调带来的路由变化。

如果你对这个过程感兴趣或者遇到类似问题，可以继续阅读以获得更详细的步骤和代码示例。如果这篇文章对你有帮助，请记得点赞！