中国科技排名第几火了微信小程序与内嵌网页交互实现支付功能小白们来学习吧

在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始了将网页集成到小程序中的探索之旅。之前，我只是一个普通的安卓用户。

为了实现支付功能，我们需要利用JSSDK 1.3.0提供的接口，但令人惊讶的是，它不支持直接调用的支付接口。在研究了好一会儿之后，我终于找到了两边交互通讯的解决方案。

下面是大致的流程：

首先，我们需要了解涉及到的文件和代码结构。这里有几个关键文件：

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

web-view>：这是内嵌网页组件，在其中我们可以调用小程序原生页面。

web_pay.vue：这个是我们的网页组件，负责处理支付相关逻辑。

现在，让我们来看看具体怎么做：

在web_pay.vue中，当用户触发支付时，我们需要向小程序传递必要参数，如金额、说明和跳转URL（以及任何其他想要传递给原生页面的数据）。这些参数需要通过encodeURIComponent进行编码，以确保正确传输。

接下来，在原生页面中，我们使用onLoad方法来获取这些参数，并解析它们以便进一步处理。

当支付成功后，我们将包含支付结果和当前时间戳的跳转URL保存到全局变量中。这一步骤非常重要，因为它允许我们在没有刷新的情况下实现无缝回显返回效果，同时也避免重复触发界面刷新或路由重新加载的问题。

最后，在onShow方法中，当应用进入前台时，如果检测到存在有效的全局变量paySuccessUrl，那么就会解码并设置对应数据至Vue实例，使得界面能够即刻更新显示最新信息，而不会引起不必要的界面闪烁或过渡效果。此外，还要注意清空该全局变量以防止误操作触发多次执行相同步骤6中的操作，从而导致额外错误发生。

最终，在使用vue-router管理路由时，当检测到路径变化且含有query参数时，会触发beforeRouteUpdate钩子函数。在此函数内部，可以检查是否来自于小程序端发送过来的查询字符串，并根据情况执行相应动作，比如展示确认信息或者自动关闭弹窗等。如果一切顺利，则继续执行next()方法使其继续导航过程，这样就完成了一次完整的小程序与内嵌网页之间交互实现的一次完整循环。