2025-02-23 数码 0
在上个月，小程序推出了一个新的功能，它支持内嵌网页。作为一名曾经只是小安卓开发者，我开始了我的小程序内嵌网页之旅。在这次探索中，我遇到了一个挑战：JSSDK 1.3.0提供的接口不支持支付调用。这迫使我深入研究，直到最终成功实现了两端的交互。
以下是大致的流程：
首先，我们需要准备相关文件。这些文件将被用到：
app.js: 小程序中的app.js文件，其中定义了全局变量paySuccessUrl，以保存支付成功后的跳转URL。
web-view.vue: 内嵌网页中的组件，负责处理支付逻辑。
在web_pay.vue组件中，当调用支付时，我们会将所需参数（如金额、说明和跳转URL）传递给小程序原生页面。这里使用的是encodeURIComponent来确保参数安全。
let jumpUrl = encodeURIComponent(window.location)
let path = `/page/pay/pay?amount=$title=$jumpUrl=$`
url: path
})
然后，在原生页面 onLoad 方法中，我们解析这些参数并进行必要的操作：
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 = options.jumpUrl + `?payResult=1&time=${currentTime}`
// payResult=1表示支付成功，这里我偷懒了直接在url后面补?,实际情况比较复杂
getApp().globalData.paySuccessUrl=jumpUrl //保存跳转url到小程序全局变量里
}
最后，在onShow方法中，我们检查是否有未处理的支付信息，并根据此信息更新界面状态：
onShow: function () {
console.log(on show)
let paySuccessUrl = getApp().globalData.paySuccessUrl
if (paySuccessUrl) {
let url = decodeURIComponent(paySuccessUrl)
this.setData({
url,
})
}
},
通过这种方式，当用户完成购买并返回时，他们不会看到任何刷新或重新加载，但他们会收到正确的数据，从而能够无缝地继续他们的体验。此外，如果你正在使用Vue Router，你还可以利用beforeRouteUpdate钩子来捕获来自于这个过程的小程序回调，并根据需要进行相应操作。
如果你的心情好，请点亮一下那颗赞赏星星！
