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

在上个月，小程序推出了一个新的功能，它支持内嵌网页。正是因为这个新功能，我开始了将小程序与内嵌网页集成的旅程。我之前只是一个普通的安卓用户。

内嵌网页中可以使用JSSDK 1.3.0提供的接口，但我遇到了一个问题：这些接口不支持支付接口调用。在经过一番研究后，我终于找到了解决方案，打通了两边之间的交互流程。

以下是我所采用的大致流程：

首先，我们需要准备一些文件。这些建议将会在下文中被频繁提及：

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

web-view.vue：这是在内嵌网页中用于调用的Vue组件。

现在，让我们详细了解一下步骤：

4、当在web_pay.vue组件中进行支付时，我们需要传递支付金额、支付说明以及支付成功后的跳转URL（或者任何其他想要传递的参数，记得使用encodeURIComponent进行编码）给小程序原生页面。具体代码如下：

let jumpUrl = encodeURIComponent(window.location)

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

this.$router.push({ name: 'path', params: { url: path } })

6、当支付成功后，我们需要把跳转URL附带着支付结果和当前时间保存到全局变量paySuccessUrl中。具体代码如下：

paySuccess () {

let currentTime = new Date().getTime()

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

getApp().globalData.paySuccessUrl = jumpUrl // 将jumpUrl保存到小程序全局变量里

}

8、最后，在onShow事件处理函数中，我们检查是否有未处理完毕的payment URL，并且清空该URL以防止重复触发。具体代码如下：

onShow: function () {

let paySuccessUrl = getApp().globalData.paySuccessUrl

if (paySuccessUrl) {

this.setData({

url: decodeURIComponent(paySuccess_url)

})

// 清空payment URL，以便于下次使用

getApp().globalData.pay_success_url = ''

}

}

通过以上步骤，你就能够实现从内嵌网页到小程序原生页面无缝通信并完成付款操作。如果你有兴趣查看完整示例或进一步优化此过程，请留意我的后续更新。如果这篇文章对你有帮助，不妨点个赞表示感谢！