2025-02-23 数码 0
在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始了将网页集成到小程序中的探索之旅。之前，我只是一个普通的安卓用户。
为了实现这个目标，我必须解决一个问题，那就是内嵌网页中无法直接调用支付接口。这需要我进行一番研究，直到最终找到了两者之间交互的方法。
以下是整个过程的大致流程：
首先，我们需要准备一些文件。在这里，我们会使用到的文件包括：
app.js：小程序的app.js文件，在其中定义了一个全局变量paySuccessUrl，用来存储支付成功后的跳转URL。
其次，在内嵌的网页web_pay.vue中，当触发支付时，我们需要将支付金额、支付说明以及支付成功后的跳转URL（以及任何其他你想要传递的参数）传递给小程序原生的页面。具体步骤如下：
在web_pay.vue中，通过JSSDK 1.3.0提供的接口，可以在web-view标签中实现这一功能：
let jumpUrl = encodeURIComponent(window.location)
let path = `/page/pay/pay?amount=$title=$jumpUrl=$`
url: path
})
}
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 encodeURIComponent(`?payResult=1time=$`)
// payResult=1表示支付成功，这里我偷懒了直接在url后面补?,实际情况比较复杂
getApp().globalData.paySuccessUrl=jumpUrl //保存跳转url到小程序全局变量里
}
最后，在onShow函数中，我们检查是否有存储好的跳转URL，并且清空该变量以防止重复触发事件。
if (paySuccessUrl) {
let url = decodeURIComponent(paySuccessUrl)
this.setData({
url:url,
})
}
}
beforeRouteUpdate (to, from, next) {
console.log(路由发生改变，很有可能是小程序的支付成功回调)
if (to.query && to.query.payResult === '1') { // 小程序返回付款结果为已完成，则执行相应操作
next()
}
}
这就是如何实现微信小程序与内嵌网页之间通信并处理支付功能的小白们可以学习的一些步骤。如果这篇文章对您有所帮助，请点赞！
