2025-02-23 数码 0
在上个月，小程序推出了一个新的特性，即支持内嵌网页，这让我开始探索小程序与内嵌网页的交互之旅。之前，我仅擅长于安卓开发。
然而，内嵌网页中使用JSSDK 1.3.0提供的接口时，我遇到了一个问题：支付接口的调用并未得到支持。这迫使我深入研究，终于打通了两者之间的交互流程。
大致过程如下：
首先，我们需要了解涉及到的文件和步骤：
app.js：小程序中的全局数据文件，其中定义了一个名为 paySuccessUrl 的变量，用来存储支付成功后的跳转URL。
web-view>：用于在小程序中嵌入网页。
在内嵌网页中的web_pay.vue组件中，当触发支付时，将支付金额、说明以及支付成功跳转URL（或任何其他参数）通过编码传递给小程序原生页面。
具体代码如下：
let jumpUrl = encodeURIComponent(window.location)
let path = `/page/pay/pay?amount=$title=$jumpUrl=$`
url: path
})
然后，在原生页面加载完成后，我们可以获取这些值：
onLoad: function (options) {
console.log(options)
// 获取传递过来的值，并进行解构赋值
jumpUrl = options.jumpUrl
amount = options.amount
title = options.title
},
当用户完成支付后，我们会将跳转URL更新以包含支付结果和当前时间：
paySuccess () {
let currentTime = new Date().getTime()
jumpUrl += encodeURIComponent(`?payResult=1&time=${currentTime}`)
}
最后，在显示页面时，我们会检查是否有有效的跳转URL，并根据其内容更新界面状态：
onShow: function () {
let paySuccessUrl = getApp().globalData.paySuccessUrl
if (paySuccessUrl) {
let url = decodeURIComponent(paySuccessUrl)
this.setData({
url,
})
}
},
此外，还需要处理路由变化事件，以确保在用户返回到相同路由时不会导致界面重复刷新。例如，如果用户从https://host/#/pay进入，然后在https://host/?#/#/payment,我们只需在beforeRouteUpdate方法中处理相关逻辑即可。
总结一下，这一技术手法不仅展示了如何实现微信小程序与内嵌网页之间的交互，还揭示了如何解决一些潜在的问题，如没有直接支持的小功能，以及如何优雅地处理不同场景下的路由管理。如果你对这方面感兴趣，请继续关注我的下一篇文章，或留言讨论！
