2025-02-23 数码 0
在前沿科技2023的引领下，我踏上了小程序内嵌网页的征程，之前我只是一个普通的小安卓用户。随着微信小程序开放了新的功能支持内嵌网页，我开始探索这条道路。然而，在JSSDK 1.3.0提供的接口中，我遇到了一个坎：支付接口的调用被禁止。这迫使我深入研究，最终成功打通了两端之间的交互。
大致流程如下：
首先，我们需要了解涉及到的文件和步骤：
app.js：小程序中的全局数据文件，其中定义了一个名为 paySuccessUrl 的全局变量，用来存储支付成功后的跳转链接。
web-view>：用于显示内嵌网页内容。
web_pay.vue：负责处理支付逻辑并传递相关参数到小程序原生页面。
接着，在内嵌网页中，当触发支付时，我们需要将必要参数（如金额、说明、跳转链接等）通过编码传递给小程序原生页面，并进行解码以获取这些信息。
let jumpUrl = encodeURIComponent(window.location)
let path = `/page/pay/pay?amount=$title=$jumpUrl=$`
url: path
})
然后，在原生页面中，我们需要监听载入事件，并从URL中解析出传过来的值。
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}`)
}
最后，在显示事件中，我们检查是否有全局变量中的跳转链接，如果存在，则使用它来更新界面状态，而不是重新加载整个界面，这样可以实现无刷新返回效果，同时也不会触发路由重定向，从而避免不必要的操作。
onShow: function () {
console.log(on show)
let paySuccessUrl = getApp().globalData.paySuccessUrl
if (paySuccessUrl) {
let url = decodeURIComponent(paySuccessUrl)
this.setData({
url,
})
}
},
在Vue Router的情况下，仅当URL中的查询字符串发生变化时，会触发beforeRouteUpdate方法。在这里，你可以根据新的路径对象 (to.query) 来判断是否是来自于小程序的支付成功回调，然后执行相应操作或更新界面状态。如果有空余时间，我将整理并分享完整示例代码。如果这篇文章对你有所帮助，请点亮心动之星！
