2025-02-23 数码 0
在上个月，小程序推出了一个新的功能，它支持内嵌网页，这促使我开始探索小程序内嵌网页的世界。之前，我只是一个普通的安卓用户。
在内嵌网页中，我们可以使用JSSDK 1.3.0提供的接口，但我们发现支付接口调用被禁用。这让我们的任务变得更加困难。我花了不少时间研究和解决这个问题，终于成功实现了两边之间的交互流程。
以下是大致的步骤：
首先，我们需要准备一些文件。在这篇文章中，我们会提到以下几个关键文件：
app.js：这是小程序中的核心文件。在这里，我定义了一个全局变量paySuccessUrl，用于保存支付成功后的跳转URL。
web-view.vue：这是我们在内嵌网页中的Vue组件。在这里，我们调用支付时，将支付金额、说明以及支付成功后的跳转URL（及其他任何需要传递的参数）传递给小程序原生页面。
接下来，让我们详细看一下这些步骤是如何实现的：
在内嵌网页中设置跳转URL：
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
...
},
支付成功后更新全局变量：
paySuccess () {
let currentTime = new Date().getTime()
jumpUrl += encodeURIComponent(`?payResult=1&time=${currentTime}`)
// 清空支付成功url，防止一些操作触发onShow事件
}
onShow: function () {
if (paySuccessUrl) {
let url = decodeURIComponent(paySuccessUrl)
this.setData({
url,
})
}
},
触发界面刷新并处理路由变化：
beforeRouteUpdate (to, from, next) {
console.log(路由发生改变，很有可能是小程序的支付成功回调)
if (to.query.payResult === '1') {
// 如果为true，则表示已经完成了某些操作
}
next()
}
这样就完成了一次完整的小程序与内嵌网页交互过程。如果你对这种技术感兴趣或遇到了类似的问题，请继续关注我的下一篇文章，或许我还能分享更多有用的信息。
