小白们你准备好迎接第三次科技革命了吗微信小程序与内嵌网页交互实现支付功能的秘密我们一起去探索吧

在上个月，小程序推出了一个新的功能，它支持内嵌网页，这让我开始了探索小程序内嵌网页的旅程。在这之前，我只是一个小安卓开发者。然而，当我尝试使用JSSDK 1.3.0提供的接口时，我发现支付接口的调用是不可用的。这迫使我深入研究，直到最终解决了两边交互的问题。

下面是实现过程的大致流程：

首先，我们需要了解涉及到的文件。以下是一些关键文件：

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

web-view>：这是一个Web视图组件，它允许我们在小程序中嵌入网页。

然后，在内嵌的网页中，我们需要编写JavaScript代码来调用支付接口并传递必要的参数，如支付金额、说明和成功跳转URL。我们还需要处理一些其他参数，并确保它们被正确地编码以便传递给原生页面。

let jumpUrl = encodeURIComponent(window.location)

let path = `/page/pay/pay?amount=$title=$jumpUrl=$`

url: path

})

}

onLoad: function (options) {

console.log(options)

// 获取网页传过来的值

// TODO 用es6解构来获取值TODO

jumpUrl = options.jumpUrl

amount = options.amount

title = options.title

...

},

当用户完成支付后，我们需要更新全局变量，以保存支付结果和当前时间。这可以通过修改URL并添加查询参数来实现，从而触发界面的刷新或重新加载。

最后，在页面显示时，我们检查全局变量是否有值，如果有，则解析查询参数并更新界面。如果没有，则什么都不做。在Vue Router环境中，因为我们的路由模式设置为history模式，所以即使URL发生变化，也不会触发界面的刷新，而是会触发beforeRouteUpdate钩子函数，让我们可以根据新的路由参数进行相应操作。

这个过程可能看起来复杂，但实际上它提供了一种高效且灵活的方式来处理不同平台之间的交互问题。如果你对这种技术感兴趣，或希望了解更多细节，请留言或点赞支持本文！