小白们你准备好学习微信小程序与内嵌网页交互实现支付功能的科技画了吗

在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始了将小程序与网页的交互实现支付功能的探索之旅。作为一名初出茅庐的小安卓开发者，我面临着许多挑战，尤其是在尝试使用JSSDK 1.3.0提供的接口时发现支付接口无法调用。

经过一番深入研究和实践，我最终成功打通了两者的交互流程。以下是大致的步骤：

首先，我们需要准备一些文件。在这个过程中，我们会用到：

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

然后，在内嵌网页中（web-view），我们可以通过以下方式进行通信：

在vue组件web_pay.vue中，当触发支付时，我们需要向原生页面传递必要的参数，如支付金额、说明以及支付成功后要跳转到的URL，并且确保这些参数被正确编码以避免特殊字符的问题。

当支付完成后，根据返回结果更新全局变量jumpUrl并附加时间戳，以便于区分不同的回调请求。

最后，在onShow方法中检查是否有存储在全局数据中的paySuccessUrl，如果存在则解析其内容并设置到界面数据中，从而触发界面的无刷新加载。

由于采用的是vue-router，并且前后的URL仅在query参数上有所不同，所以不会触发界面刷新或路由重新加载，而是只会触发beforeRouteUpdate事件，可以在这里处理来自小程序端的通知，比如payment success等信息。

在beforeRouteUpdate方法中，我们可以检测到来自小程序端的通知，并根据情况进行相应处理，例如显示提示消息或者执行其他逻辑操作。

虽然这项工作有些复杂，但最终能够实现对话框样式的小程序与内嵌网页之间高效安全地进行交互，是非常值得庆幸的一次学习经历。如果你也有类似的需求，不妨跟随我的脚步一起探索，也许能找到更多灵感和解决方案。