2025-02-23 数码 0
在上个月，小程序推出了一个新的功能，它支持内嵌网页，这促使我开始了将小程序与内嵌网页相结合的探索之旅。之前，我只是一个普通的安卓用户。
为了实现这一目标，我必须解决一些挑战，尤其是在使用JSSDK 1.3.0提供的接口时发现支付接口无法调用。在经过一番研究和努力后，我终于成功打通了两者的交互流程。
以下是大致的步骤：
首先，我们需要准备相关文件。在这个过程中，我们会用到：
app.js：小程序中的app.js文件，其中定义了全局变量paySuccessUrl，以保存支付成功后的跳转URL。
web-view: 内嵌网页组件，用于显示外部内容并与小程序进行交互。
在内嵌网页web_pay.vue中，当我们调用支付时，我们需要将支付金额、支付说明以及支付成功后的跳转URL（以及任何其他想要传递的参数）通过encodeURIComponent编码，并传递给小程序原生页面：
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到小程序全局变量里
}
然后，在页面显示时，我们可以检查是否有保存好的付款成功URL，如果有，就设置数据以触发界面的更新：
onShow: function () {
console.log(on show)
let paySuccessUrl = getApp().globalData.paySuccessUrl
if (paySuccessUrl) {
let url = decodeURIComponent(paySuccessUrl)
this.setData({
url,
})
}
},
最后，在vue-router环境下，当路由发生改变且可能来自于小程序的付款回调时，可以通过beforeRouteUpdate方法处理界面的更新和数据解析：
beforeRouteUpdate (to, from, next) {
console.log(路由发生改变，很有可能是小 程序 的 支付 成功 回调)
if (to.query.payResult === '1') {
next()
}
},
这就是我如何克服了一些困难并实现微信小程序与内嵌网页之间交互以实现支付功能的小白们学习指南。如果你觉得这篇文章对你有帮助，请不吝点赞。
