如何开科技火了微信小程序与内嵌网页交互实现支付功能小白们来学习吧

如何开科技？微信小程序与内嵌网页交互实现支付功能，小白们来学习吧！上个月，小程序开放了新功能，支持内嵌网页，所以我就开始了小程序内嵌网页之路，之前我只是个小安卓。内嵌网页中可使用JSSDK 1.3.0提供的接口，可坑就来了，居然不支持支付接口的调用，经过一番研究，总算打通了两边的交互。

大概流程如下：

首先，我们需要说明涉及到的文件。在这个过程中，我们将会用到app.js文件，它定义了一个全局变量paySuccessUrl，以保存支付成功后的跳转URL。

在web-view中，我们可以通过调用支付时，把支付金额、支付说明和跳转URL等参数传递给小程序原生页面。例如：

let jumpUrl = encodeURIComponent(window.location)

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

url: path

})

然后，在onLoad事件中，我们可以获取这些从网页传过来的值，并解析它们。这一步骤是通过ES6语法来完成的。

当用户点击完成支付操作后，这时我们需要把跳转URL附带着支付结果和当前时间保存到全局变量里。这个步骤如下所示：

paySuccess () {

let currentTime = new Date().getTime()

jumpUrl = options.jumpUrl + `?payResult=1&time=${currentTime}`

}

最后，在onShow事件中，当用户回到页面时，如果有保存的paySuccessUrl，则会触发界面加载并解析数据。如果有任何新的变化或者更新，都应该在beforeRouteUpdate方法中进行处理，因为它是Vue Router中的一个钩子函数，可以检测到路由发生改变的情况。

这样，一系列复杂且细致的手动操作，就能够让我们的应用变得更加智能和高效。如果你对此感兴趣，不妨深入了解一下代码背后的逻辑，这样你也能成为一名专业的小程序开发者！