国家科技成果网官网上火的微信小程序与内嵌网页交互实现支付功能小白们你准备好了吗来一起学习吧

在国家科技成果网官网上，一位开发者分享了微信小程序与内嵌网页交互实现支付功能的经验。文章详细介绍了这个过程，包括小程序开放新功能支持内嵌网页后，作者开始学习这方面知识，并解决了一些遇到的问题，如JSSDK 1.3.0中支付接口调用不支持的问题。

文章分为几个步骤来说明整个流程：

首先，作者介绍了涉及到的文件和全局变量的定义。在小程序的app.js文件中，有一个全局变量paySuccessUrl，用来保存支付成功后的跳转URL。

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

接着，在小程序端，当收到这些参数后，可以通过onLoad方法获取并解析这些信息。同时，当支付成功时，可以更新全局变量paySuccessUrl，并在onShow方法中监听是否有新的跳转URL，并清空旧值以防止重复触发。

最后，由于采用的是vue-router模式，界面不会刷新，而是会触发beforeRouteUpdate方法。在这里可以处理路由变化事件，比如解析to.query中的数据并根据需要进行相应操作。

文章结尾提到，如果有空将整理出一个示例代码，并希望读者对这篇文章表示赞赏。