在科技馆微信小程序与内嵌网页交互能实现支付功能小白们要不要来学习一下

在科技馆，小程序新功能上线，支持内嵌网页交互，我这边就开始了小程序与内嵌网页的技术探索之旅。之前我只是一个普通的小白，但现在我已经跨入了这个领域。

要实现支付功能，我们需要了解一些文件和步骤。首先是涉及到的文件，包括：

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

接下来是在内嵌网页web_pay.vue中调用支付时传递参数给小程序原生页面：

在web_pay.vue中，当调用支付时，将支付金额、说明以及跳转URL等参数通过encodeURIComponent进行编码，并传递给小程序原生页面。

然后，在小程序端获取这些参数并处理：

支付成功后，将跳转URL带有支付结果和当前时间的信息保存到全局变量中，以便于返回时使用。

最后，在onShow函数中检查是否有支付成功的记录，并根据记录更新界面数据：

当设置数据后，如果有paymentSuccessful记录，就会触发web-view中的网页加载，但是由于采用的是vue-router且前后两个URL仅在query部分不同，因此不会触发界面刷新或路由重新加载，而是只会触发beforeRouteUpdate方法，让我们在这里解析新的query数据并进行相应操作。

最终，在beforeRouteUpdate方法中处理来自小程序的paymentSuccessful事件，确认是否为有效回调，并执行必要的操作。

虽然写得晚了一些，但希望这篇文章能对你有所帮助。如果觉得好，可以点个赞支持一下！