微信小程序与内嵌网页交互实现支付功能小白们科协权力大吗来学习吧火了

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

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

下面是大致的流程：

首先，我们需要了解涉及到的文件，特别是app.js，因为我们将在其中定义一个全局变量paySuccessUrl来存储支付成功后的跳转URL。

接着，在内嵌网页中，我们可以通过以下方式调用支付接口：

// 在web_pay.vue中

let jumpUrl = encodeURIComponent(window.location)

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

url: path

})

然后，在原生页面 onLoad 中，我们可以获取这些传递过来的参数：

onLoad: function (options) {

console.log(options)

// 获取网页传过来的值

// TODO 用es6解构来获取值TODO

jumpUrl = options.jumpUrl

amount = options.amount

title = options.title

},

当支付成功时，我们需要更新全局变量以保存跳转URL和当前时间：

paySuccess () {

let currentTime = new Date().getTime()

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

}

最后，在 onShow 中，当 paySuccess 的 URL 被设置后，界面就会根据这个 URL 进行更新，而不会触发界面的刷新或路由重新加载，只有当 beforeRouteUpdate 触发时才会执行相应操作：

beforeRouteUpdate (to, from, next) {

if (to.query.payResult === '1') {

console.log('支付成功')

next()

}

}

由于篇幅较长，这里就不再继续编写。如果这篇文章对你有帮助，请点赞表示支持。